Мастерство в области HTML-заголовков: Структурный подход к веб-контенту

Введение

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

Примечание: Вы можете практиковать программирование в 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/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70769{{"Различные уровни HTML-заголовков"}} html/head_elems -.-> lab-70769{{"Различные уровни HTML-заголовков"}} html/text_head -.-> lab-70769{{"Различные уровни HTML-заголовков"}} html/doc_flow -.-> lab-70769{{"Различные уровни HTML-заголовков"}} html/inter_elems -.-> lab-70769{{"Различные уровни HTML-заголовков"}} end

Добавление HTML-шаблона

Первым шагом является создание HTML-файла с именем index.html. Вы можете использовать любой текстовый редактор, такой как Notepad, TextEdit или Sublime Text.

Добавьте базовую структуру HTML в файл index.html, введя <!DOCTYPE html> на первой строке и теги <html></html> на второй и последней строках соответственно.

<!doctype html>
<html>
  <head></head>
  <body></body>
</html>

Добавление раздела

Внутри тегов <html> создайте раздел <head> с использованием тега <head>. Внутри раздела <head> добавьте заголовок вашей веб-страницы с использованием тега <title>.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
</html>

Создание раздела

Создайте раздел <body> с использованием тегов <body></body>. Внутри раздела <body> добавьте разные уровни заголовков с использованием тегов <h1> до <h6>.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <h2>First Sub-Heading</h2>
    <h3>Second Sub-Heading</h3>
    <h4>Third Sub-Heading</h4>
    <h5>Fourth Sub-Heading</h5>
    <h6>Fifth Sub-Heading</h6>
  </body>
</html>

Убедитесь, что замените "Main Heading" и подзаголовки своими собственными соответствующими названиями.

Группировка заголовков с использованием `<hgroup>`

Вы можете сгруппировать несколько заголовков с использованием тега <hgroup>. В следующем примере мы группируем последние три заголовка с использованием <hgroup>.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <h2>First Sub-Heading</h2>
    <h3>Second Sub-Heading</h3>
    <h4>Third Sub-Heading</h4>
    <hgroup>
      <h4>Fourth Sub-Heading Part 1</h4>
      <h5>Fourth Sub-Heading Part 2</h5>
      <h6>Fourth Sub-Heading Part 3</h6>
    </hgroup>
  </body>
</html>

Сохраните файл index.html и откройте его в веб-браузере, чтобы увидеть заголовки, которые вы создали.

Резюме

В этом практическом занятии вы узнали, как создавать HTML-заголовки с использованием тегов <h1> до <h6>. Заголовки необходимы для создания хорошо структурированной веб-страницы и также помогают в оптимизации поисковой выдачи. Помните, что каждый HTML-файл должен содержать только один тег <h1> для основного заголовка страницы.

Различные уровни HTML-заголовков