Html5 все теги: HTML и HTML5. Описание тегов по основным разделам

Содержание

HTML 5 Справочник всех тегов онлайн и примеры

= Новое в HTML5.

Тег	Описание
<!—…—>	Определяет комментарий
<!DOCTYPE>	Определяет тип документа
<a>	Определяет гиперссылку
<abbr>	Определяет аббревиатуру или акроним
<acronym>	Не поддерживается в HTML5. Использовать <abbr> Вместо. Определяет акроним
<address>	Определяет контактные данные автора/владельца документа
<applet>	Не поддерживается в HTML5. Использовать <embed> or <object> Вместо. Определяет встроенный апплет
<area>	Определяет область внутри изображения-карты
<article>	Определяет статью
<aside>	Определяет содержание в стороне от содержимого страницы
<audio>	Определяет звуковое содержимое
<b>	Определяет полужирный текст
<base>	Указывает базовый URL-адрес/цель для всех относительных URL-адресов в документе
<basefont>	Не поддерживается в HTML5. Вместо этого используйте CSS. Задает цвет, размер и шрифт по умолчанию для всего текста в документе
<bdi>	Изолирует часть текста, которая может быть отформатирована в другом направлении от другого текста за его пределами
<bdo>	Переопределяет текущее направление текста
<big>	Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет большой текст
<blockquote>	Определяет раздел, который цитируется из другого источника
<body>	Определяет тело документа
<br>	Определяет один разрыв строки
<button>	Определяет нажатую кнопку
<canvas>	Используется для рисования графики, на лету, с помощью сценариев (обычно JavaScript)
<caption>	Определяет заголовок таблицы
<center>	Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет центрированный текст
<cite>	Определяет название работы
<code>	Определяет часть кода компьютера
<col>	Задает свойства столбца для каждого столбца в <colgroup> element
<colgroup>	Задает группу из одного или нескольких столбцов в таблице для форматирования
<data>	Связывает данное содержимое с машинно-читаемым переводом
<datalist>	Задает список предварительно заданных параметров для элементов управления вводом
<dd>	Определяет описание/значение термина в списке описания
<del>	Определяет текст, который был удален из документа
<details>	Определяет дополнительные сведения, которые пользователь может просматривать или скрывать
<dfn>	Представляет определяющий экземпляр термина
<dialog>	Определяет диалоговое окно или окно
<dir>	Не поддерживается в HTML5. Использовать <ul> Вместо. Определяет список каталогов
<div>	Определяет раздел в документе
<dl>	Определяет список описания
<dt>	Определяет термин/имя в списке описания
<em>	Определяет подчеркнутый текст
<embed>	Определяет контейнер для внешнего (не HTML) приложения
<fieldset>	Группирует связанные элементы в форме
<figcaption>	Определяет заголовок для <figure> Элемент
<figure>	Указывает автономное содержимое
<font>	Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет шрифт, цвет и размер текста
<footer>	Определяет нижний колонтитул для документа или раздела
<form>	Определяет HTML-форму для ввода данных пользователем
<frame>	Не поддерживается в HTML5. Определяет окно (фрейм) в фрейме
<frameset>	Не поддерживается в HTML5. Определяет набор фреймов
<h2> to <h6>	Определяет заголовки HTML
<head>	Определяет сведения о документе
<header>	Определяет заголовок документа или раздела
<hr>	Определяет тематическое изменение содержания
<html>	Определяет корень HTML-документа
<i>	Определяет часть текста в альтернативный голос или настроение
<iframe>	Определяет встроенный фрейм
<img>	Определяет изображение
<input>	Определяет элемент управления вводом
<ins>	Определяет текст, вставленный в документ
<kbd>	Определяет ввод с клавиатуры
<label>	Определяет метку для <input> Элемент
<legend>	Определяет заголовок для <fieldset> Элемент
<li>	Определяет элемент списка
<link>	Определяет связь между документом и внешним ресурсом (наиболее используемым для связывания с таблицами стилей)
<main>	Указывает основное содержимое документа
<map>	Определяет изображение на стороне клиента-Map
<mark>	Определяет выделенный/выделенный текст
<menu>	Определяет список/меню команд
<menuitem>	Определяет команду/пункт меню, который пользователь может вызвать из всплывающего меню
<meta>	Определяет метаданные HTML-документа
<meter>	Определяет скалярное измерение в пределах известного диапазона (датчика)
<nav>	Определяет навигационные ссылки
<noframes>	Не поддерживается в HTML5. Определяет альтернативное содержимое для пользователей, которые не поддерживают кадры
<noscript>	Определяет альтернативное содержимое для пользователей, которые не поддерживают сценарии на стороне клиента
<object>	Определяет внедренный объект
<ol>	Определяет упорядоченный список
<optgroup>	Определяет группу связанных параметров в раскрывающемся списке
<option>	Определяет параметр в раскрывающемся списке
<output>	Определяет результат вычисления
<p>	Определяет абзац
<param>	Определяет параметр для объекта
<picture>	Определяет контейнер для нескольких ресурсов изображения
<pre>	Определяет предварительно отформатированный текст
<progress>	Представляет ход выполнения задачи
<q>	Определяет краткое предложение
<rp>	Определяет, что отображать в обозревателях, не поддерживающих аннотации Ruby
<rt>	Определяет объяснение/произношение символов (для восточно-азиатских типографии)
<ruby>	Определяет аннотацию Ruby (для восточно-азиатских типографий)
<s>	Определяет текст, который больше не является правильным
<samp>	Определяет выборку выходных данных из компьютерной программы
<script>	Определяет сценарий на стороне клиента
<section>	Определяет раздел в документе
<select>	Определяет раскрывающийся список
<small>	Определяет меньший текст
<source>	Определяет несколько мультимедийных ресурсов для элементов мультимедиа (<video> И <audio>)
<span>	Определяет раздел в документе
<strike>	Не поддерживается в HTML5. Использовать <del> или <s> Вместо. Определяет текст зачеркивания
<strong>	Определяет важный текст
<style>	Определяет сведения о стиле для документа
<sub>	Определяет текст с подстрочным текстом
<summary>	Определяет видимый заголовок для <details> Элемента
<sup>	Определяет текст с надписью
<svg>	Определяет контейнер для графики SVG
<table>	Определяет таблицу
<tbody>	Группирует содержимое тела в таблице
<td>	Определяет ячейку в таблице
<template>	Определяет шаблон
<textarea>	Определяет многострочный элемент управления вводом (область текста)
<tfoot>	Группирует содержимое нижнего колонтитула в таблице
<th>	Определяет ячейку заголовка в таблице
<thead>	Группирует содержимое заголовка в таблице
<time>	Определяет дату и время
<title>	Определяет заголовок документа
<tr>	Определяет строку в таблице
<track>	Определяет текстовые дорожки для элементов мультимедиа (<video> И <audio>)
<tt>	Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет телетайп текст
<u>	Определяет текст, который должен быть стилистически отличается от обычного текста
<ul>	Определяет неупорядоченный список
<var>	Определяет переменную
<video>	Определяет видео или фильм
<wbr>	Определяет возможный разрыв строки

CSS Справочник и примеры элементы

