Пост

Html. Элементы header, footer, main

Элементы для разметки контента на странице header, footer, main

Опубликовано
Html. Элементы header, footer, main
Html. Элементы header, footer, main
Автор alex
3 мин. чтения
Html. Элементы header, footer, main

Продолжим изучать элементы html, на очереди элементы для разметки основного контента страницы

Представляет собой вводный контент страницы или блока, который содержит заголовок, логотип, навигацию, форму поиска.

1

<header></header>

Назначение

Элемент <header> нужен для вводной информации для своего родительского элемента, это может быть section,article,aside,nav.

Элемент является семантическим.

Элемент отделяет часть контента секционного блока, но основным контентом блока не является.

Особенности

  • Элемент <header> не обязательно должен быть в верхней части элемента, он может быть в любом месте.
  • На странице может быть несколько элементов <header> но в секциях section,article,aside,nav только один.
  • Важно, что элемент <header> не разбивает элементы на разделы и не вводит новые.
  • Важно понимать <header> - это не только шапка сайта, это элемент который отделяет основной контент секции от не основного.
  • <header> можно воспринимать как колонтитул страницы.
  • <header> нельзя помещать в другой <header>.
  • Если элемент содержит заголовок, он формирует заголовки всей страницы.

Родительские/Дочерние элементы

В качестве родительских и дочерних элементов может быть любой потоковый контент, а это считай все элементы.

Атрибуты

Глобальные атрибуты и события.

Примеры

Базовая разметка

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<header>
    <h1>Заголовок сайта</h1>
    <nav>
        <ul>
            
        </ul>
    </nav>
</header>
<main>
    <article>
        <header>
            <h2>Заголовок статьи</h2>
        </header>
        <p>Текст статьи...</p>
    </article>
</main>
<footer>
    
</footer>

Статья

1
2
3
4
5
6

<article>
  <header>
    <h2></h2>
  </header>
  <p>Текст статьи...</p>
</article>

Здесь <header> используется внутри элемента <article>, чтобы представить заголовок и метаданные конкретной статьи.

Форма поиска

1
2
3
4
5
6
7

<header>
  <h1></h1>
  <form action="/search" method="get">
    <input type="search" id="search" name="q" placeholder="Поиск товаров">
    <button>Найти</button>
  </form>
</header>

Поддержка браузерами

Поддерживается всеми современными браузерами.

Стили по умолчанию

1
2
3

header {
  display: block;
}

main

Основное содержимое страницы

1

<main></main>

Назначение

main предназначен для определения основного контента страницы.

Особенности

  • В документе может быть только один элемент <main>.
  • Контент элемента, не должен повторятся на других страницах сайта, он должен быть уникальным основным. Шапка, правая колонка и футер сюда не входят.
  • Нужно использовать семантические элементы для построения структуры элементов внутри <main>.
  • При включении режима чтения, все что за пределами тега <main> будет вырезано + стили.
  • Помогает вспомогательным технологиям, таким как программы чтения с экрана, быстро находить основное содержимое страницы.
  • Элемент <main> семантически важен для поисковиков, чем обычный <div>.

Родительские/Дочерние элементы

В качестве родительского элемента выступает элемент <body>, а дочерних любые из секционных элементов, но это скорее рекомендация, чем правило.

Атрибуты

Глобальные атрибуты и события

Примеры

Статья

1
2
3
4
5
6

<main>
    <article>
        <h2></h2>
        <p></p>
    </article>
</main>

Секции

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<main>
    <section>
        <h2>Latest Posts</h2>
        <article>
            <h3>Post Title 1</h3>
            <p>Post content 1...</p>
        </article>
        <article>
            <h3>Post Title 2</h3>
            <p>Post content 2...</p>
        </article>
    </section>

    <section>
        <h2>Categories</h2>
        <ul>
            <li><a href="#">Category 1</a></li>
            <li><a href="#">Category 2</a></li>
        </ul>
    </section>
</main>

Поддержка браузерами

Поддерживается всеми современными браузерами.

Стили по умолчанию

1
2
3

main {
  display: block;
}

<footer> создает нижнюю часть страницы или блока.

Назначение

<footer> предназначен для представления подвала раздела или страницы.

Обычно он содержит информацию об авторе раздела, ссылки на соответствующие документы, информацию об авторских правах, контактную информацию.

Особенности

  • Элемент <footer> может содержать любой контент.
  • На странице может быть несколько элементов <footer>. Например, для каждой статьи или раздела.
  • Элемент не обязательно должен располагаться внизу, он может быть в любом месте.
  • Контакты лучше поместить в <address>, а уже его в <footer>.
  • Для поисковых машин тег <footer> играет большую роль.

Родительские/Дочерние элементы

Родительский элемент не может быть <header>,<footer>,<address>. В качестве дочерних могут быть любые.

Атрибуты

Глобальные атрибуты и события.

Примеры

Подвал страницы

1
2
3
4
5
6
7

<footer>
    <p></p>
    <nav>
        <a href="#">Политика конфиденциальности</a>
        <a href="#">Условия использования</a>
    </nav>
</footer>

Нижняя часть статьи

1
2
3
4
5
6
7
8

<article>
    <h2>Заголовок статьи</h2>
    <p>Содержание статьи...</p>
    <footer>
        <p></p>
        <time datetime="2024-06-07">7 июня 2024</time>
    </footer>
</article>

Подвал с контактами

1
2
3
4
5

<footer>
    <h3>Свяжитесь с нами</h3>
    <p>Email: info@example.com</p>
    <p>Телефон: +7 (123) 456-78-90</p>
</footer>

Поддержка браузерами

Поддерживается всеми современными браузерами.

Стили по умолчанию

1
2
3

footer {
  display: block;
}
Html
Авторский пост защищен лицензией CC BY 4.0 .

Хотите оптимизировать свой бизнес, нужен сервис, сайт или интеграция.

Бесплатно расчитаю время разработки, предложу решение вашей задачи.