Создание контейнера основного содержания в HTML

Введение

В HTML тег <main> используется для представления основного или доминирующего содержания документа. Это новый тег, введенный в HTML5, и он обычно пишется внутри тега <body>. Содержание тега <main> должно быть уникальным и непосредственно связанным с центральной темой документа. Это похожая концепция на ориентир, который быстро идентифицирует и упрощает навигацию в большом документе.

В этом лабе мы узнаем, как использовать тег <main> для создания контейнера для основного содержания в HTML.

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

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 95%. Он получил 100% положительных отзывов от учащихся.

Настройка HTML-файла

Создайте новый файл и назовите его index.html. Откройте его в предпочитаемом редакторе кода.

В раздел <head> HTML-файла добавьте следующий код:

<!doctype html>
<html>
  <head>
    <title>Creating a Main Content Container in HTML</title>
  </head>
  <body></body>
</html>

Добавление заголовка и подвала

Чтобы наша веб-страница выглядела полной, мы добавим заголовок и подвал.

Добавьте следующий код между тегами <body> вашего HTML-файла:

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</header>

<main>
  <p>Welcome to my website. This is the main content area.</p>
</main>

<footer>
  <p>&copy;2021 My Website. All rights reserved.</p>
</footer>

Вышеприведенный код определяет заголовок с меню навигации, тег <main> и подвал.

Добавление содержимого в тег

Теперь, когда мы настроили наш заголовок и подвал, мы можем добавить содержание в тег

Добавьте следующий код между тегами

<main>
  <h2>About Us</h2>
  <p>
    We are a company that specializes in web development services. Our team
    consists of experienced web developers who can help you create a website
    that will help your business grow.
  </p>
  <h2>Our Services</h2>
  <ul>
    <li>Web Design</li>
    <li>Web Development</li>
    <li>Search Engine Optimization</li>
    <li>Social Media Marketing</li>
  </ul>
  <h2>Our Portfolio</h2>
  <p>Here are some of the websites we have created:</p>
  <ul>
    <li><a href="#">Website 1</a></li>
    <li><a href="#">Website 2</a></li>
    <li><a href="#">Website 3</a></li>
  </ul>
</main>

Проверка итогового HTML-кода

После добавления области основного содержания ваш HTML-код должен выглядеть так:

<!doctype html>
<html>
  <head>
    <title>Creating a Main Content Container in HTML</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h2>About Us</h2>
      <p>
        We are a company that specializes in web development services. Our team
        consists of experienced web developers who can help you create a website
        that will help your business grow.
      </p>
      <h2>Our Services</h2>
      <ul>
        <li>Web Design</li>
        <li>Web Development</li>
        <li>Search Engine Optimization</li>
        <li>Social Media Marketing</li>
      </ul>
      <h2>Our Portfolio</h2>
      <p>Here are some of the websites we have created:</p>
      <ul>
        <li><a href="#">Website 1</a></li>
        <li><a href="#">Website 2</a></li>
        <li><a href="#">Website 3</a></li>
      </ul>
    </main>

    <footer>
      <p>&copy;2021 My Website. All rights reserved.</p>
    </footer>
  </body>
</html>

Резюме

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

Основное содержание HTML