align-content	Задает выравнивание между линиями внутри гибкого контейнера, если элементы не используют все доступное пространство
align-items	Задает выравнивание для элементов внутри гибкого контейнера
align-self	Задает выравнивание для выбранных элементов внутри гибкого контейнера
all	Сбрасывает все свойства (за исключением Unicode-двунаправленного письма и направления)
animation	Сокращенное свойство для всех свойств анимации
animation-delay	Указывает задержку начала анимации
animation-direction	Указывает, следует ли воспроизвести анимацию вперед, назад или в альтернативных циклах
animation-duration	Указывает, как долго должна проходить анимация для завершения одного цикла
animation-fill-mode	Задает стиль элемента, если анимация не воспроизводится (до начала, после завершения или и то, и другое)
animation-iteration-count	Указывает, сколько раз должна воспроизводиться анимация
animation-name	Задает имя для анимации @keyframes
animation-play-state	Указывает, запущена ли анимация или приостановлена
animation-timing-function	Задает кривую скорости анимации
backface-visibility	Определяет, должна ли быть видна задняя грань элемента при обращении к пользователю
background	Сокращенное свойство для задания всех свойств фона в одном объявлении
background-attachment	Определяет, прокручивается ли фоновое изображение с остальной частью страницы, или зафиксировано
background-blend-mode	Задает режим наложения для каждого слоя фона (цвет/изображение)
background-clip	Определяет, насколько фон (цвет или изображение) должен расширяться в элементе
background-color	Задает цвет фона элемента
background-image	Задание одного или нескольких фоновых изображений для элемента
background-origin	Задает исходную позицию фонового изображения
background-position	Определяет положение фонового изображения
background-repeat	Устанавливает, если/как фоновое изображение будет повторяться
background-size	Определяет размер фоновых изображений
border	Сокращенное свойство для ширины границы, стиля границы и цвета границы
border-bottom	Сокращенное свойство для задания всех свойств нижней границы в одном объявлении
border-bottom-color	Задает цвет нижней границы
border-bottom-left-radius	Определяет радиус границы нижнего левого угла
border-bottom-right-radius	Определяет радиус границы нижнего правого угла
border-bottom-style	Задает стиль нижней границы
border-bottom-width	Задает ширину нижней границы
border-collapse	Устанавливает, должны ли границы таблицы сворачиваться в одну границу или быть разделены
border-color	Задает цвет четырех границ
border-image	Сокращенное свойство для установки всех свойств Border-Image-*
border-image-outset	Определяет величину, на которую область изображения границы выходит за границы рамки
border-image-repeat	Указывает, должно ли изображение границы повторяться, округляться или растягиваться
border-image-slice	Определяет способ среза изображения границы
border-image-source	Указывает путь к изображению, которое будет использоваться в качестве границы
border-image-width	Задает ширину изображения границы
border-left	Сокращенное свойство для задания всех свойств левой границы в одном объявлении
border-left-color	Задает цвет левой границы
border-left-style	Задает стиль левой границы
border-left-width	Задает ширину левой границы
border-radius	Сокращенное свойство для установки всех четырех границ-*-свойства RADIUS
border-right	Сокращенное свойство для задания всех свойств правой границы в одном объявлении
border-right-color	Задает цвет правой границы
border-right-style	Задает стиль правой границы
border-right-width	Задает ширину правой границы
border-spacing	Устанавливает расстояние между границами соседних ячеек
border-style	Задает стиль четырех границ
border-top	Сокращенное свойство для задания всех свойств верхнего края в одном объявлении
border-top-color	Задает цвет верхней границы
border-top-left-radius	Определяет радиус границы верхнего левого угла
border-top-right-radius	Определяет радиус границы верхнего правого угла
border-top-style	Задает стиль верхней границы
border-top-width	Задает ширину верхней границы
border-width	Задает ширину четырех границ
bottom	Устанавливает положение элементов в нижней части родительского элемента
box-decoration-break	Задает поведение фона и границы элемента при разрыве страницы или, для линейных элементов, при разрыве строки.
box-shadow	Прикрепление одной или нескольких теней к элементу
box-sizing	Определяет, как вычисляется ширина и высота элемента: должны ли они включать отступы и границы, или нет
break-after	Задает поведение разрыва страницы, столбца или региона после созданного поля
break-before	Задает поведение разрыва страницы, столбца или региона перед созданным полем
break-inside	Определяет поведение разрыва страницы, столбца или региона в созданном поле
caption-side	Задает размещение заголовка таблицы
caret-color	Определяет цвет курсора (стрелка) в входах, текстового ввода или любого элемента, редактируемого
@charset	Задает кодировку символов, используемую в таблице стилей
clear	Указывает, на каких сторонах элемента плавающие элементы не могут плавать
clip	Зажимы абсолютно позиционированного элемента
color	Задает цвет текста
column-count	Указывает количество столбцов, элемент должен быть разделен на
column-fill	Указывает, как заполнять столбцы, сбалансированные или нет
column-gap	Указывает зазор между столбцами
column-rule	Сокращенное свойство для установки всех свойств столбца-Rule-*
column-rule-color	Задает цвет правила между столбцами
column-rule-style	Задает стиль правила между столбцами
column-rule-width	Задает ширину правила между столбцами
column-span	Указывает, сколько столбцов элемент должен охватывать поперек
column-width	Задает ширину столбца
columns	Сокращенное свойство для задания ширины столбца и счетчика столбцов
content	Используется с: before и: After псевдо-элементы, чтобы вставить сгенерированное содержимое
counter-increment	Увеличивает или уменьшает значение одного или нескольких счетчиков CSS
counter-reset	Создает или сбрасывает один или несколько счетчиков CSS
cursor	Указывает курсор мыши, отображаемый при наведении на элемент
direction	Задает направление текста/направление письма
display	Указывает, как должен отображаться определенный элемент HTML
empty-cells	Указывает, отображать ли границы и фон на пустых ячейках таблицы
filter	Определяет эффекты (например, размытие или сдвиг цвета) на элементе перед отображением элемента
flex	Сокращенное свойство для Flex-расти, Flex-сжатия и Flex-основы свойства
flex-basis	Задает начальную длину гибкого элемента
flex-direction	Указывает направление гибких элементов
flex-flow	Сокращенное свойство для свойств Flex-Direction и Flex-Wrap
flex-grow	Указывает, сколько будет расти номенклатура относительно остальных
flex-shrink	Указывает, как элемент будет сжиматься относительно остальных
flex-wrap	Указывает, следует ли обернуть гибкие элементы
float	Указывает, должно ли поле плавать
font	Задает все свойства шрифта в одном объявлении
@font-face	Правило, позволяющее веб-сайтам загружать и использовать шрифты, не являющиеся «web-safe» шрифтами
font-family	Задает семейство шрифтов для текста
font-feature-settings	Позволяет контролировать расширенные типографские функции шрифтов OpenType
@font-feature-values	Позволяет авторам использовать общее имя в шрифт-вариант-альтернативный для функции, активированной по-разному в OpenType
font-kerning	Управляет использованием информации о кернинге (как буквы расположены в пространстве)
font-language-override	Управляет использованием глифов, специфичных для языка, в шрифте
font-size	Задает размер шрифта текста
font-size-adjust	Сохраняет читаемость текста, когда происходит откат шрифта
font-stretch	Выбор нормальной, сжатой или расширенной грани из семейства шрифтов
font-style	Задает стиль шрифта для текста
font-synthesis	Элементы управления, отсутствующие шрифты (полужирный или курсив) могут быть синтезированы обозревателем
font-variant	Указывает, должен ли текст отображаться в шрифте с малыми прописными буквами
font-variant-alternates	Управляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @font-функция-значения
font-variant-caps	Управление использованием альтернативных глифов для заглавных букв
font-variant-east-asian	Управляет использованием альтернативных глифов для восточно-азиатских скриптов (например, японского и китайского)
font-variant-ligatures	Определяет, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым он относится
font-variant-numeric	Управляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров
font-variant-position	Управляет использованием альтернативных глифов меньшего размера, которые расположены в виде наложения или подстрочных символов относительно базовой линии шрифта
font-weight	Определяет вес шрифта
grid	Сокращенное свойство
grid-area	Либо задает имя элемента сетки, либо это свойство является сокращенным свойством для свойств сетка- начало строки, Сетка-столбец-начало, Сетка-конец строкии Сетка-конец столбца
grid-auto-columns	Задает размер столбца по умолчанию
grid-auto-flow	Указывает, как автоматически размещаемые элементы вставляются в сетку
grid-auto-rows	Задает размер строки по умолчанию
grid-column	Сокращенное свойство для свойств Сетка-столбец-начало и Сетка-конец столбца
grid-column-end	Указывает, где закончить элемент сетки
grid-column-gap	Определяет размер зазора между столбцами
grid-column-start	Указывает, где начать элемент сетки
grid-gap	Сокращенное свойство для свойств Сетка-строка-зазор и Сетка-столбец-зазор
grid-row	Сокращенное свойство для свойств Сетка-строка-начало и Сетка-конец строки
grid-row-end	Указывает, где закончить элемент сетки
grid-row-gap	Определяет размер зазора между строками
grid-row-start	Указывает, где начать элемент сетки
grid-template	Сокращенное свойство для свойств Сетка-шаблон-строки, сетка -шаблон-столбцы и области сетки
grid-template-areas	Указывает, как отображать столбцы и строки с использованием именованных элементов сетки
grid-template-columns	Определяет размер столбцов и количество столбцов в макете сетки
grid-template-rows	Определяет размер строк в макете сетки
hanging-punctuation	Указывает, может ли знак пунктуации размещаться вне поля строки
height	Задает высоту элемента
hyphens	Задание разбиения слов для улучшения макета абзацев
image-rendering	Дает подсказку браузеру о том, какие аспекты изображения наиболее важны для сохранения при масштабировании изображения
@import	Позволяет импортировать таблицу стилей в другую таблицу стилей
isolation	Определяет, должен ли элемент создавать новое содержимое стека
justify-content	Задает выравнивание между элементами внутри гибкого контейнера, если элементы не используют все доступное пространство
@keyframes	Указывает код анимации
left	Задает левое положение позиционного элемента
letter-spacing	Увеличивает или уменьшает расстояние между символами в тексте
line-break	Указывает, как/если разбить линии
line-height	Установка высоты линии
list-style	Задает все свойства для списка в одном объявлении
list-style-image	Задает изображение в качестве маркера элемента списка
list-style-position	Определяет положение маркеров элементов списка (маркеров)
list-style-type	Указывает тип маркера элемента списка
margin	Устанавливает все свойства полей в одном объявлении
margin-bottom	Устанавливает нижнее поле элемента
margin-left	Задает левое поле элемента
margin-right	Задает правое поле элемента
margin-top	Задание верхнего поля элемента
max-height	Задает максимальную высоту элемента
max-width	Задает максимальную ширину элемента
@media	Устанавливает правила стиля для различных типов носителей/устройств/размеров
min-height	Задает минимальную высоту элемента
min-width	Задает минимальную ширину элемента
object-fit	Указывает, как содержимое заменяемого элемента должно быть установлено в поле, установленное его используемой высотой и шириной
object-position	Задает выравнивание заменяемого элемента внутри его поля
opacity	Задает уровень непрозрачности для элемента
order	Задает порядок гибкого элемента по отношению к остальным
orphans	Задает минимальное число строк, которые должны быть оставлены в нижней части страницы при возникновении разрыва страницы внутри элемента
outline	Задает все свойства структуры в одном объявлении
outline-color	Задает цвет контура
outline-offset	Смещение контура и его выводит за пределы края границы
outline-style	Задает стиль контура
outline-width	Задает ширину контура
overflow	Указывает, что происходит, если содержимое переполнено полем элемента
overflow-wrap	Указывает, может ли обозреватель разрывать строки в словах, чтобы предотвратить переполнение (если строка слишком длинная, чтобы вместить ее содержащее поле)
overflow-x	Указывает, следует ли обрезать левый/правый край содержимого, если оно переполнено областью содержимого элемента
overflow-y	Указывает, следует ли обрезать верхний/нижний край содержимого, если оно переполнено областью содержимого элемента
padding	Задает все свойства заполнения в одном объявлении
padding-bottom	Устанавливает нижнее заполнение элемента
padding-left	Задает левое заполнение элемента
padding-right	Задает правое заполнение элемента
padding-top	Задает верхнее заполнение элемента
page-break-after	Задает поведение разбиения страницы после элемента
page-break-before	Задает поведение разбиения страницы перед элементом
page-break-inside	Задает поведение разбиения страниц внутри элемента
perspective	Придает элементу с трехмерной позицией некоторую перспективу
perspective-origin	Определяет, в какой позиции пользователь смотрит на 3D-позиционный элемент
pointer-events	Определяет, реагирует ли элемент на события указателя
position	Указывает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный)
quotes	Задает тип кавычек для внедренных предложений
resize	Определяет, является ли (и как) элемент изменяемым по размерам пользователем
right	Задает правильное положение позиционного элемента
tab-size	Задает ширину символа табуляции
table-layout	Определяет алгоритм, используемый для компоновки ячеек таблицы, строк и столбцов
text-align	Задает выравнивание текста по горизонтали
text-align-last	Описывает, как последняя строка блока или строки перед принудительным разрывом строки выравнивается при выравнивании текста «justify»
text-combine-upright	Задает комбинацию нескольких символов в пространстве одного символа
text-decoration	Указывает украшение, добавляемое в текст
text-decoration-color	Определяет цвет текста-украшение
text-decoration-line	Указывает тип линии в тексте-украшение
text-decoration-style	Задает стиль линии в оформлении текста
text-indent	Задает отступ первой строки в текстовом блоке
text-justify	Задает метод выравнивания, используемый при выравнивании текста «justify»
text-orientation	Определяет ориентацию текста в строке
text-overflow	Указывает, что должно происходить при переполнении содержащегося в тексте элемента
text-shadow	Добавление тени к тексту
text-transform	Управляет капитализацией текста
text-underline-position	Определяет положение подчеркивания, которое задается с помощью свойства Text-декорирование
top	Определяет верхнюю позицию позиционного элемента
transform	Применяет 2D или 3D преобразование к элементу
transform-origin	Позволяет изменить положение на преобразованных элементах
transform-style	Определяет способ визуализации вложенных элементов в трехмерном пространстве
transition	Сокращенное свойство для задания четырех свойств перехода
transition-delay	Указывает, когда начнется эффект перехода
transition-duration	Указывает, сколько секунд или миллисекунд требуется для выполнения эффекта перехода
transition-property	Задает имя свойства CSS, для которого используется эффект перехода
transition-timing-function	Определяет кривую скорости эффекта перехода
unicode-bidi	Используется вместе со свойством direction для установки или возврата текста, который должен быть переопределен для поддержки нескольких языков в одном документе
user-select	Указывает, можно ли выбрать текст элемента
vertical-align	Задание вертикального выравнивания элемента
visibility	Указывает, является ли элемент видимым
white-space	Указывает, как обрабатываются пробелы внутри элемента
widows	Задает минимальное число строк, которые должны быть оставлены в верхней части страницы при возникновении разрыва страницы внутри элемента
width	Задает ширину элемента
word-break	Указывает, как слова должны прерываться при достижении конца строки
word-spacing	Увеличивает или уменьшает расстояние между словами в тексте
word-wrap	Позволяет длинные, неразрывные слова, которые будут сломаны и обернуть к следующей строке
writing-mode

