Кратко о документе
<html> … </html>
Данные теги показывают начало и конец документа HTML, и называются корневыми. Они показывают браузеру границы страницы для обработки. Все HTML страницы должны содержать данные теги. Все остальное содержимое хранится внутри тегов html.
<head> … </head>
Содержит специфическую информацию о странице, включая кодировку, мета-информацию, подключение скриптов и подключение стилей.
<title> … </title>
Содержат заголовок страницы, который отображается на вкладке в браузере. Используется для поиска страницы с помощью поисковых систем и для ориентации по вкладкам. Распоалагаются внутри тега head.
<body> … </body>
Содержит весь контент, который отображается на странице. Все что мы видим на html странице располагается в нем.
Пример
|
1 2 3 4 5 6 7 |
<html> <head> <title>Пример</title> </head> <body> </body> </html> |
Информация о документе
<base>
Базовый URL, используется для создания относительных ссылок на сайте. Не обязательный тег.
<meta>
Мета данные, многофункциональный тег, который показывает кодировку документа, описание, ключевые слова и многое другое. Используется с атрибутами.
<link>
Тег используется для подключения внешних страниц, например таблиц стилей
<style> … </style>
Содержит встроенные стили для страницы. Рекомендуем выносить стили в отдельный документ, однако, в некоторых случаях целесообразно прописать стили внутри документа.
<script> … </script>
Данный элемент может использоваться для оборачивания различных скриптов на странице, например JavaScript и для подключения внешних скриптов
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html> |
Структура документа
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h6>…</h6>
Шесть уровней заголовков для создания структурных блоков. Самый важный — h1. Элементы содержат описания блоков текста, разделов, страниц. Аналогия — заголовки в книгах
<div></div>
Просто прямоугольный блок. Не несет смыслового контента, используется в верстке для создания прямоугольных областей.
<span> … </span>
Используется для выделения элементов внутри строки, с последующих их оформлением с помощью CSS.
<p> … </p>
Служит для создания параграфов в тексте.
<br>
Служит для разрыва строки внутри параграфа, блока, заголовка. Большой ошибкой есть использование данного тега для организации переносов строк — для этого используются параграфы.
<hr>
Создает горизонтальную линию. Является блочным элементом. Служит для разделения логических блоков текста, подведения итого.
Примеры
|
1 2 3 4 5 |
<h2>Заголовок</h2> <p>Это пример простого <span>параграфа текста</span>. В нем используется выделение отдельных слов.</p> <hr> <h3>Еще немного заголовков</h3> <p>Обязательно используйте параграфы для раздения <span>логических</span> блоков текста.</p> |
Заголовок
Это пример простого параграфа текста. В нем используется выделение отдельных слов.
Еще немного заголовков
Обязательно используйте параграфы для раздения логических блоков текста.
Текст (и форматирование)
<strong> … </strong>
Выделение важных, ключевых слов в тексте. Слов, на которые делается логическое ударение. Браузеры выделяют данный тег жирным начертанием. Не используйте strong для простого, визуального выделения. В HTML5 тег strong используется в семантическом контексте.
<b> … </b>
Визуальное выделение жирным шрифтов. Служит для оформления. Не несет смысловой нагрузки.
<em> … </em>
Выделение слов в тексте, которые выделяются при произношении, чтении. Служит для указания смысловой нагрузки на текст. Выделяется курсивом.
<i> … </i>
Выделение курсивом. Не несет смысловой нагрузки. Служит для оформления текста.
<cite> … </cite>
Цитата, цитируемая информация.
<pre> … </pre>
Преформатированный текст. Моноширинный текст. Форматирование выводится так, как задал пользователь внутри блока окруженного тегами pre, в частности отступы, пробелы — сохраняются.
<blockquote> … </blockquote>
Чаще всего цитаты из текста, текст, выделенный для цитирования.
<q> … </q>
Сокращенный тег, используемый для цитирования.
<abbr title="полное название" > … </abbr>
Выделение аббревиатур. При наведении мыши всплывает полное написание аббревиатуры.
<address> … </address>
Тег использовался для обертки адреса. Сейчас, ипользуется для указания адреса в сети Интернет (URL) материала, ссылки, цитаты. Для форматирования почтового адреса используйте микроформаты и микроданные.
<dfn> … </dfn>
Используется для обозначения определений.
<code> … </code>
Используется для выделения текста моноширинным шрифтом. Часто используется для форматирования кода языков программирования.
<sup> … </sup>
Выделение верхнего индекса. Например для создания обозначения m2.
<sub> … </sub>
Создание нижнего индекса.
<small> … </small>
Изначально использовался для создания текста, с размерами меньше основного. Сейчас — для выведения информации менее важной, чем основной текст. Пример — оформление сносок в документе.
Примеры
|
1 2 |
<p><strong>Бульба</strong> был <em>упрям страшно</em>. Это был один из <i>тех характеров</i>, которые могли возникнуть только в <b>тяжелый ХV век</b> на полукочующем углу Европы, когда вся южная первобытная Россия, оставленная своими князьями, была опустошена, выжжена дотла неукротимыми набегами монгольских хищников.</p> <blockquote>Когда, лишившись дома и кровли, стал здесь отважен человек; когда на пожарищах, в виду грозных соседей и вечной опасности, селился он и привыкал глядеть им прямо в очи, разучившись знать, существует ли какая боязнь на свете.</blockquote> |
Бульба был упрям страшно. Это был один из тех характеров, которые могли возникнуть только в тяжелый ХV век на полукочующем углу Европы, когда вся южная первобытная Россия, оставленная своими князьями, была опустошена, выжжена дотла неукротимыми набегами монгольских хищников.
Когда, лишившись дома и кровли, стал здесь отважен человек; когда на пожарищах, в виду грозных соседей и вечной опасности, селился он и привыкал глядеть им прямо в очи, разучившись знать, существует ли какая боязнь на свете.
