HTML5

HTML5HTML5 (сокр. англ. "HyperText MarkUp Language" – "язык разметки гипертекста") – 5-я версия языка гипертекстовой разметки, рекомендованная к использованию с 2014 года. В обновлённом стандарте появилось множество нововведений, которые значительно расширили семантическую и функциональную составляющую языка.

Так HTML5 даёт возможность разработчику создать структурированную разметку сайта, которая будет "понятна" большинству современных поисковых систем. А в сочетании с новым стандартом каскадных таблиц стилей (CSS3) позволяет реализовать довольно сложные элементы навигации, слайд-шоу, и анимацию на веб-страничках без использования скриптов на JavaScript.

Максимально в сжатой и наглядной форме об HTML5 написано в бесплатной книге, которую можно скачать на этой странице.

Полная шпаргалка по HTML5. Мэт Бэннер

HTML5 Полная шпаргалка по HTML5. Мэт Бэннер
Размер:
2.5 МБ
Язык:Английский/Русский
Формат:
Обновлено:2017-05-13
Автор:





Полная шпаргалка по HTML5. Мэт Бэннер

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

Если взглянуть на недавнюю историю веб-разработки, то можно с уверенностью сказать, что её нынешний виток берёт начало с конца 2013 – начала 2014 годов, когда была официально принята новая спецификация языка гипертекстовой разметки HTML5.

Основным новшеством стандарта стала семантизация блоков информации на веб-страничках, которая окончательно ознаменовала собой отход от устаревшей табличной вёрстки. Современная блочная вёрстка с использованием HTML5 предусматривает использование специальных блоков, которые отвечают за размещение в них тех или иных фрагментов веб-страницы: шапки (<header>), меню (<nav>), статьи (<article>), любой значимой секции (<section>), подвала (<footer>) и т.п.

Кроме семантизации большой вклад HTML5 внёс в развитие поддержки мультимедиа. Появилась возможность штатно воспроизводить видео (<video>), звуковые файлы (<audio>) и даже создавать интерактивные области для исполнения скриптов (<canvas>). Фактически эти новые теги практически везде заменили собой устаревший тег <object>, который использовался для вставки различных флеш-плееров.

Небольшая книга Мэта Бэннера, которая представлена ниже в виде перевода и, которую Вы можете скачать в оригинале, старается в полной мере осветить все новшества HTML5 с краткими пояснениями. Она безусловно будет полезна всем, кто уже знает язык гипертекстовой разметки, но хотел бы обобщить свои знания о новом стандарте.

Полная шпаргалка по HTML5. Мэт Бэннер


Формы

Формы
<form>...</form> Теги, использующиеся для создания форм. Дополняются атрибутами, от которых зависит итоговый внешний вид формы.
method="" Атрибут указывающий HTTP-метод, который определяет как будут отправлены данные из формы (прим. от переводчика "GET" или "POST").
autocomplete Атрибут включающий/выключающий автозаполенение формы.
accept-charsets Задаёт допустимые кодировки текста при отправке формы.
<fieldset>...</fieldset> Задаёт допустимые кодировки текста при отправке формы.
<legend>...</legend> Заголовок элемента fieldset.
action="url" Задаёт путь для передачи данных из формы.
enctype="" Указывает способ шифрования данных для передачи их на сервер. Используется только с методом POST
novalidate Отключает валидацию формы перед отправкой.
target Указывает, где должен отобразиться ответ после отправки формы. Допустимые значения: _blank, _self, _parent, _top.
<label>...</label> Надпись, позволяющая пользователю понять, что нужно вводить в то или иное поле.
<input /> Создаёт поле определённого типа для ввода данных пользователем.

HTML форма

Ссылки

Гиперссылки
<a href="">...</a> Создаёт обычную гиперссылку с заданным анкорным текстом.
<a href="tel://###">...</a> Ссылка с кликабельным номером телефона. Отлично подходит для мобильных пользователей.
<a href="#name">...</a> Якорная ссылка, ведущая пользователя к определённому блоку с укакзанным идентификатором на странице.
<a href="mailto:">...</a> Ссылка, создающая электронное письмо на заданный EMail-адрес.
<a name="">...</a> Ссылка, указывающая на уникальное место в документе (прим. от переводчика: вместо "name" в HTML5 правильнее использовать "id").

