😎 » HTML5

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. Таблиця основних елементів 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-програми можуть надавати багаті, орієнтовані на пристрій функції та можливості. Розробляються та впроваджуються неймовірні інновації у доступі до пристроїв - від доступу до аудіо та відеовходу до мікрофонів та камер, до локальних даних, таких як контакти та події, і навіть орієнтації нахилу.

Тег option

Форма 96 0  

HTML-елемент використовується для визначення пункту списку контейнера:

HTML Як зробити можливість редагування тексту в блоці

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

СontentEditable - повідомляє, що елемент доступний для редагування користувачем, можна видаляти текст і вводити новий. Також працюють стандартні команди на кшталт скасування, вставки тексту з буфера та ін.

Тег base

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

HTML тег визначає початкову частину URL-адреси, яка буде підставлена перед усіма відносними адресами на сторінці. Також він дозволяє вказати, як повинні відкриватися всі посилання на поточній сторінці. Елемент обов'язково повинен мати хоча б один із атрибутів.

details - Дополнительная информация

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

details - Новый семантический элемент для скрытия дополнительной информации, вместо гамбургеров и баянов теперь все можно сделать на чистом HTML и CSS Пример использования для выпадающего меню - смотреть

Как указать путь к файлу в css / html

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

Есть 4 способа указать путь к файлу, обычно используют относительный путь (первых три варианта), а вот 4-й вариант самый надежный для сервера но при просморе на компютере из обычной папки при 4-м варианте Виндовс не сможет понять путь.

SSI вставки на стороне сервера

HTML5 1 225 1  

SSI вставки на стороне сервера - малоизвестый язык для динамической «сборки» веб-страниц на сервере реализованы в веб-сервере Apache при помощи модуля mod_include. Шаблонизатор SSI - HTML5-SSI-RULLAN

Досвід у веброзробці:

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