HTML теги по категориям

= Новое в HTML5.

Тег	Описание
<!DOCTYPE>	Определяет тип документа
<html>	Определяет HTML-документ
<head>	Определяет сведения о документе
<title>	Определяет заголовок документа
<body>	Определяет тело документа
<h2> to <h6>	Определяет заголовки HTML
<p>	Определяет абзац
<br>	Вставка одного разрыва строки
<hr>	Определяет тематическое изменение содержания
<!—…—>	Определяет комментарий
Тег	Описание
<acronym>	Не поддерживается в HTML5. Использовать <abbr> Вместо. Определяет акроним
<abbr>	Определяет аббревиатуру или акроним
<address>	Определяет контактные данные автора/владельца документа/статьи
<b>	Определяет полужирный текст
<bdi>	Изолирует часть текста, которая может быть отформатирована в другом направлении от другого текста за его пределами
<bdo>	Переопределяет текущее направление текста
<big>	Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет большой текст
<blockquote>	Определяет раздел, который цитируется из другого источника
<center>	Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет центрированный текст
<cite>	Определяет название работы
<code>	Определяет часть кода компьютера
<del>	Определяет текст, который был удален из документа
<dfn>	Представляет определяющий экземпляр термина
<em>	Определяет подчеркнутый текст
<font>	Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет шрифт, цвет и размер текста
<i>	Определяет часть текста в альтернативный голос или настроение
<ins>	Определяет текст, вставленный в документ
<kbd>	Определяет ввод с клавиатуры
<mark>	Определяет выделенный/выделенный текст
<meter>	Определяет скалярное измерение в пределах известного диапазона (датчика)
<pre>	Определяет предварительно отформатированный текст
<progress>	Представляет ход выполнения задачи
<q>	Определяет краткое предложение
<rp>	Определяет, что отображать в обозревателях, не поддерживающих аннотации Ruby
<rt>	Определяет объяснение/произношение символов (для восточно-азиатских типографии)
<ruby>	Определяет аннотацию Ruby (для восточно-азиатских типографий)
<s>	Определяет текст, который больше не является правильным
<samp>	Определяет выборку выходных данных из компьютерной программы
<small>	Определяет меньший текст
<strike>	Не поддерживается в HTML5. Использовать <del> or <s> Вместо. Определяет текст зачеркивания
<strong>	Определяет важный текст
<sub>	Определяет текст с подстрочным текстом
<sup>	Определяет текст с надписью
<template>	Определяет шаблон
<time>	Определяет дату и время
<tt>	Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет телетайп текст
<u>	Определяет текст, который должен быть стилистически отличается от обычного текста
<var>	Определяет переменную
<wbr>	Определяет возможный разрыв строки
Тег	Описание
<form>	Определяет HTML-форму для ввода данных пользователем
<input>	Определяет элемент управления вводом
<textarea>	Определяет многострочный элемент управления вводом (область текста)
<button>	Определяет нажатую кнопку
<select>	Определяет раскрывающийся список
<optgroup>	Определяет группу связанных параметров в раскрывающемся списке
<option>	Определяет параметр в раскрывающемся списке
<label>	Определяет метку для <input> Элемента
<fieldset>	группирует связанные элементы в форме
<legend>	Определяет заголовок для <fieldset> Элемента
<datalist>	Задает список предварительно заданных параметров для элементов управления вводом
<output>	Определяет результат вычисления
Тег	Описание
<frame>	Не поддерживается в HTML5. Определяет окно (фрейм) в фрейме
<frameset>	Не поддерживается в HTML5. Определяет набор фреймов
<noframes>	Не поддерживается в HTML5. Определяет альтернативное содержимое для пользователей, которые не поддерживают рамки
<iframe>	Определяет встроенный фрейм
Тег	Описание
<img>	Определяет изображение
<map>	Определяет изображение на стороне клиента-карты
<area>	Определяет область внутри изображения-карты
<canvas>	Используется для рисования графики, на лету, с помощью сценариев (обычно JavaScript)
<figcaption>	Определяет заголовок для <figure> Элемента
<figure>	Указывает автономное содержимое
<picture>	Определяет контейнер для нескольких ресурсов изображения
<svg>	Определяет контейнер для графики SVG
Тег	Описание
<audio>	Определяет звуковое содержимое
<source>	Определяет несколько мультимедийных ресурсов для элементов мультимедиа (<video>, <audio> И <picture>)
<track>	Определяет текстовые дорожки для элементов мультимедиа (<video> И <audio>)
<video>	Определяет видео или фильм
Тег	Описание
<a>	Определяет гиперссылку
<link>	Определяет связь между документом и внешним ресурсом (наиболее используемым для связывания с таблицами стилей)
<nav>	Определяет навигационные ссылки
Тег	Описание
<ul>	Определяет неупорядоченный список
<ol>	Определяет упорядоченный список
<li>	Определяет элемент списка
<dir>	Не поддерживается в HTML5. Использовать <ul> Вместо. Определяет список каталогов
<dl>	Определяет список описания
<dt>	Определяет термин/имя в списке описания
<dd>	Определяет описание термина/имени в списке описания
<menu>	Определяет список/меню команд
<menuitem>	Определяет команду/пункт меню, который пользователь может вызвать из всплывающего меню
Тег	Описание
<table>	Определяет таблицу
<caption>	Определяет заголовок таблицы
<th>	Определяет ячейку заголовка в таблице
<tr>	Определяет строку в таблице
<td>	Определяет ячейку в таблице
<thead>	Группирует содержимое заголовка в таблице
<tbody>	Группирует содержимое тела в таблице
<tfoot>	Группирует содержимое нижнего колонтитула в таблице
<col>	Задает свойства столбца для каждого столбца в <colgroup> Элемента
<colgroup>	Задает группу из одного или нескольких столбцов в таблице для форматирования
Тег	Описание
<style>	Определяет сведения о стиле для документа
<div>	Определяет раздел в документе
<span>	Определяет раздел в документе
<header>	Определяет заголовок документа или раздела
<footer>	Определяет нижний колонтитул для документа или раздела
<main>	Указывает основное содержимое документа
<section>	Определяет раздел в документе
<article>	Определяет статью
<aside>	Определяет содержание в стороне от содержимого страницы
<details>	Определяет дополнительные сведения, которые пользователь может просматривать или скрывать
<dialog>	Определяет диалоговое окно или окно
<summary>	Определяет видимый заголовок для <details> Элемента
<data>	Связывает данное содержимое с машинно-читаемым переводом
Тег	Описание
<head>	Определяет сведения о документе
<meta>	Определяет метаданные HTML-документа
<base>	Указывает базовый URL-адрес/цель для всех относительных URL-адресов в документе
<basefont>	Не поддерживается в HTML5. Вместо этого используйте CSS. Задает цвет, размер и шрифт по умолчанию для всего текста в документе
Тег	Описание
<script>	Определяет сценарий на стороне клиента
<noscript>	Определяет альтернативное содержимое для пользователей, которые не поддерживают сценарии на стороне клиента
<applet>	Не поддерживается в HTML5. Использовать <embed> или <object> Вместо. Определяет встроенный апплет
<embed>	Определяет контейнер для внешнего (не HTML) приложения
<object>	Определяет внедренный объект
<param>	Определяет параметр для объекта