Код ссылки и оформленная кнопка

Поля ввода

Атрибуты полей ввода
type="" Определяет тип поля ввода, типа, текст, пароль, время/дата, чекбокс и т.п.
value="" Значение поля ввода.
maxlength="" Максимальное количество символов допустимое для ввода.
step="" Числовые интервалы для ввода в поле.
height="" Высота в пикселях для элемента <input>.
pattern="" Проверяет введённые данные на соответствие определённому значению для обеспечения корректности ввода.
max="" Максимальное значение для элемента <input>.
disabled Отключает возможность ввода для элемента <input> в форме.
<select>...</select> Создаёт выпадающий список для выбора нужной опции.
name="" Имя формы.
size="" Ширина поля ввода в символах.
required Атрибут элемента <input>, проверяющий заполнено ли поле перед отправкой формы.
width="" Ширина поля ввода в пикселях.
placeholder="" Подсказка для пользователя, отображающая пример значения поля <input>.
min="" Минимальное значение для элемента <input>.
autofocus Определяет фокус на элементе после загрузки страницы.
<textarea>...</textarea> Определяет большое поле для ввода текста длинных сообщений.

Поля ввода форм

Базовые теги

Стандартная структура документа
<html>...</html> Эти теги используются только в начале и в конце HTML-документа. Он также известен как "корневой элемент". Использование этих тегов сообщают, что веб-страничка написана на HTML5 и все остальные теги внутри них являются отформатированным при помощи HTML текстом.
<head>...</head> Используется для группирования специфической информации о странице. Сюда включаются теги заголовка, МЕТА-описания, а также ссылки на скрипты и таблицы стилей.
<title>...</title> Используется для создания тега заголовка страницы. Внутрь тега помещается заголовок, который используется как поисковыми системами, так и пользователями.
<body>...</body> Между этими тегами помещается весь контент страницы, предназначенный для пользователей. Сюда относится текст, изображения и графические элементы.
Пример кода типичной веб-страницы:

<html>

<head>

<title>Шпаргалка по HTML 5</title>

</head>

<body> Ваш контент </body>

</html>

<base /> Задаёт базовый URL и определяет основу для всех относительных ссылок в документе.
<meta /> Включает дополнительную информацию о странице. Сюда относятся описания, указание автора, даты публикации, ключевых слов и другие невидимые пользователю данные.
<link /> Создаёт ассоциации с внешними документами, например, таблицами стилей.
<style>...</style> Используется для включения в документ информации о стилях оформления страницы, которые обычно написаны на CSS.
<script>...</script> Включает скрипты или ссылки на них.

Пример внешнего вида кода HTML-страницы:

<html>

<head>

<meta charset="utf-8" />

<base href="http://www.mywebsite.com" target="_blank" />

<title>Мой веб-сайт</title>

<link rel="stylesheet" href="/css/master.css" />

<script type="text/javascript">

Var MyVar = 0;

</script>

</head>

<body>

Ваш контент

</body>

</html>

Холст

HTML-элемент <canvas> используется для рисования графики "на лету" посредством скриптинга (чаще всего на JavaScript).

