HTML5

Полный HTML5 справочник по тегам и атрибутам языка гипертекстовой разметки веб страниц. Примеры и трактовка на русском языке.
Строчные и блочные элементы   Иерархия элементов   Значения rel=   События  

Layout no problem

Поможет учить html
Ускорит поиск нужного тега
Поддержка уровня знаний
Ты всегда впереди

Зачем HTML5

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

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

- Глобальные атрибуты, упомянутые во многих местах, можно найти в таблице под названием «Глобальные атрибуты».

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

Новые API

Помимо указания разметки, HTML5 определяет интерфейсы прикладного программирования (API) для сценариев. Существующие интерфейсы объектной модели документов (DOM) расширены, а функции де-факто задокументированы. Есть также новые API, такие как:

- Элемент canvas для непосредственного режима 2D-рисования.

- База данных автономного хранения (автономные веб-приложения).

- Обмен документами между документами

- Управление историей браузера

- MIME тип и регистрация обработчика протокола

- Время воспроизведения мультимедиа

- Редактирование документов

- Перетягивание документов

- Microdata

Отличия HTML5 от HTML 4.01 и XHTML 1 .x

- Возможность использовать встроенные SVG и MathML в text / html

- Новые элементы: article, aside, audio, bdi, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr

- Новые типы элементов управления формы: dates and times, email, url, search, color

- Глобальные атрибуты (которые могут применяться к каждому элементу): id, tabindex, hidden, data-* (пользовательские атрибуты данных)

- Элементы которые будут полностью удалены: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt, u.

Кажется что в языке HTML5 очень мало команд и все очень просто. Но вод беда! - в зависимости от очередности расположения и вложености елементов верстки - свойства их могут менятся. Иногда весь дизайн сьежает через этот фактор.

Размеры екранов в пикселях:
Десктоп  - от 1024 до 1980рх
Планшет - от 480 до 1024рх
Мобилка - от 320 до 480рх


1. Таблица оcновных элементов html5:

