Тег 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 я изобразил на картинке:
Думаю, никаких комментариев к картинке не требуется.
В 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; я
В 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>, как и ряд других тегов, появился лишь в 5-й версии языка разметки. Поэтому не все браузеры правильно обрабатывают его. В спецификации языка предполагается, чтобы тег содержал в себе заголовок раздела (h2-h6) или страницы, а также необходимые в «шапке» сайта вспомогательные элементы, включая баннеры, блок контактных данных и другие. Как и большинство тегов в HTML, <header> должен иметь свою «закрывающую пару» — </header>, обозначающий окончание действия свойств данного тега. Желая подстроить заголовок сайта под свой личный тип оформления, для тега можно использовать ряд атрибутов, определяющих его стиль.
Примеры использования
Практика работы с тегом позволит полностью понять принципы работы <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>. По этой причине лучше всегда использовать эти теги, несмотря на то, что с помощью стилей любой текст можно установить большого размера и, тем самым, сделать его заголовком.