Мастерство в семантическом HTML с использованием тега article

Введение

Семантический HTML - это важный концепт в веб-разработке, так как он помогает поисковым системам и технологиям для инвалидов лучше понять содержимое веб-сайта. Одним из элементов, который можно использовать для создания семантического HTML, является тег <article>. В этом лабе мы узнаем, как использовать тег <article> и как он помогает в создании доступных веб-страниц.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Пожалуйста, нажмите на 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70702{{"Раздел статьи в HTML"}} html/head_elems -.-> lab-70702{{"Раздел статьи в HTML"}} html/text_head -.-> lab-70702{{"Раздел статьи в HTML"}} html/lists_desc -.-> lab-70702{{"Раздел статьи в HTML"}} html/doc_flow -.-> lab-70702{{"Раздел статьи в HTML"}} html/inter_elems -.-> lab-70702{{"Раздел статьи в HTML"}} end

Добавьте структуру HTML5

Создайте файл index.html в своем любимом текстовом редакторе и сохраните файл.

Добавьте базовую структуру HTML5 в файл index.html. Это включает в себя объявление <!DOCTYPE html>, элемент <html>, элемент <head> и элемент <body>.

<!doctype html>
<html>
  <head>
    <title>Моя веб-страница</title>
  </head>
  <body>
    <!-- Добавьте содержимое здесь -->
  </body>
</html>

Добавьте тег `<article>`

Внутри элемента <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-код, чтобы убедиться, что он не содержит ошибок и соответствует всем необходимым стандартам.

Раздел статьи в HTML