Корневой элемент
<html></html> корневой элемент html-документа block
Служебные теги
<!—…—> комментарий none
<!DOCTYPE> объявление типа документа none
<head></head> контейнер для метаданных html-документа none
<title></title> заголовок / имя html-документа none
<meta> мета-данные веб-страницы none
<link> подключает внешние таблицы стилей none
<script></script> подключает сценарии к странице none
<style></style> подключает встраиваемые таблицы стилей none
<base> базовый url-адрес, относительно которого вычисляются относительные адреса none
<noscript></noscript> секция, не поддерживающая скрипт block
Таблицы
<table></table> html-таблица table
<tr></tr> строка таблицы table-row
<th></th> заголовок столбца таблицы table-cell
<td></td> ячейка таблицы table-cell
<thead></thead> блок заголовков таблицы table-header-group
<tbody></tbody> тело таблицы table-row-group
<tfoot></tfoot> нижний колонтитул таблицы table-footer-group
<caption></caption> подпись к таблице table-caption
<col> выбирает для форматирования столбцы table-column
<colgroup></colgroup> контейнер для одного или нескольких <col> table-column-group
Текст
<h1></h1> - <h6></h6> заголовки шести уровней block
<p></p> параграфы в тексте block
<br> перенос текста на новую строку none
<hr> горизонтальная линия block
<wbr> возможное место разрыва длинной строки none
<blockquote></blockquote> большая цитата block
<cite></cite> источник цитирования inline
<q></q> краткая цитата inline
<code></code> фрагмент программного кода inline
<kbd></kbd> текст, вводимый пользователем с клавиатуры inline
<pre></pre> выводит текст с пробелами и переносами block
<samp></samp> результат выполнения сценария inline
<var></var> выделяет переменные из программ inline
<del></del> перечёркивает текст, помечая как удаленный inline
<s></s> перечёркивает неактуальный текст inline
<dfn></dfn> выделяет термин курсивом inline
<em></em> выделяет важные фрагменты текста курсивом inline
<i></i> выделяет текст курсивом без акцента inline
<strong></strong> выделяет полужирным важный текст inline
<b></b> задает полужирное начертание отрывка текста, без дополнительного акцента inline
<ins></ins> подчёркивает изменения в тексте inline
<u></u> выделяет отрывок текста подчёркиванием, без дополнительного акцента inline
<mark></mark> выделяет фрагменты текста желтым фоном inline
<small></small> отображает текст шрифтом меньшего размера inline
<sub></sub> подстрочное написание символов inline
<sup></sup> надстрочное написание символов inline
<time></time> дата / время документа или статьи inline
<abbr></abbr> аббревиатура или акроним none
<address></address> контактные данные автора документа или статьи block
<bdi></bdi> изолирует текст, читаемый справа налево inline
<bdo></bdo> задаёт направление написания текста inline
<ruby></ruby> контейнер для Восточно-Азиатских символов и их расшифровки inline
<rp></rp> тег для скобок вокруг символов none
<rt></rt> расшифровка символов block
Изображения
<img> html-изображения inline
<map></map> активные области на карте-изображении inline
<area> гиперссылка с текстом или активная область внутри карты-изображения inline
<canvas></canvas> холст-контейнер для динамического отображения изображений inline-block
Ссылки
<a></a> гиперссылка inline
Списки
<ol></ol> упорядоченный нумерованный список block
<ul></ul> маркированный список block
<li></li> элемент списка list-item
<dl></dl> контейнер для термина и его описания block
<dt></dt> задаёт термин block
<dd></dd> расшифровывает термин block
Группировка контента
<body></body> тело html-документа block
<div></div> контейнер для разделов html-документа, группирует блочные элементы block
<span></span> контейнер для строчных элементов inline
<header></header> секция для вводной информации сайта или группы навигационных ссылок block
<footer></footer> секция для нижнего колонтитула документа или раздела block
<section></section> логическая область (раздел) страницы, обычно с заголовком block
<article></article> раздел контента, образующий независимую часть документа или сайта block
<aside></aside> контент страницы, имеющий косвенное отношение к основному контенту block
<nav></nav> раздел документа, содержащий навигационные ссылки по сайту block
<figure></figure> независимый контейнер для такого контента как изображения, диаграммы и т.п. block
<figcaption></figcaption> заголовок для элемента <figure> block
<details></details> контейнер с дополнительными сведениями, который можно открыть или закрыть block
<summary></summary> видимый заголовок для элемента <details> block
<main></main> контейнер для уникального основного содержимого в пределах одной страницы сайта block
Формы
<form></form> html-форма block
<input> многофункциональные поля формы inline-block
<textarea> многострочное поле формы inline-block
<label></label> текстовая метка для элемента <input> inline
<datalist></datalist> контейнер для выпадающего списка элемента <input> с <option>-значениями none
<select></select> элемент управления с выбором значений из предложенных вариантов <option> inline-block
<optgroup></optgroup> контейнер с заголовком для группы элементов <option> block
<option></option> вариант (опция) в раскрывающемся списке block
<fieldset></fieldset> группирует связанные элементы в форме block
<legend></legend> заголовок элементов формы, сгруппированных с помощью <fieldset> block
<button></button> интерактивная кнопка inline-block
<keygen> генерирует закрытый и открытый ключи inline-block
<progress></progress> индикатор выполнения задачи inline-block
<meter></meter> индикатор измерения в заданном диапазоне inline-block
<output></output> поле для вывода результата вычисления inline
Встраиваемый контент
<audio></audio> добавляет аудио-файлы inline-block
<video></video> добавляет видео-файлы inline-block
<source> указывает местоположение и тип альтернативных файлов для <audio> и <video> none
<track> субтитры для элементов <audio> и <video> none
<embed> встраивает внешний интерактивный контент или плагин inline-block
<object></object> контейнер для встраивания мультимедиа inline-block
<param> задаёт параметры для плагинов, встраиваемых с помощью элемента <object> none
<iframe></iframe> создаёт встроенный фрейм block

2.1. Мета содержимое

<base>, <link>, <meta>, <noscript>, <script>, <style>, <template>, <title>

К мета содержимому относятся элементы, которые содержат информацию о HTML-документе, устанавливают взаимосвязь HTML-документа с другими документами (например, таблицами стилей css), отвечают за внешний вид или поведение контента на странице. Элементы из другого пространства имён, чей смысл связан с метаданными, также относятся к мета содержимому.

2.2. Потоковое содержимое

<a>, <abbr>, <address>, <area> (если он является потомком элемента <map>), <article>, <aside>, <audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <link> (если его присутствие внутри тела документа допускается), <main>, <map>, <mark>, MathML, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, SVG, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>, текст

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

2.3. Секционное содержимое

<article>, <aside>, <nav>, <section>

Секционное содержимое — содержимое, определяемое областью заголовков и колонтитулов. Каждый элемент секционного содержимого потенциально имеет заголовок и схему (outline).

2.4. Заголовочное содержимое

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

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

2.5. Текстовое содержимое

<a>, <abbr>, <area> (если он является потомком элемента <map>), <audio>, <b>, <bdi>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <link> (если его присутствие внутри тела документа допускается), <map>, <mark>, MathML, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, SVG, <svg>, <template>, <textarea>, <time>, <u>, <var>, <video>, <wbr>, текст

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

2.6. Встроенное содержимое

<audio>, <canvas>, <embed>, <iframe>, <img>, MathML, <math>, <object>, <picture>, SVG, <svg>, <video>

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

2.7. Интерактивное содержимое

<a> (если присутствует атрибут href), <audio> (если присутствует атрибут controls), <button>, <details>, <embed>, <iframe>, <img> (если присутствует атрибут usemap), <input> (если значение атрибута type не равно hidden), <label>, <select>, <textarea>, <video> (если присутствует атрибут controls)

