Введение
Семантический HTML - это важный концепт в веб-разработке, так как он помогает поисковым системам и технологиям для инвалидов лучше понять содержимое веб-сайта. Одним из элементов, который можно использовать для создания семантического HTML, является тег <article>. В этом лабе мы узнаем, как использовать тег <article> и как он помогает в создании доступных веб-страниц.
Примечание: Вы можете практиковать программирование в
index.htmlи изучить Как писать HTML в Visual Studio Code. Пожалуйста, нажмите на 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Добавьте структуру HTML5
Создайте файл index.html в своем любимом текстовом редакторе и сохраните файл.
Добавьте базовую структуру HTML5 в файл index.html. Это включает в себя объявление <!DOCTYPE html>, элемент <html>, элемент <head> и элемент <body>.
<!doctype html>
<html>
<head>
<title>Моя веб-страница</title>
</head>
<body>
<!-- Добавьте содержимое здесь -->
</body>
</html>
Добавьте тег
Внутри элемента <body> добавьте тег <article>. Этот тег будет содержать основное содержимое вашей веб-страницы. Тег <article> имеет открывающий и закрывающий теги.
<article>
<!-- Добавьте основное содержимое здесь -->
</article>
Добавьте содержание статьи
Внутри тега <article> добавьте некоторое содержимое, которое будет представлять основное содержимое веб-страницы. Это может быть что угодно, например, статья, блог-пост или описание продукта.
<article>
<h1>Моя замечательная статья</h1>
<p>
Это основное содержимое моей веб-страницы. Это действительно замечательная
статья, которую должен прочитать каждый.
</p>
<p>Вот несколько причин, почему:</p>
<ul>
<li>Она хорошо написана</li>
<li>Она информативна</li>
<li>Она забавна</li>
</ul>
</article>
Добавьте тег
Внутри тега <article> добавьте тег <footer>, чтобы предоставить дополнительную информацию о контенте.
<article>
<h1>Моя замечательная статья</h1>
<p>
Это основное содержимое моей веб-страницы. Это действительно замечательная
статья, которую должен прочитать каждый.
</p>
<p>Вот несколько причин, почему:</p>
<ul>
<li>Она хорошо написана</li>
<li>Она информативна</li>
<li>Она забавна</li>
</ul>
<footer>
<p>
Опубликовано <time datetime="2022-09-15">15 сентября 2022 года</time>
<a href="#">John Doe</a>
</p>
</footer>
</article>
Сохраните файл index.html и откройте его в веб-браузере, чтобы увидеть конечную веб-страницу с контактной информацией.
Резюме
Использование тега <article> - это простой способ создать семантический HTML и сделать ваш сайт более доступным. Используя тег <article>, вы можете предоставить дополнительную информацию о главном контенте на вашей веб-странице, что может помочь поисковым системам и технологиям для assistive technologies лучше понять ваш сайт. Не забывайте всегда проверять свою HTML-код, чтобы убедиться, что он не содержит ошибок и соответствует всем необходимым стандартам.