Таблица основных тегов html с примерами

Несмотря на то, что сейчас можно создавать отличные сайты на конструкторах в визуальном режиме, использование языка HTML остаётся важным навыком разработчика. Даже если вы не пишете шаблон с нуля, может возникнуть необходимость отредактировать его или вставить виджет стороннего сервиса — через HTML-код.

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

Базовые теги

<!—…—> — тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.

<!DOCTYPE> — показывает браузеру тип документа, сообщает его версию и язык.

<html></html> — корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.

<head></head>— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, <title> или <style>.

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

<body bgcolor=?> — цвет фона документа в формате RGB.

<body text=?> — цвет текста.

<body link=?> — цвет гиперссылок.

<body vlink=?> — цвет гиперссылок, по которым уже переходили.

<body alink=?> — цвет гиперссылок при нажатии.

<title></title>— метатег, который задаёт название страницы, отображаемое на вкладке браузера.

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

Форматирование текста

<h2></h2>……<h6></h6>. — теги заголовков, от самого большого к самому маленькому.

<b></b> — жирный текст без придания важности выделенному фрагменту.

<strong></strong> — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.

<i></i> — выделение текста курсивом без придания важности.

<del></del> — зачёркивает текст, помечая его удалённым.

<s></s> — отображает перечёркнутый текст.