Интерактивное содержимое предполагает взаимодействие с пользователем. Атрибут tabindex также может сделать любой элемент интерактивным содержимым.

3. Дополнительные категории содержимого

3.1. Явное содержимое

<a>, <abbr>, <address>, <article>, <aside>, <audio> (если присутствует атрибут controls), <b>, <bdi>, <bdo>, <blockquote>, <button>, <canvas>, <cite>, <code>, <data>, <details>, <dfn>, <div>, <dl> (если он содержит по крайней мере одну пару термин-описание), <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <i>, <iframe>, <img>, <input> (если значение атрибута type не равно hidden), <ins>, <kbd>, <label>, <main>, <map>, <mark>, MathML, <math>, <menu> (если значение атрибута type равно toolbar), <meter>, <nav>, <object>, <ol> (если он содержит по крайней мере один элемент <li>), <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, SVG, <svg>, <table>, <textarea>, <time>, <u>, <ul> (если он содержит по крайней мере один элемент <li>), <var>, <video>, текст, не являющийся пробелом между элементами

Как правило, элементы, принадлежащие модели потокового или текстового содержимого, должны иметь минимум один узел, который имеет явное содержимое и для него не задан атрибут hidden. Явное содержимое делает элемент непустым. Это обеспечивается тем, что элемент содержит потомка с текстом или каким-либо содержимым, которое пользователь может слышать (элемент kbd><audio>), видеть (элемент <canvas>, <img> или <video>) или каким-либо образом взаимодействовать с ним (интерактивные элементы форм).

Это требование не является жёстким, так как в некоторых случаях элемент может быть пустым по очевидным причинам (например, он в последствии будет наполняться с помощью скрипта).

3.2. Элементы, поддерживающие скрипт

<script>, <template>

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

3.3. Корневое секционное содержимое

<blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure>, <td>

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

4. Прозрачная модель содержимого

<a>, <audio>, <canvas>, <del>, <ins>, <map>, <object>, <video>

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

Мультимедиа

Аудио и видео - первоклассные граждане в сети HTML5, живущие в гармонии с вашими приложениями и сайтами. Свет, камера, мотор!

Оффлайн & Хранение

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

Производительность и Интеграция

Сделайте свои веб-приложения и динамический веб-контент быстрее с помощью различных методов и технологий, таких как Web Workers и XMLHttpRequest 2. Ни один пользователь никогда не должен ждать.

Семантика

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

CSS3

CSS3 предоставляет широкий спектр стилизации и эффектов, улучшая веб-приложение, не жертвуя своей семантической структурой или производительностью. Кроме того, Web Open Font Format (WOFF) обеспечивает типографскую гибкость и контроль далеко за пределами того, что раньше предлагалось в Интернете.

3D графика и эффекты

Среди возможностей SVG, Canvas, WebGL и CSS3 3D вы наверняка поразите своих пользователей потрясающими визуальными эффектами, встроенными в браузер.

Быстрая Связь

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

Доступ к устройству

Начиная с API геолокации, veb-приложения могут предоставлять богатые, ориентированные на устройство функции и возможности. Разрабатываются и внедряются невероятные инновации в доступе к устройствам - от доступа к аудио и видеовходу до микрофонов и камер, до локальных данных, таких как контакты и события, и даже ориентации наклона.

Темы для Notepad++ 2020

Разная информация 35 0  

Стандартные темы в Notepad++ не очень хороши для верстки HTML и CSS в яблучном Sublim они намного лучше. НО! есть много других тем которые лучше стандартных.

Разные картинки под разные разрешения экрана

Разная информация 60 0  

В самом теле HTML можно задать 2 или более картинок для отображения в зависимости от разрешения экрана. Как правило нужно для того чтобы в мобильной версии сайта показвать маленькое изображение вместо большого.

Размеры экранов для сайта

Разная информация 200 0  

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

Метатеги для предзагрузки

Значения 133 0  

Метатеги для предзагрузки картинок, скриптов и шрифтов, которые помогают загрузит сначала необходимый ресурс или как ускорить сайт предзагрузкой?

meta

Значения 155 0  

Элемент HTML <meta> - служит для передачи служебной информации поисковикам, соцсетям и представляет метаданные, которые не могут быть представлены другими элементами, связанными с мета-HTML, такими как <base>, <link>, <script>, <style> или <title>.

Статусы ответа сервера

Разная информация 105 0  

Код ответа сервера - это трехзначное число, которое возвращает сервер в браузер на запрос загрузки содержимого, уже на основе ответа браузер понимает что ему делать дальше.

body элемент

Каркас документа 92 0  

Элемент <body> представляет содержимое документа HTML - точнее это тело в котором содержится видимая для пользователя часть кода. В документе может быть только один элемент <body>.

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019