Тег header – Заголовки html (теги h1 — h6), html форматирование текста (теги strong, b, em, i, blockquote, pre) | Создание сайтов и заработок в сети

Тег header. Классы, селекторы и свойства в CSS

Листинги кода урока

Новые участки кода находятся между <!-- New --><!-- End -->. Можете уже сейчас вставить этот код в соответствующие файлы, сохранить и открыть index.html в браузере. Таким образом, увидите какой результат будет по итогу урока.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Store</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>	

	
        <!-- New -->
	<header>
	</header>
        <!-- End -->

	
</body>
</html>

style.css:

html, body{
	margin: 0;
}
.header{
	background: #cb2d41;
	height: 100px;
}

Начало урока. Разбор файла index.html

В index.html по сравнению с предыдущим уроком изменилось немного. Я только добавил после <body> следующий код:

<header>
</header>

Верхнюю часть сайта, называемую "шапка", помещают в специальный тег <header></header>.

На вашем сайте в <header></header> будет вся красная верхушка, как на store.echain.ru:

Шапка сайта

Цвет фона для header я задал свойством background в style.css. Если вы еще не открыли файл style.css в SublimeText, то откройте.

Сейчас у вас в SublimeText открыто 2 файла: index.html и style.css. Для удобства сделайте следующее: вверху SublimeText нажмите View, в выпавшем окне наведите на Layout, и выберите там Columns: 2. Ваш редактор разделится на 2 колонки и файлы можно разместить в разных колонках. Так вы будете видеть сразу оба файла. Смотрите видео:

Разбор файла style.css

Структуру стилей в CSS я изобразил на картинке:

Структура стилей в CSS (схематично)

Думаю, никаких комментариев к картинке не требуется.

В index.html я задал тегу header класс "header". И в style.css задал стили для этого класса — .header. В CSS точка означает, что стили задаются именно для класса.

 То есть, браузер будет "искать" в index.html класс header, чтобы задать ему цвет фона #cb2d41.

#cb2d41 — такой формат задания цвета называется HEX.

В профессиональной верстке задавать стили через классы это почти стандарт, и вы должны сразу к этому привыкать.

Кстати, название класса может быть абсолютно любым, хоть abcdef, но все-таки удобнее называть классы по смыслу HTML-элемента.

Также, для .header я задал высоту height: 100px;. Я сделал это только лишь для наглядности. Дело в том, что, если блок сайта пустой или внутри него нет никакого контента (текста, изображения, видео), то высота этого блока равна 0, и вы этот блок не увидите в браузере. В следующих уроках я уберу высоту у .header.

Переопределение стилей браузера. Инструменты разработчика в браузере

Обратите внимание на код:

html, body{
	margin: 0;
}

Если вы удалите этот код и сохраните style.css, то увидите в браузере, что шапка не на всю ширину браузера (слева, справа, а также сверху, будут белые полоски). В каждом браузере уже прописаны некоторые стили для всех HTML-тегов. Это стили браузера по умолчанию. В нашем случае белые полосы будут из-за того, что для тега <body></body> в браузере указаны отступы margin. Чтобы это увидеть вызовите в браузере средства разработчика. Для этого, если у вас Google Chrome или Yandex Browser, просто нажмите на клавиатуре F12.

 Инструменты разработчика в браузере

С инструментами разработчика удобнее работать, когда окно открыто внизу. Для того, чтобы его перенести вниз, нажмите справа на 3 точка, и в открывшемся окошке выберите нужное расположение. Смотрите видео:

В средствах разработчика видна структура HTML, а справа CSS-стили выделенного HTML-элемента. Если вы нажмете на <body>, то в CSS увидите, что помимо наших стилей у body есть еще другие стили, и в них margin: 8px;.  Задав margin: 0; я переопределил стиль margin для html и body.

В CSS я и для html указал margin: 0;, чтобы убрать отступы во всех браузерах, даже в тех, которые вы и не знаете.

Конец урока. В данном уроке вы узнали:

background — CSS-свойство для задания фона HTML-элемента

height — свойство для задания высоты

margin — внешние отступы

<header></header> — тег для "шапки" сайта.

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

Стандартные стили браузера нужно переопределять.

В Google Chrome и Yandex Browser есть инструменты разработчика, которые  вызываются клавишей F12.

Стили в CSS задаются через селекторы. В качестве селектора нужно стараться выбирать класс HTML-элемента.

Материал был полезен? Поделитесь в соц. сетях:

HTML Тег заголовок


Заголовок в теге <article>:

Пример

<article>
  <header>
   <h2>Самый важный заголовок</h2>
   <h4>Менее важный заголовок</h4>
    <p>Дополнительная информация</p>
  </header>
  <p>Набор текста Lorem Ipsum</p>
</article>

Попробуйте сами »

Определение и использование

Tег <header> представляет собой контейнер для вводного содержимого или набор навигационных ссылок.

Тег <header> обычно содержит:

  • один или несколько элементов заголовка (<h2> - <h6>)
  • логотип или иконку
  • авторскую информацию

В одном документе может быть несколько элементов <header>.