Элемент <CANVAS>
Атрибуты
width="" Ширина холста (по умолчанию 300 пикселей).
height="" Высота холста (по умолчанию 150 пикселей).
Методы
string Опциональная строка, содержащая любые аргументы, передающиеся DataURL.
object getContext(строка contextID).
2D-контекст
Атрибуты
canvas Объект холста (только для чтения).
methods Сохранение (save()) и восстановление (restore()).
Рисование изображений
Методы
drawImage(Object image, float dx, float dy [optional] float dw, float dh); Значением может быть объект типа изображение, число с плавающей запятой (координаты точки x и y) и (опционально) числа с плавающей запятой для обозначения ширины и высоты.
Стиль линий
Атрибуты
linewidth="" Число с плавающей запятой, обозначающее толщину линии (по умолчанию: 1.0).
linecap="" Строка, указывающая тип края линии. Доступны значения "butt" (обычный прямоугольный край), "round" (заокругленный край), "square" (квадратный край (в отличие от "butt" по краям добавляются квадраты, увеличивающие общую длину линии) (по умолчанию: "butt").
lineJoin="" Строка, указывающая тип соединения линий. Доступны значения "round" (заокругленный угол), "bevel" (обрезанный угол), "miter" (острый угол) (по умолчанию: "miter").
MiterLimit="" Число с плавающей запятой, задающее ограничение на добавление соединению линий заострения угла (по умолчанию: 10).
Трансформация
Методы
scale(float x, float y) Числа с плавающей запятой, обозначают величину увеличения по ширине и высоте (прим. от переводчика).
rotate(float angle) Число с плавающей запятой, обозначающее угол вращения в радианах (прим. от переводчика).
translate(float x, float y) Числа с плавающей запятой, задают координаты точки отсчёта для текущего контекста рисования (прим. от переводчика).
transform(float m11, float m12, float m21, float m22, float dx, float dy) Числа с плавающей запятой, образуют три пары и задают: координаты нового вектора Ox, координаты нового вектора Oy, координаты новой точки отсчёта координат.
setTransform (float m11, float m12, float m21, float m22, float dx, float dy) Числа с плавающей запятой, означают те же параметры, что и в transform. Данная функция предназначена для сброса и переназначения ранее применённой трансформации (прим. переводчика).
Композитинг
Атрибуты
globalalpha="" Число с плавающей запятой, обозначающее прозрачность объекта от 0 до 1 (по умолчанию: 1.0).
globalCompositeOperation="" Строка, указывающая тип поведения перекрывающих друг друга изображений. Доступны значения:
  • "source-over" (новое изображение поверх более раннего);
  • "source-in" (отображается только часть изображения, где есть наложение. При этом отображается часть верхней фигуры);
  • "source-out" (отображается часть верхнего изображения без области пересечения);
  • "source-atop" (отображается всё старое изображение и часть нового, которая накладывается на него);
  • "destination-over" (новое изображение рисуется под более ранними);
  • "destination-in" (отображается только часть изображения, где есть наложение. При этом отображается часть нижней фигуры);
  • "destination-out" (отображается часть нижнего изображения без области пересечения);
  • "destination-atop" (отображается новая фигура и часть пересекающейся с ней нижней поверх неё);
  • "lighter" (отображаются все фигуры, но цвет в месте пересечения изменяется по принципу сложения);
  • "darker" (отображаются все фигуры, но цвет в месте пересечения изменяется по принципу вычитания);
  • "copy" (отображаются только самая верхняя фигура);
  • "xor" (отображаются все фигуры, но в месте пересечения появляется прозрачная область);
(по умолчанию: "source-over").
Цвета, стили и тени
Атрибуты
strokeStyle="" Любой стиль (RGB, RGBa, название) указания цвета линий обводки (по умолчанию: black).
fillStyle="" Любой стиль (RGB, RGBa, название) указания цвета заливки (по умолчанию: black).
shadowOffsetX="" Число с плавающей запятой, задающее смещение тени по горизонтали (по умолчанию: 0.0).
shadowOffsetY="" Число с плавающей запятой, задающее смещение тени по вертикали (по умолчанию: 0.0).
shadowBlur="" Число с плавающей запятой, задающее степень размытия тени (по умолчанию: 0.0).
shadowColor="" Любой стиль (RGBa или название) указания цвета тени (по умолчанию: transparent black).
Методы
createLinearGradient(float x0, float y0, float x1, float y1) Числа с плавающей запятой, задают координаты начальной и конечной точки линейного градиента.
createRadialGradient(float x0, float y0, float r0, float x1, float y1, float r1) Числа с плавающей запятой, задают координаты начальной и конечной точки радиального градиента, а также радиус окружностей.
createpattern(object image, string repetition) Создаёт заливку заданным изображением с одним из вариантов повторения: repeat (по всей плоскости), repeat-x (повторение только по горизонтали), repeat-y (повторение только по вертикали), no-repeat (без повторения).
Текст
Атрибуты
font="" Шрифт (по умолчанию: 10px sans-serif).
textAlign="" Горизонтальное выравнивание текста: start (по начальной точке), end (по конечной точке), left (по левому краю), right (по правому краю), center (по центру) (по умолчанию: start).
textBaseline="" Вертикальное выравнивание текста: top (по верхнему краю), hanging (над центральной линией для символов Юникода), middle (по середине), alphabetic (над центральной линией), ideographic (под центральной линией для символов Юникода), bottom (по нижнему краю) (по умолчанию: alphabetic).
Методы
fillText(string text, float x, float y, (опционально) float maxwidth) Строка задаёт нужный текст, числа с плавающей запятой, задают координаты начальной точки надписи и (опционально) максимальную её ширину.
measureText(string text) Возвращает объект TextMetrics, содержащий ширину текста в пикселах когда он будет нарисован (прим. переводчика).
Интерфейс TextMetrics
width Ширина TextMetrics, зависящая от контекста.
Прямоугольники
Методы
clearRect(float x, float y, float w, float h) Числа с плавающей запятой, обозначают координаты начальной точки, а также ширину и высоту прямоугольника, который нужно очистить.
fillRect(float x, float y, float w, float h) Числа с плавающей запятой, обозначают координаты начальной точки, а также ширину и высоту прямоугольника, который нужно залить цветом.
strokeRect(float x, float y, float w, float h) Числа с плавающей запятой, обозначают координаты начальной точки, а также ширину и высоту прямоугольника, который нужно обвести.
Пути
beginPath(); Объявляет начало пути.
closePath(); Объявляет конец пути.
fill(); Объявляет заливку фигур, определённую свойством fillStyle (может использоваться в качестве closePath, поскольку закрывает все контуры) (здесь и далее прим. переводчика).
stroke(); Делает видимыми контуры нарисованных фигур.
clip(); Обрезает всё, что не относится к заданной фигуре.
moveTo(float x, float y) Числа с плавающей запятой, задают координаты начальной точки для рисования.
lineTo(float x, float y) Числа с плавающей запятой, задают координаты точки, к которой нужно провести линию из текущей позиции.
quadraticCurveTo(float cpx, float cpy, float x, float y) Числа с плавающей запятой, задают координаты контрольной точки, к которой будет изгибаться кривая, и конечной точки плавной кривой Безье.
bezierCurveTo(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y) Числа с плавающей запятой, задают координаты двух контрольных точек, к которым будет изгибаться кривая, и конечной точки кривой Безье.
arcTo(float x1, float y1, float x2, float y2, float radius) Числа с плавающей запятой, задают координаты крайней точки схождения линий и конечной точки дуги, а также радиус её скругления.
arc(float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise) Числа с плавающей запятой, задают координаты центра круга, его радиус, начальный и конечный угол рисования, а также (опционально) направление рисования против часовой стрелки.
rect(float x, float y, float w, float h) Числа с плавающей запятой, обозначают координаты начальной точки, а также ширину и высоту прямоугольника, который нужно нарисовать.
isPointInPath(float x, float y) Числа с плавающей запятой, обозначают координаты проверяемой на принадлежность к пути точки.
Манипуляции с пикселями
createImageData(float sw, float sh / ImageData imagedata); Создаёт объект ImageData заданной ширины и высоты или идентичный ранее созданному объекту с именем "imagedata".
getImageData(float sx, float sy, float sw, float sh); Возвращает массив с данными о цвете заданных точек холста. При этом, если используются только координаты, массив будет одномерным (4 элемента, соответствующие цвету в формате RGBa). Если же ширина и высота захватываемой области больше 1, то массив будет представлять собой матрицу с данными о каждой точке в выбранной области.
putImageData(ImageData imagedata, float dx, float dy, [опционально] float dirtyX, float dirtyY, float dirtyWidth, float dirtyHeight); Помещает на холст объект ImageData в заданных координатах (левый верхний угол). Опционально указываются координаты левого верхнего угла относительно изображения в imageData, от которого будут рассчитываться размеры изображения и размеры вставляемого изображения.
Интерфейс ImageData
Width Ширина объекта (по умолчанию только для чтения)
Height Высота объекта (по умолчанию только для чтения)
Data CanvasPixelArray – массив всех пикселей изображения (по умолчанию только для чтения)
Интерфейс CanvasPixelArray
Length Неопределённая длина массива пикселей (по умолчанию только для чтения)

Символы

  • &#34; &quot; – кавычки: "
  • &#60; &lt; – меньше: <
  • &#160; &nbsp; – неразрывный пробел
  • &#64; – собачка: @
  • &#8482; &trade; – торговая марка: ™
  • &#38; &amp; – амперсанд: &
  • &#62; &gt; – больше: >
  • &#169; &copy; – копирайт: ©
  • &#149; &bull; – маркер-точка: •

Неподдерживаемые теги HTML5

Общие теги

Форматирование текста
<strong>...</strong> Создаёт сильный акцент на чём-либо (в браузере отображается жирным шрифтом).
<b>...</b> Тоже создаёт акцент с жирным выделением текста, но менее эффективен чем предыдущий.
<em>...</em> Тег акцентирования, который отображает текст в браузере в виде курсива.
<i>...</i> Альтернативный способ создать курсивный текст, который в основном используется для выделения реплик или имён.
<cite>...</cite> Служит для выделения связанной информации курсивом. Хорошо подходит для цитат и определений.
<pre>...</pre> Выдаёт моноширинный текст с фиксированными пробелами между символами.
<del>...</del> Служит для вывода дополнительной информации. Отображается зачёркнутым.
<ins>...</ins> Изначально используется для отображения текста, добавленного в контент. Отображается подчёркнутым.
<blockquote>...</blockquote> Обычно используется для вставки больших цитат.
<q>...</q> Сокращённый вариант вставки тега цитирования.
<br /> Создаёт разрыв строки для вывода фрагментов текста в несколько рядов.
<hr /> Создаёт горизонтальную линию-разделитель. Используется для визуального отделения новой мысли или секции на странице.
<sub>...</sub> Подстрочный текст, который вполовину меньше основного и размещается на пол-строки ниже.
<sup>...</sup> Надстрочный текст, который вполовину меньше основного и размещается на пол-строки выше.

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

Списки

<ol>...</ol> Создаёт последовательно нумерованный список.
<ul>...</ul> Создаёт неупорядоченный маркированный список (по умолчанию, маркер – точка).
<li>...</li> Определяет каждый элемент нумерованного или маркированного списка.
<dl>...</dl> Создаёт список с определениями.
<dt>...</dt> Создаёт термин, который никак не выделяется по умолчанию.
<dd>...</dd> Выдаёт определение для созданного термина.

Списки

Структура документа

<h1 - h6>...</h1 - h6> Создаёт один из шести уровней заголовка на странице. Первый – самый основной и крупный, а шестой – самый мелкий.
<div>...</div> Универсальный блочный контейнер, использующийся для размещения секций страницы или вставки любых элементов оформления.
<span>...</span> Строчный контейнер для изменения стиля определённого текста в строке.
<p>...</p> Используется для организации текста в параграф.

Структура документа

Обработчики

  • onscroll – активируется при использовании прокрутки;
  • onseekend – срабатывает при перемотке видео или аудио в новую позицию;
  • onseeking; – срабатывает во время перемотки видео или аудио в новую позицию;
  • onstalled – срабатывает при возникновении ошибки в работе медиафайла;
  • onstorage – при загрузке документа;
  • onsuspend – при блокировке медиафайла браузером;
  • ontimeupdate – при изменении позиции проигрывания;
  • onvolumechange – при изменении уровня громкости;
  • onwaiting – при постановке проигрывания на паузу;
  • onbeforeonload – перед событием загрузки;
  • oncanplay; – при готовности медиафайла к воспроизведению;
  • oncanplaythrough – при полной загрузке медиафайла;
  • oncontextmenu – при вызове контекстного меню;
  • ondrag – при захвате и перетаскивании элемента;
  • ondragend – при отпускании захваченного элемента;
  • ondragenter – при перетаскивания элемента в область drag-n-drop;
  • ondragleave – при покидании области drag-n-drop;
  • ondragover – при проносе захваченного элемента через область drag-n-drop;
  • ondragstart – при начале операции drag-n-drop;
  • ondrop; – при отпускании захваченного элемента;
  • ondurationchange – при изменении длительности медиафайла;
  • onemptied – если медиафайл был удалён;
  • onerror – при возникновении ошибки;
  • onhaschange – при изменениях в документе;
  • oninvalid – при введении неверных данных;
  • onloadeddata – при загрузке данных;
  • onloadedmetadata – при загрузке мета-данных;
  • onloadstart – при начале загрузки медиаданных браузером;
  • onplay – при воспроизведении медиафайла;
  • onended; – при достижении проигрывания до конца;
  • onformchange – при изменении в форме;
  • onforminput – при вводе данных в форму;
  • oninput – при отправке формы;
  • onmessage – при появлении сообщения об ошибке;
  • onplaying – при начале воспроизведении медиафайла.

Объекты и фреймы

Объекты
<object>...</object> Тег, описывающий вставляемый объект (аудио, видео, PDF и т.п.).
height="" Высота объекта.
width="" Ширина объекта.
type="" Тип вставляемого объекта.
usemap="" Имя изображения-карты на стороне пользователя, ассоциированного с объектом.
Фреймы
<iframe>...</iframe> Строчный фрейм, позволяющий встраивать в документ информацию из внешних источников.
name="" Имя фрейма.
src="" Адрес объекта, отображаемого в фрейме.
srcdoc="" HTML-контент фрейма.
width="" Ширина фрейма.
<param /> Дополнительные параметры для кастомизации содержимого фрейма.
<embed>...</embed> Контейнер для внешних приложений или плагинов. Может использовать атрибуты height, width, src и type.

Пример

<object width="425" height="225"></object>

 

<iframe src="blogging_iframe.htm" width="300" height="600"></iframe>

 

<embed src="bringonblogging.swf" width="400" height="800"></embed>

Изображения

<img /> Тег, использующийся для вставки изображения.
src="url" Ссылка или имя файла изображения, которое нужно вывести.
alt="text" Альтернативный текст, который используется для пояснения изображённого поисковым системам и пользователям.
height="" Высота изображения в пикселях или процентах.
width="" Ширина изображения в пикселях или процентах.
align="" Определяет выравнивание изображения относительно остального контента на странице (устаревший атрибут).
border="" Задаёт толщину рамки, если она есть (устаревший атрибут).
vspace="" Определяет отступ от левого или правого края изображения (устаревший атрибут).
hspace="" Определяет отступ от верхнего или нижнего края изображения (устаревший атрибут).
<map>...</map> Задаёт интерактивное изображение с кликабельными областями.
<map name="">...</map> Имя карты изображения.
<area /> Задаёт кликабельную область изображения на карте.

Пример

<img src="planets.gif" width="140" height="120" alt="Планеты" usemap="#planetmap" />

 

<map name="planetmap">

<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Солнце" />

<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Меркурий" />

<area shape="circle" coords="124,58,8" href="venus.htm" alt="Венера" />

</map>

Новые теги

<header>...</header> Заглавный блок документа.
<footer>...</footer> Нижний блок документа или секции.
<main>...</main> Основной контент документа.
<article>...</article> Выделяет статью в документе.
<aside>...</aside> Для второстепенного контента и боковых панелей.
<section>...</section> Определяет блок-секцию документа.
<details>...</details> Дополнительные данные или информация, которую пользователь может отображать или скрывать.
<dialog>...</dialog> Блок или окно для диалога.
<figcaption>...</figcaption> Заголовок для элемента <figure>.
<figure>...</figure> Контентный блок для вывода диаграмм, фото, иллюстраций и т.п.
<mark>...</mark> Подсвечивает выделенный текст.
<nav>...</nav> Группирует навигационные ссылки.
<menuitem>...</menuitem> Пункт выпадающего меню.
<meter>...</meter> Шкала измерения заданного масштаба.
<progress>...</progress> Прогресс задачи. Обычно используется для шкалы прогресса.
<rp>...</rp> Отображает текст в браузерах без поддержки арабских языков.
<rt>...</rt> Отображает текст справа налево.
<ruby>...</ruby> Пометки для арабских языков.
<summary>...</summary> Отображает краткое описание для элемента <details>.
<bdi>...</bdi> Выводит часть текста в отличном от основного направлении.
<wbr /> Строка без контента.

Выпадающие списки

Используется внутри тега <select>
name="" Заголовок для группы выпадающего списка.
size="" Количество опций в списке.
multiple Позволяет выбор нескольких опций одновременно.
required Требует обязательного выбора перед отправкой формы.
<optgroup>...</option> Используется для группировки опций.
<option>...</optgroup> Обозначает одну из доступных в выпадающем списке опций.
Атрибуты опций
value="" Обозначает значение выбранной опции.
selected Определяет выбранную по умолчанию опцию.
<button...</button> Отображает кликабельную кнопку для принятия опции.

Пример формы:

<form action="action_page.php" method="post">

<fieldset>

<legend>basic information:</legend>

First name:<br />

<input type="text" name="firstname" value="Matt" placeholder="First Name"><br />

Last name: <br />

<input type="text" name="lastname" value="Banner" placeholder="last name"><br /><br />

Blog topic:<br />

<select>

<option value="cooking">Cooking</option>

<option value="SEO">SEO</option>

<option value="Fashion">Fashion</option>

</select>

<textarea name="description"></textarea>

<input type="submit" value="Submit" />

</fieldset>

</form>

basic information: First name:

Last name:


Blog topic:

Таблицы

<table>...</table> Этот тег включает в себя весь контент таблицы.
<caption>...</caption> Описание таблицы и информации в ней.
<thead>...</thead> Заголовки для контента в каждой колонке.
<tbody>...</tbody> Основная секция таблицы с информацией.
<tfoot>...</tfoot> Подвал таблицы.
<tr>...</tr> Ряд таблицы.
<th>...</th> Ячейка с единичным заголовком.
<td...</td> Обычная ячейка с контентом.
<colgroup>...</colgroup> Группа колонок с общим форматированием.
<col /> Описание формата колонки.

Пример форматирования таблицы:

<table>

<colgroup>

<col span="2" style="background-color: #182afb"><col style="background-color: #2f1475b"></colgroup>

<tr>

<th>Blog title</th>

<th>URL</th>

<th>DA</th>

</tr>

<tr>

<td>On Blast Blog</td><td>www.onblastblog.com</td>

<td>52</td>

</tr>

</table>

Базовое СЕО

Какие HTML-теги влияют на СЕО?

  • контекстная подсветка с <mark>;
  • понижение важности со <small>;
  • цитирование с <q> и <blockquote>;
  • вставка, удаления и правки с <ins>, <del> и <s>;
  • организация опций в группы с <optgroup>;
  • группировка опций в <datalist>.

Разрушение мифов об HTML5

Миф №1 – HTML5 ничем не помогает при ранжировании

  • HTML5 имеет преимущество над предыдущими реализациями в плане СЕО.
  • Специфические элементы позволяют поисковым машинам и ботам понять значения этих элементов. Поэтому их также называют семантическими элементами.

Миф №2 – HTML5 не подходит для видео

  • Некоторые веб-мастера до сих пор предпочитают использовать флеш для встраивания видеоконтента.
  • HTML5 позволяет Вам добавлять заголовки, подписи и субтитры для видео, которые являются дружественными к SEO.
  • Кстати, те же параметры можно использовать и для изображений (поясняющие тексты, заголовки и т.п.).

Миф №3 – Нужно использовать только заголовок H1

  • Вы можете использовать заголовок H1 для каждой новой секции контента на странице.
  • Нужно включать в статью любые заголовки, которые Вы считаете уместными.
  • Используйте традиционную иерархию заголовков (H2, H3, H4 и т.д.).

SEO, Search Engine Optimization

Послесловие

Мэт Бэннер в формате небольшой книжечки (я бы даже сказал брошюры) постарался вместить очень большой объём информации. Однако, в процессе перевода мною были замечены некоторые неточности и недостатки в описаниях. Где можно я дал дополнительные пояснения, однако, сильно что-либо менять без согласия автора я не могу.

Надеюсь, что Мэт, приславший нам свою книгу, прислушается к нашим замечаниям и со временем внесёт необходимые правки в оригинал. А пока, думаю, и того материала, что уже есть вполне достаточно. Если что-то будет Вам неясно, обязательно спрашивайте в комментариях – будем разбираться вместе!








Полезный совет:


Система проверки ошибок от Mistakes.ru