<ins></ins> — подчёркивает текст, визуально выделяя внесённые изменения.

<u> — подчёркивание без дополнительного акцентирования внимания.

<em></em> — расставление акцентов путём выделения фрагментов текста курсивом.

<mark></mark> — выделение частей текста жёлтым маркером.

<tt></tt> — имитация текста, набранного на печатной машинке.

<small></small> — отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.

<sub></sub> — подстрочное начертание символов.

<sup></sup> — надстрочное начертание символов.

<cite></cite> — оформление цитат.

<address> — добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.

<pre></pre> — вывод неформатированного текста с сохранением пробелов и особенностей переносов.

<p></p> — контейнер для абзаца.

<br> — переносит текст на другую строку без создания абзаца.

<blockquote> </blockquote> — отступы с обеих сторон для оформления цитаты или врезки.

<q></q> — краткое цитирование.

<dl></dl> — контейнер для размещения термина и его определения.

<dt> — добавление термина.

<dd> — добавление определения понятия

<dfn> — выделение термина курсивом. Последующий текст должен раскрывать понятие.

<abbr> — указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.

<ol></ol> — список с цифрами.

<ul></ul> — список со значками.

<li> — отметка каждого элемента перечня (цифра или значок в зависимости от типа списка).

<a></a> — добавление гиперссылки в текст. Имеет обязательный атрибут href, в котором указывается ссылка или якорь. Внутри контейнера помещается текст, при нажатии на который происходит переход на другую страницу или другое место на этой же странице.

<code></code> — выделение фрагмента кода с помощью шрифта monospace.

Встраивание элементов

<img></img> — вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:

<img src=»name» align=?> — выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.

<img src=»name» border=?> — позволяет настроить в пикселях толщину рамки вокруг изображения.

<picture></picture> — контейнер для расположения элемента <img> без <source>, который даёт браузеру возможность самостоятельно выбрать подходящую картинку.

<audio></audio> — вставка звукового контента.

<video></video> — вставка видео (поддерживается Ogg, WebM и MP4).

<source></source> — указывает местоположение файла для <video>, <audio> и <picture>

<track> — формирует субтитры для <video> и <audio>.

<hr> — размещает на странице горизонтальную линию. Имеет несколько атрибутов.

<hr size=?> — устанавливает высоту линии.

<hr width=?> — устанавливает ширину линии.

<hr noshade> — убирает тень у линии.

<hr color=?> — задаёт цвет линии.

Работа с таблицами

<table></table> — размещает таблицу. Все остальные теги для форматирования таблиц должны находиться внутри это контейнера.

<thead></thead> — определяет заголовок.

<tbody></tbody> — отмечает тело таблицы.

<td></td> — создаёт одну ячейку.

<th></th> — указывает на заголовок ячейки.

<tr> — создание одной строки.

<tfoot></tfoot> — показывает нижний колонтитул.

<caption></caption> — вставляет подпись. Указывается после тега <table>.

<col> — позволяет указать ширину и другие параметры одной или нескольких колонок.

Создание форм и кнопок

<form></form> — создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.

<button></button> — создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.

<select multiple name=»NAME» size=?></select> — формирует меню с поддержкой скроллинга.

<select name=»NAME»></select> — создаёт ниспадающее меню.

<option></option> — описывает каждый отдельный пункт меню.

<input> — формирует поля для добавления пользовательских данных.

<output> — выводит результаты вычислений, сделанных с помощью скрипта.

<label> — оформляет пометку для поля, созданного тегом <input>.

<textarea></textarea> — создаёт большие поля для ввода текста.

30 необходимых практик для написания современного и эффективного HTML5 | by Stas Bagretsov

Перевод статьи 30 Best HTML5 Practices 2018

👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

HTML5 уже существует много лет, стабилен и поддерживается практически всеми основными браузерами с 2014 года. Далее мы собираемся показать вам список лучших практик, связанных с непосредственно с его разметкой и использованием.

Этот список составлялся с расчётом на создание ясного, поддерживаемого и масштабируемого кода, который успешно использует элементы семантической разметки из HTML5 и который корректно отрендерится во всех поддерживаемых браузерах. Все SEO, CSS и обычные front-end практики JS выходят уже за пределы этой статьи.

01 — Указывайте doctype

Указание doctype должно идти первой строкой вашего HTML документа. Так рекомендуется, если вы используете HTML5 doctype:

<!DOCTYPE html>

Который на самом деле активирует стандартный режим во всех браузерах. Как альтернативу, вы можете использовать doctype, который отвечает за используемую HTML/XHTML версию.

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

Пустые элементы, то есть теги, которые не могут содержать какой-либо контент.

Самозакрывающиеся теги допустимы, но необязательны. Это такие элементы как: <br>, <hr>, <img>, <input>, <link>, <meta>,

<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>

У обычных элементов никогда не будет самозакрывающихся тегов.

03 — Опциональные теги

Некоторые теги опциональны в HTML5, так как уже предполагается наличие этих элементов. Для примера, если даже вы не поставите <html> тег в разметке, то всё равно подразумевается то, что ваша разметка вложена в <html>. Другие такие же опциональные теги это <head>, <body>. Также для некоторых элементов опциональны только закрывающиеся теги (смотрите ниже).

Обратите внимание

Опциональные закрывающиеся теги

HTML5 допускает опциональные закрывающие теги для некоторых элементов. Вам необязательно их использовать, в Google Style Guide по HTML вообще рекомендуют избегать все опциональные теги.

Однако, эта практика не сильно прижилась и вообще будучи вырванной из контекста она может ввести в заблуждение: W3C подробно рассказали при каких условиях теги становятся и прекращают быть опциональными.

04 — Атрибут lang

Одной из причин регулярного использования опциональных тегов, таких как <html>, являются атрибуты. Это считается лучшей практикой в плане интернационализации, как указывается в W3C, вам всегда надо указывать стандартный язык текста страницы в теге <html>.

05 — Принцип простоты

В целом, HTML 5 был разработан для обратной совместимости с более старыми версиями HTML и XHTML. По этой причине рекомендуется избегать использования XML или его атрибутов. Совершенно нет причин для его применения:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>

Пока вам реально не надо будет написать XHTML документ, нет смысла в его применении и использовании. Также вам не нужны и xml атрибуты, как тут:

<p lang="en" xml:lang="en">...</p>

06 — Тег <base>

Это очень полезный тег, особенно для разработки на локальных серверах. Однако, при неправильном использовании он может выдать нечто странное. По-сути, если вы впишите тег <base href="http://www.example.com/" />, то каждая ссылка на странице будет формироваться относительно неё, если она не указана полностью. Это влечет за собой смену стандартного формирования и поведения некоторых ссылок. Для примера, внутренняя ссылка href="#internal" будет интерпретирована браузером как href="http://www.example.com/#internal"

Также, ссылка на внешнюю страницу сделанная таким способом: href="example.org”, будет интерпретирована браузером как href="http://www.example.com/example.org"

В общем, безопаснее использовать абсолютные пути для ваших ссылок.

07 — Тег <title>

Никогда его не пропускайте. Кроме очевидного факта того, что заголовок вашей страницы не отрендерится в браузере, это довольно сильно негативно повлияет на доступность.

08 — Указывайте кодировку

Не забудьте <meta charset='utf-8'> (ну или ту кодировку, которую вы используете в вашем документе) — так вы убедитесь в том, что ваша страница отображается корректно.

09 — Метатег description

Это не совсем является частью лучших практик HTML, но это стоит упомянуть. <meta name="description"> атрибут это то, что краулеры и поисковые системы подтягивают первым делом при индексации вашей страницы. Если вы указали description, то он появится как описание к вашему сайту.

В HTML5 есть несколько элементов, которые помогут вам грамотно расставить и организовать элементы на вашей странице.

Советую почитать на эту тему статью — Секреты использования семантической верстки в HTML5

10 — Элементы <header> и <footer>

На изображении выше простой шаблон, мы видим <header> сверху страницы и <footer> в самом низу. Это то, как выглядит типичная страница, которую вы привыкли видеть, с логотипом вверху страницы и подвалом с несколькими ссылками, а также копирайтами в самом низу. Пользователи WordPress возможно привыкли называть их “masthead” и “colophon”, соответственно.

Однако, HTML5 даёт семантическое значение элементам шапки и подвала. Тег <header> можно использовать в любой секции(<section>) или статье(<article>), для добавления заголовков, публикации даты или другого вводного контента статьи или секции. Также, футер может включать в себя информацию об авторе каждой статьи на странице, ссылки на связанный контент и т.п.

11 — Элемент <nav>

<nav> должен использоваться для навигации по всему сайту. Совершенно нет нужды в указании role, как тут:

<nav role="navigation"></nav>

Роль элемента уже подразумевается в самом теге:

<nav></nav>

12 — Элемент <main>

Этот элемент был включен в HTML5 и выше, для указания места где находится основной контент страницы, то есть контент, который напрямую относится к главной теме документа. В общем, больше не надо использовать <div>:

<div></div>

Если у нас уже есть куда более точный тег для указания основного контента страницы:

<main></main>

13 — <article>, <section> или <div>?

Мы используем <article> для указания отдельно взятого контента, которому не нужно указывать дополнительный контекст.

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

И наконец, мы используем <div> как крайнее средство, в те моменты, когда уже совсем нет подходящих тегов для разметки.

14 — <section> это семантический тег, а не стилистический

Раскрывая тему того, о чем мы говорили в теме выше об элементе <section>, важно подчеркнуть то, что <section> это семантический тег. По сути, в нём должен быть тег заголовка и даже если он там не нужен, то его использование имело бы смысл.

Он не должен использоваться как тег, в который обертывают контент, как контейнер или любой другой исключительно стилистический блок.

Для примера, вот некорректное использование тега <section>:

<section>
<section>
<div>
</div>
</section>
</section>

Вот уже получше, но тут видно сильное злоупотребление тегом <div>:

<div>
<div>
<div>
</div>
</div>
</div>

И вот уже получше:

<body>
<div>
<main>
</main>
</div>
</body>

15 — Элемент <figure>

Этот элемент в основном используется с изображениями, однако у него есть куда более обширный спектр применения. Всё, что связано с темой документа, но оно по каким-то причинам должно быть расположено где-то непонятно где в документе, может быть обернуто в <figure>.

Представьте иллюстрации, таблицы или диаграммы в книге.

Отличительная черта <figure> в том, что он не влияет на структуру документа. Так что его можно использовать для группировки элементов по общим темам, таким как группа изображений с общим <figcaption> или даже частью кода.

16 — Группировка элементов с помощью <figure> по общему <figcaption>

Тег <figcaption> должен располагаться либо сразу после открытия тега <figure>, либо сразу после закрытия тега </figure>.

<figure>
<img src="img1.jpg" alt="First image">
<img src="img2.jpg" alt="Second image">
<img src="img3.jpg" alt="Third image">
<img src="img4.jpg" alt="Fourth image">
<figcaption>Four images related to a topic </figcaption>
</figure>

17 — Стилизующие теги устарели в HTML5 — используйте CSS

Не используйте <big>, <center>, <strike> — они просто устарели и даже не смейте использовать <blink>, хоть он сам по себе и не устаревший.

Не используйте <hgroup>, он уже давно вышел из употребления.

Не используйте <i> для курсива, <b> для жирного текста или <em> для подчеркивания: назначение для этих тегов было переосмыслено в HTML5.

И вообще, было бы оптимальным решением для каждого, избегать стилистических элементов в HTML разметке, для этого вообще-то есть CSS.

18 — <br> элемент не для разметки

Не используйте <br> для форматирования документа или для добавления пробелов между элементами. В письмах да, можно.

Суть тут в том, что если это может быть отформатировано с помощью margin или padding в CSS, то вам нет смысла использовать <br>. Однако, если вы хотите добавить перенос строки внутри одного и того же элемента, то <br> будет вполне подходящим решением:

<label>Please use the following text area:<br>
<textarea name="loremipsum"></textarea>
</label>

19 — Указание типа не очень важно для таблиц стилей и JavaScript файлов

В HTML5 нет нужды в указании типа для <style> и <script>. Все современные браузеры ожидают того, что в таблицы стилей будут в CSS, а скрипты в JavaScript. Вообще всё ещё много кто так делает, так как много популярных CMS добавляют эти атрибуты автоматически, но по сути нет причины этого делать вручную. В общем сделайте так:

<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>

А не вот так:

<link type="text/css" rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/scripts.js"></script>

20 — Используйте атрибут alt для ваших изображений

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

21 — Будьте аккуратны при использовании атрибута title

Атрибут title не замена атрибуту alt. alt используется вместо изображения, в то время, как title показывается вместе с изображением, обычно как всплывающая подсказка.

В спецификации HTML5.1 предостерегают от чрезмерного использования атрибута title, из-за недостаточной поддержки браузерами, такими как touch-only в телефонах и планшетах.

Вот подходящий пример использования атрибута title:

<input type="text" title="search">
<input type="submit" value="search">

Следующего использования нужно бы избегать:

<a href="text.txt" title="Relevant document">txt</a>
<img src="img.jpg" title="My photo" />

Вместо этого, попробуйте должным образом дать название ссылке и использовать атрибут alt для вашего изображения:

<a href="text.txt">Relevant document</a>
<img src="img.jpg" alt="My photo" />

Всё упомянутое в этой категории сугубо субъективно. Каждый front-end разработчик имеет свой подход и это хорошо, хорошо до тех пор пока подход последовательный и осмысленный. В основном, если ваш код ясный и читабельный для других разработчиков, то этого вполне достаточно.

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

22 — Последовательность отступов

Код с полным отсутствием отступов или наличием непоследовательных отступов можно считать нечитабельным. На заметку — Google Style Guide для HTML рекомендует использование двух пробелов для отступов и не использовать табуляцию.

Если бы это был общепринятый формат, то каждый бы форматировал свой HTML код последовательно. Однако, каждый разработчик делает что-то по своему, так что по крайней мере мы должны попытаться что-то делать по общим стандартам: если вы решили использовать 4 пробела или два таба для отступа(пожалуйста, никогда не используйте два таба), сделайте это на каждой строчке вашего HTML кода, хотя бы для понимания другими.

23 — нижний регистр, Заглавный Регистр, ГорбатыйРегистр и КАПС

ГорбатыйРегистр используется в JavaScript и это визуально понятное форматирование в JS. По-этому, лучше всего не использовать его в отрезках кода, которые не в JS.

Заглавный Регистр — только для текста, строк, контента. Хоть это и не является технически неправильным — называть классы или ID заглавным регистром, это всё равно сильно влияет на читабельность.

КАПС — снова, технически всё верно, кроме того, что так принято описывать крик и вообще это визуально неприятно.

нижний регистр — наиболее используемый подход.

24 — Кавычки

Двойные или одинарные? На каждый вариант есть куча аргументов, однако это всё на ваше усмотрение. Делайте как хотите, главное, чтобы всё было последовательно и взаимосвязано.

Хотя одно замечание: HTML допускает одинарные кавычки и это очень удобно при генерации HTML из PHP. Однако, если HTML написан вручную, то это реально вопрос предпочтений. Главное, чтобы вы были последовательны(!)

25 — <pre> и <code>

Обычная практика — использовать элемент <code> с тегом <pre>. <code> сам по себе просто определяет компьютерный код и ничего не делает для сохранения его форматирования, в то время как <pre> (предварительно отформатированный текст), сохранит все переходы строк и отступы.

Помните одну вещь — элемент <pre> сохранит каждый переход на новую строку.

<pre><code>
.container {
margin: 0 auto;
}
</code></pre>

Так что этот код отформатируется с пустой строки. Используйте элементы <pre>, как тут:

<pre>&lt;nav&gt;
</pre>

26 — Мнемоники

Используйте мнемоники с <pre> при отображении HTML кода.

Вам нужно использовать < и > вместо < и >, и " вместо “.

За пределами предварительно отформатированных текстовых блоков, UTF-8 кодировка допускает почти все символы (включая ©, ® и даже смайлики). Однако, обычным делом является избегать &, <, >, “ и ‘ даже за пределами предварительно отформатированных блоков.

27 — Тире или подчеркивание для класса и ID?

Никогда не используйте пробелы в именах классов или ID.

Больше ограничений нет, так что тире или нижнее подчеркивание — это уже на ваш выбор. Тут стоит подметить то, что это предпочтение может зависеть от выбранного редактора. В Notepad++ слово с тире воспринимается как одно слово. В Vim, тире разделяет слово, а нижнее подчеркивание нет. В общем, когда будете принимать решение о том, как именовать классы, ID и тп, учитывайте нюансы своего любимого текстового редактора.

28 — Комментарии

Комментарии могут напрямую влиять на читабельность кода, конечно же в позитивном ключе, когда они используются правильно. У меня есть привычка комментировать закрывающие теги (особенно закрывающий <div>), указывая класс открывающего тега — это значительно упрощает понимание того, какой блок закрылся среди сложенных тегов. Пример:

<div>
<div>
...
</div><!-- .nextclass" -->
</div><!-- .myclass -->

29 — Валидация

W3C валидатор устанавливает стандарты индустрии, так что это должно быть первым местом куда вы пойдете проверять валидность вашего кода.

W3C Validator

Вы также можете получить исходный код их Nu валидатора.

30 — Минифицирование и комбинирование CSS и JS файлов

У современного сайта обычно больше одного CSS файла. Главные стили, bootstrap или любые другие стили сеток, может быть ещё несколько стилей для плагинов, тем, ну и т.п. Каждый CSS файл делает отдельный HTTP запрос, тормозя загрузку вашего сайта.

Это рекомендуемая практика, в финальном продукте минифицировать и комбинировать все ваши CSS’ки для улучшения времени загрузки. Также вполне обычной является практика хранения неминифицированных файлов, к примеру в папке “css/src”, потому что редактирование и дебагинг минифицированных файлов — ну очень сложное занятие.

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

Заключение

Я надеюсь на то что вам понравились наши советы по написанию HTML5 и лучшим практикам по front-end разработке.

Источники:

hail2u recommendations

w3.org

Dive into HTML5 from html5doctor

html5doctor

Google’s style guide

Various questions on Stack Overflow

Теги — HTML5 CSS3

Атрибут style позволяет указать правила CSS в пределах элемента. Например:

Атрибут style мы также изучим более детально в разделе о CSS.

Существует три атрибута интернационализации, которые доступны для большинства (хотя и не для всех) элементов XHTML. Вот они:

Атрибут dir позволяет указать браузеру, в каком направлении должен размещаться текст. Этот атрибут может принимать одно из двух значений, которые Вы можете видеть в таблице ниже:

Вот пример, где текст читается справа налево:

<html dir=rtl>
<head>
<title>Направления текста</title>
</head>
<body>
Этот текст читается справа на лево.
</body>
</html>

Атрибут lang позволяет указать основной язык, используемый в документе, но этот атрибут хранится в HTML только для обратной совместимости с предыдущими версиями HTML. Этот атрибут был заменен атрибутом xml:lang в новых документах XHTML.

Когда атрибут lang включен в тег <html>, он задает язык, который используются в документе. При использовании внутри других тегов, атрибут lang указывает язык, используемый в пределах этого тега. В идеале, браузер будет использовать lang чтобы лучше представить текст для пользователя. Например, страница, на которой используется английский язык:

<html lang=en>
<head>
<title>English Language Page</title>
</head>
<body> This page is using English Language
</body>
</html>

Атрибут xml:lang заменяет атрибут lang в XHTML. Значение атрибута xml:lang должно быть использованным в соответствии со стандартом ISO-639, в котором показан список код стран и языков.

Ниже представлена таблица атрибутов, которые могут свободно использоваться со многими HTML-тегами:

Если Вы хотите, чтобы люди читали то, что Вы написали, то надо уделить время для форматирования текста. Люди не любят читать широкие и длинные абзацы текста на страницах сайтов, если они не разбиты на более мелкие. В этой статье вы узнаете основные HTML-теги форматирования текста.

Пробелы и пустые строки

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

Если Вы считаете, что если сделаете несколько последовательных пробелов между двух слов и эти пробелы появятся этими словами на экране браузера, то это не так. По умолчанию будет отображаться только один пробел. Поэтому необходимо использовать специальные HTML-теги для создания нескольких пробелов.

Аналогичным образом, если Вы начинаете новую строку в исходном документе или у вас есть последовательность пустых строк, они будут просто проигнорированы браузером и будут рассматриваются как один большой пробел пробел. Для этого тоже существуют специальные HTML-теги для создания нескольких пустых строк.

Создание заголовков (h2 — h6)

Любая страница начинается с заголовка. С помощью тегов форматирования мы можем использовать разные размеры заголовков. HTML имеет шесть уровней заголовков, которые представлены тегами: <h2>, <h3>, <h4>, <h5>, <h5>, и <h6>. При отображении любого заголовка, браузер добавляет одну пустую строку до и после заголовка.

Примеры заголовков:

<h2>заголовок 1</h2>

<h3>заголовок 2</h3>

<h4>заголовок 3</h4>

<h5>заголовок 4</h5>

<h5>заголовок 5</h5>

<h6>заголовок 6</h6>

Браузер покажет это так:

Это заголовок 1

Это заголовок 2

Это заголовок 3

Это заголовок 4

Это заголовок 5

Это заголовок 6

Тег <p>, параграф

Тег <p> помогает структурировать свой текст. В HTML, параграф — это абзац. Каждый абзац текста должен быть размещен между тегами <p> и </p>, как показано ниже в примере:

<p>Первый абзац текста.</p>

<p>Второй абзац текста.</p>

<p>Третий абзац текста.</p>

В браузере Вы увидите следующее:

Первый абзац текста.

Второй абзац текста.

Третий абзац текста.

Вы можете использовать атрибут выравнивания абзацев align:

<p align="left">Выравнивание по левому краю.</p>

<p align="center">Это выравнивание по центру.</p>

<p align="right">По правому краю.</p>

<p align="justify">Это работает, когда у вас есть несколько строк в абзаце.</p>

В браузере будет следующий результат:

Выравнивание по левому краю.

Это выравнивание по центру.

По правой стороне.

Это работает, когда у вас есть несколько строк в абзаце.

Тег <br />, перевод строки

Всякий раз, когда вы используете тег <br />, после него текст начинается на следующей строке. Этот тег является примером пустого элемента, который не имеет закрывающий тег, поскольку он не несет никакой информации, а только сообщает браузеру о переводе строк.

Примечание: тег <br /> содержит пробел между символами «br» и «/». Если вы пропустите этот пробел, то старые браузеры будут иметь проблемы с подготовкой обрыва строки.

Вот пример использования тега <br />:

Здравствуйте<br />Вы читаете мою статью.<br />Спасибо.<br />С уважением админ сайта.

В браузере Вы увидите такое:

Здравствуйте

Вы читаете мою статью.

Спасибо.

С уважением админ сайта.

Тег <center>, выравнивание текста по центру,

Вы можете использовать тег <center>, чтобы выровнять любой текст по центру страницы или в любой ячейке таблицы:

<p>Это не по центру.</p>

<center>

<p>Это по центру.</p>

</center>

Вид в браузере такой:

Это по центру.

Это не по центру.

Элемент ( ), неразрывный пробел

Предположим, вы решили использовать фразу «только на сайте wmz-mail.at.ua«. И Вы не хотите, чтобы браузер разбил ее на две строки эту фразу:

Я изучаю язык разметки HTML «только на сайте wmz-mail.at.ua»

Итак, в тех случаях, когда Вы не хотите, чтобы браузер перервал текст, нужно использовать неразрывный пробел ( ) вместо обычного пробела. Для этого нужно использовать следующий код:

<p>Я изучаю язык разметки HTML "только&nbsp;на&nbsp;сайте&nbsp;wmz-mail.at.ua"</p>

Элемент (), мягкий перенос

Бывают такие случаи, когда Вы хотите чтобы браузер переносил длинные слова для того, чтоб сделать абзац более визуально эстетичным. Давайте рассмотрим пример. Имеем следующий код:

<p>HTML - это не язык программирования, а язык разметки гипертекста.</p>

Давайте сделаем перенос слов «программирования» и «гипертекста». Для этого мы должны проставить элемент () в нужном для нас месте слова. Теперь код абзаца будет таким:

<p>HTML - это не язык программи&shy;рования, а язык разметки гипер&shy;текста.</p>

Теперь абзац будет иметь следующий вид:

HTML - это не язык программи-рования, а язык разметки гипер-текста.

Тег <pre>, исходное форматирование текста

Для того чтобы сохранить исходное форматирование текста нужно использовать тег <pre>. Рассмотрим пример:

<pre>HTML - это язык разметки гипертекста. Изучайте его и делайте Ваш сайт лучше.</pre>

Что же мы увидим в итоге? Текст, который находится в средине тегов <pre> и </pre> будет отображен так называемым "моноширинным" шрифтом, который является основным и общепринятым шрифтом в html-документах. Таким образом наше предложение будет иметь такой вид:

HTML - это язык разметки гипертекста. Изучайте его и делайте Ваш сайт лучше.

Тег <hr />, горизонтальная линия

Горизонтальные линии используются для того, чтобы визуально разбить разделы текста на веб-странице. Данный тег создает горизонтальную линию от левого до правого края страницы в пределах контента. Например, имеем следующий код:

<p>Это первый абзац с текстом</p><hr /><p>Это второй абзац с текстом</p>

Результат будет таким:

Это первый абзац с текстом

Это второй абзац с текстом

Если вы используете текстовый редактор, то Вы знакомы с возможностью сделать текстполужирным, курсивным или подчеркнутым. Давайте же узнаем, каким образом это можно сделать в HTML. Для этого существуют так называемые «презентационные теги». Сейчас мы рассмотрим всепрезентационные теги и на примерах увидим их функции.

Тег <b>, полужирный шрифт

Весь текст, который будет размещаться между тегами <b> и </b> будет отображаться жирным шрифтом, пример кода:

<p>это обычный шрифт <b>это жирный шрифт</b></p>