Примечание: Тег <header>, не может быть помещен в теги <footer>, <address> или <header>.


Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент..

Элемент
<header> 6.0 9.0 4.0 5.0 11.1

Различий между HTML 4.01 и HTML5

Tег <header> новый в HTML5.


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

Tег <header>

также поддерживает Глобальный атрибут в HTML.


Атрибуты событий

Tег <header> также поддерживает Атрибуты событий в HTML.


Связанные страницы

Справочник HTML DOM: Объект header


Настройки CSS по умолчанию

Большинство браузеров будет отображать элемент <header> со следующими значениями по умолчанию:

header {
    display: block;
}


Атрибут headers | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
5.0+ 1.0+ 1.0+ 2.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Позволяет связать ячейки таблицы с заголовками. Этот атрибут предназначен для повышения доступности таблицы пользователям речевых браузеров, в обычных браузерах результат применения атрибута headers не заметен.

Для связывания ячеек между собой, ячейке в теге <th> задается атрибут id, а в другой ячейке — атрибут headers со значением, совпадающим со значением id.

Синтаксис

<th>...</th>
<th headers="идентификатор">...</th>

Значения

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

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут headers</title>
 </head>
 <body> 
  <table cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td>Имя</td>
    <td>Фамилия</td>
    <td>Телефон</td>
    <td>Адрес</td>
    <td>Номер комнаты</td>
   </tr>
   <tr>
    <th headers="name">Иван</th>
    <th headers="name surname">Пырьев</th>
    <th headers="tel">555-94-32-95</th>
    <th headers="address">Улица Ассинизаторов, 69</th>
    <th headers="num">908Б</th>
   </tr>
  </table>
 </body>
</html>

Атрибут headers | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Позволяет связать ячейки таблицы с заголовками. Этот атрибут предназначен для повышения доступности таблицы пользователям речевых браузеров, в обычных браузерах результат применения атрибута headers не заметен.

Для связывания ячеек между собой одной ячейке в теге <td> или <th> задается атрибут id, а второй ячейке — атрибут headers со значением, совпадающим со значением id.

Синтаксис

<td>...</td>
<td headers="идентификатор">...</td>

Значения

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

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут headers</title>
 </head>
 <body> 
  <table cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td>Имя</td>
    <td>Фамилия</td>
    <td>Телефон</td>
    <td>Адрес</td>
    <td>Номер комнаты</td>
   </tr>
   <tr>
    <td headers="name">Иван</td>
    <td headers="surname">Пырьев</td>
    <td headers="tel">555-94-32-95</td>
    <td headers="address">Улица Ассинизаторов, 69</td>
    <td headers="num">908Б</td>
   </tr>
  </table>
 </body>
</html>

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 2.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.

Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.

Внутри контейнера <head> допускается размещать следующие элементы: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.

Синтаксис

<head>
  ... 
</head>

Закрывающий тег

Не обязателен.

Атрибуты

profile
Указывает адрес профиля метаданных.

Также для этого тега доступны глобальные атрибуты.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
   <!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
  </head>

  <body>
   <!-- А здесь надо размещать все, что хочется увидеть на странице. -->
  </body>
 </html>

Что такое в HTML header?

При работе с сайтом первый из тегов, с которым сталкивается программист в HTML, - <header>. При его использовании без атрибутов, различий в сравнении с другими тегами не видно, из-за чего возникает вопрос возможных причин его использования.

Как и где использовать?

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

html header

В HTML <header>, как и ряд других тегов, появился лишь в 5-й версии языка разметки. Поэтому не все браузеры правильно обрабатывают его. В спецификации языка предполагается, чтобы тег содержал в себе заголовок раздела (h2-h6) или страницы, а также необходимые в "шапке" сайта вспомогательные элементы, включая баннеры, блок контактных данных и другие. Как и большинство тегов в HTML, <header> должен иметь свою "закрывающую пару" - </header>, обозначающий окончание действия свойств данного тега. Желая подстроить заголовок сайта под свой личный тип оформления, для тега можно использовать ряд атрибутов, определяющих его стиль.

Примеры использования

Практика работы с тегом позволит полностью понять принципы работы <header>. HTML-примеры его использования можно найти практически на каждом крупном сайте. На них он обычно применяется для обозначения верхнего колонтитула.

header html примеры

Одним из способов задания "шапки" сайта с помощью тега <header> является следующий пример:

<header>

<h2>HTML5</h2>

</header>

Помимо заголовка, сюда можно также добавить любые желаемые элементы и теги, за исключением <footer>. Он отвечает за нижний колонтитул страницы и не может присутствовать в "шапке" сайта. При обнаружении этого элемента внутри тега заголовка сайт будет загружаться неверно.

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 2.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<h2>Заголовок первого уровня</h2>

Атрибуты

align
Определяет выравнивание заголовка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег h2 и h3</title>
 </head>
 <body>

  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna 
  aliguam erat volutpat.</p>

  <h3>Ut wisis enim ad minim veniam</h3>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution 
  ullamcorper suscipit lobortis nisl ut aliquip ex ea 
  commodo consequat.</p>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид заголовков первого и второго уровня в браузере

Примечание

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *