HTML справочник | Теги HTML
HTML справочник — это список HTML тегов определенных в спецификации HTML 5. Список тегов редактируется по мере изменения спецификации (обновляется информация и о самих тегах и об их атрибутах).
Для удобства все HTML теги разбиты на категории, согласно их назначению. Если вам нужен како-то конкретный тег, то в левом меню теги отсортированы в алфавитном порядке. Чтобы посмотреть полное описание тега и его атрибутов перейдите по ссылке, нажав на интересующий вас тег.
Вставляемый контент
Интерактивные элементы
Комментарии
Корневой элемент
Метаданные документа
Метаданные — структурированная информация о веб-странице, размещаемая внутри HTML-документа в элементе head.
Разделы документа
Списки
Ссылки
Сценарии
Таблицы
Текст
Формы
Теги html
Если вы только собираетесь начать изучать HTML, то одна из первых вещей, которые следует запомнить – специальные термины. Два из них будут встречаться наиболее часто – это «тег» и «элемент».
Термины «HTML элемент» и «HTML тег» обычно используются как синонимы. Но в соответствии со спецификацией W3C элемент – это тег со всем его содержимым, включая открывающий и закрывающий теги. У некоторых элементов нет закрывающего тега, такие элементы называются одиночными или пустыми, но несмотря на то, что они не могут содержать в себе никакого контента, они все равно считаются полноценными элементами.
На страницах сайта понятия тега и элемента используются для обозначения одного и того же – структурной единицы языка HTML, которая применяется для разметки документа.
Если вы желаете узнать больше о создании веб страниц, тегах и их применении, то можете заглянуть в наш Самоучитель по HTML.
| Теги | Описание |
|---|---|
| <!—…—> | Определяет комментарий |
| <!DOCTYPE> | Определяет тип документа |
| <a> | Определяет гиперссылку |
| <abbr> | Определяет аббревиатуру или акроним |
| <acronym> | Не поддерживается в HTML5. Использовать <abbr>. Определяет акроним |
| <address> | Определяет контактную информацию автора/владельца документа |
| <applet> | Не поддерживается в HTML5. Использовать <embed> или <object> Определяет встроенное приложение |
| <area> | Определяет область внутри изображения-карты |
| <article> | Определяет статью |
| <aside> | Определяет содержимое в стороне помимо содержимого страницы |
| <audio> | Определяет звуковое содержимое |
| <b> | Определяет bold (полужирный) текст |
| <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> |
| <colgroup> | Задает группу из одного или нескольких столбцов в таблице для форматирования |
| <data> | Задает данные содержимого с машиночитаемым переводом |
| <datalist> | Задает список предопределенных параметров элементов управления вводом |
| <dd> | Определяет описание/значение термина в списке описаний |
| <del> | Определяет текст, который был удален из документа |
| <details> | Определяет дополнительные сведения, которые пользователь может просмотреть или скрыть |
| <dfn> | Представляет определяющий экземпляр термина |
| <dialog> | Определение диалогового окна или окна |
| <dir> | Не поддерживается в HTML5. Используйте <ul>. Определяет список директории |
| <div> | Определяет раздел в документе |
| <dl> | Определяет список описаний |
| <doctype> | Объявляет декларацию <!DOCTYPE>, документа HTML |
| <dt> | Определяет термин/имя в списке описаний |
| <em> | Определяет выделенный текст |
| <embed> | Определяет контейнер для внешнего приложения (non-HTML) |
| <fieldset> | Группы связанных элементов в форме |
| <figcaption> | Определяет подпись к фотографии для элемента <figure> |
| <figure> | Задает автономное содержимое |
| <font> | Не поддерживается в HTML5. Используйте в CSS. Определяет шрифт, цвет и размер текста |
| <footer> | Определяет нижний колонтитул для документа или раздела |
| <form> | Определяет форму HTML для пользовательского ввода |
| <frame> | Не поддерживается в HTML5. Defines a window (a frame) in a frameset |
| <frameset> | Не поддерживается в HTML5. Defines a set of frames |
| <h2> и <h6> | Определяет заголовки HTML |
| <head> | Определяет сведения о документе |
| <header> | Определяет верхний колонтитул для документа или раздела |
| <hr> | Определяет тематическое изменение в содержании |
| <html> | Определяет корень документа HTML |
| <i> | Определяет часть текста альтернативным голосом или настроением |
| <iframe> | Определяет встроенный фрейм |
| <img> | Определяет изображения |
| <input> | Определяет входной контроль |
| <ins> | Определяет текст, вставленный в документ |
| <kbd> | Определяет ввод с клавиатуры |
| <label> | Определяет лэйбл для элемента <input> |
| <legend> | Определяет подпись к фотографии для элемента <fieldset> |
| <li> | Определяет элемент списка |
| <link> | Определяет связь между документом и внешним ресурсом (чаще всего используется для ссылки на таблицы стилей) |
| <main> | Задает основное содержимое документа |
| <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> | Определяет многострочный элемент управления вводом text area (область текста) |
| <tfoot> | Группирует содержимое нижнего колонтитула в таблице |
| <th> | Определяет ячейку заголовка в таблице |
| <thead> | Группирует содержимое заголовка в таблице |
| <time> | Определяет дату/время |
| <title> | Определяет заголовок документа |
| <tr> | Определяет строку в таблице |
| <track> | Определяет текстовые дорожки для элементов мультимедиа (<video>и <audio>) |
| <tt> | Не поддерживается в HTML5. Используйте в CSS. Определяет текст типа teletype (телетайпа) |
| <u> | Определяет текст, который должен стилистически отличаться от обычного текста |
| <ul> | Определяет неупорядоченный список |
| <var> | Определяет переменную |
| <video> | Определение видео или фильм |
| <wbr> | Определяет возможный разрыв линии |
Краткий справочник по тегам HTML
Кратко о документе
<html> … </html>
Данные теги показывают начало и конец документа HTML, и называются корневыми. Они показывают браузеру границы страницы для обработки. Все HTML страницы должны содержать данные теги. Все остальное содержимое хранится внутри тегов html.
<head> … </head>
Содержит специфическую информацию о странице, включая кодировку, мета-информацию, подключение скриптов и подключение стилей.
<title> … </title>
Содержат заголовок страницы, который отображается на вкладке в браузере. Используется для поиска страницы с помощью поисковых систем и для ориентации по вкладкам. Распоалагаются внутри тега head.
<body> … </body>
Содержит весь контент, который отображается на странице. Все что мы видим на html странице располагается в нем.
Пример
<html> <head> <title>Пример</title> </head> <body> </body> </html>
<html> <head> <title>Пример</title> </head> <body> </body> </html> |
Информация о документе
<base>
Базовый URL, используется для создания относительных ссылок на сайте. Не обязательный тег.
<meta>
Мета данные, многофункциональный тег, который показывает кодировку документа, описание, ключевые слова и многое другое. Используется с атрибутами.
<link>
Тег используется для подключения внешних страниц, например таблиц стилей
<style> … </style>
Содержит встроенные стили для страницы. Рекомендуем выносить стили в отдельный документ, однако, в некоторых случаях целесообразно прописать стили внутри документа.
<script> … </script>
Данный элемент может использоваться для оборачивания различных скриптов на странице, например JavaScript и для подключения внешних скриптов
<!DOCTYPE html> <html> <head> <meta charset=»UTF-8″> <title>Document</title> <link rel=»stylesheet» href=»style.css»> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset=»UTF-8″> <title>Document</title> <link rel=»stylesheet» href=»style.css»> </head> <body> </body> </html> |
Структура документа
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h6>…</h6>
Шесть уровней заголовков для создания структурных блоков. Самый важный — h2. Элементы содержат описания блоков текста, разделов, страниц. Аналогия — заголовки в книгах
<div></div>
Просто прямоугольный блок. Не несет смыслового контента, используется в верстке для создания прямоугольных областей.
<span> … </span>
Используется для выделения элементов внутри строки, с последующих их оформлением с помощью CSS.
<p> … </p>
Служит для создания параграфов в тексте.
<br>
Служит для разрыва строки внутри параграфа, блока, заголовка. Большой ошибкой есть использование данного тега для организации переносов строк — для этого используются параграфы.
<hr>
Создает горизонтальную линию. Является блочным элементом. Служит для разделения логических блоков текста, подведения итого.
Примеры
<h3>Заголовок</h3> <p>Это пример простого <span>параграфа текста</span>. В нем используется выделение отдельных слов.</p> <hr> <h4>Еще немного заголовков</h4> <p>Обязательно используйте параграфы для раздения <span>логических</span> блоков текста.</p>
<h3>Заголовок</h3> <p>Это пример простого <span>параграфа текста</span>. В нем используется выделение отдельных слов.</p> <hr> <h4>Еще немного заголовков</h4> <p>Обязательно используйте параграфы для раздения <span>логических</span> блоков текста.</p> |
Заголовок
Это пример простого параграфа текста. В нем используется выделение отдельных слов.
Еще немного заголовков
Обязательно используйте параграфы для раздения логических блоков текста.
Текст (и форматирование)
<strong> … </strong>
Выделение важных, ключевых слов в тексте. Слов, на которые делается логическое ударение. Браузеры выделяют данный тег жирным начертанием. Не используйте strong для простого, визуального выделения. В HTML5 тег strong используется в семантическом контексте.
<b> … </b>
Визуальное выделение жирным шрифтов. Служит для оформления. Не несет смысловой нагрузки.
<em> … </em>
Выделение слов в тексте, которые выделяются при произношении, чтении. Служит для указания смысловой нагрузки на текст. Выделяется курсивом.
<i> … </i>
Выделение курсивом. Не несет смысловой нагрузки. Служит для оформления текста.
<cite> … </cite>
Цитата, цитируемая информация.
<pre> … </pre>
Преформатированный текст. Моноширинный текст. Форматирование выводится так, как задал пользователь внутри блока окруженного тегами pre, в частности отступы, пробелы — сохраняются.
<blockquote> … </blockquote>
Чаще всего цитаты из текста, текст, выделенный для цитирования.
<q> … </q>
Сокращенный тег, используемый для цитирования.
<abbr title=»полное название» > … </abbr>
Выделение аббревиатур. При наведении мыши всплывает полное написание аббревиатуры.
<address> … </address>
Тег использовался для обертки адреса. Сейчас, ипользуется для указания адреса в сети Интернет (URL) материала, ссылки, цитаты. Для форматирования почтового адреса используйте микроформаты и микроданные.
<dfn> … </dfn>
Используется для обозначения определений.
<code> … </code>
Используется для выделения текста моноширинным шрифтом. Часто используется для форматирования кода языков программирования.
<sup> … </sup>
Выделение верхнего индекса. Например для создания обозначения m2.
<sub> … </sub>
Создание нижнего индекса.
<small> … </small>
Изначально использовался для создания текста, с размерами меньше основного. Сейчас — для выведения информации менее важной, чем основной текст. Пример — оформление сносок в документе.
Примеры
<p><strong>Бульба</strong> был <em>упрям страшно</em>. Это был один из <i>тех характеров</i>, которые могли возникнуть только в <b>тяжелый ХV век</b> на полукочующем углу Европы, когда вся южная первобытная Россия, оставленная своими князьями, была опустошена, выжжена дотла неукротимыми набегами монгольских хищников.</p> <blockquote>Когда, лишившись дома и кровли, стал здесь отважен человек; когда на пожарищах, в виду грозных соседей и вечной опасности, селился он и привыкал глядеть им прямо в очи, разучившись знать, существует ли какая боязнь на свете.</blockquote>
<p><strong>Бульба</strong> был <em>упрям страшно</em>. Это был один из <i>тех характеров</i>, которые могли возникнуть только в <b>тяжелый ХV век</b> на полукочующем углу Европы, когда вся южная первобытная Россия, оставленная своими князьями, была опустошена, выжжена дотла неукротимыми набегами монгольских хищников.</p> <blockquote>Когда, лишившись дома и кровли, стал здесь отважен человек; когда на пожарищах, в виду грозных соседей и вечной опасности, селился он и привыкал глядеть им прямо в очи, разучившись знать, существует ли какая боязнь на свете.</blockquote> |
Бульба был упрям страшно. Это был один из тех характеров, которые могли возникнуть только в тяжелый ХV век на полукочующем углу Европы, когда вся южная первобытная Россия, оставленная своими князьями, была опустошена, выжжена дотла неукротимыми набегами монгольских хищников.
Когда, лишившись дома и кровли, стал здесь отважен человек; когда на пожарищах, в виду грозных соседей и вечной опасности, селился он и привыкал глядеть им прямо в очи, разучившись знать, существует ли какая боязнь на свете.
HTML5 Учебник
Бесплатный учебник HTML — самостоятельное обучение.
Выучить HTML — создать свой собственный веб сайт.
Онлайн обучение HTML — все теги HTML.
HTML Примеры
HTML учебник, содержит много примеров HTML в каждой главе.
С помощью онлайн редактора кода, можно редактировать код HTML, при нажатии на кнопку, можно увидеть результат.
Пример
Название Страницы
<h2>Это Заголовок</h2>
<p>Это Параграф.</p>
</body>
</html>
Нажмите на кнопку «Редактор кода», чтобы посмотреть, как это работает.
Начать изучать HTML сейчас!
Примеры кода HTML
В HTML учебнике, более 200 примеров.
С помощью редактора, можно редактировать и тестировать каждый пример.
Перейти к примерам HTML кода!
HTML Упражнения
Проверте себя с помощью упражнений
Упражнение:
Добавить «всплывающую подсказку» к нижеприведенному параграфу с текстом «О SchoolsW3».
<p =»О SchoolsW3″> О SchoolsW3 сайт веб-разработчика.</p>
Отправить ответ »
Начните упражнения
HTML Викторина
Старт HTML Викторины!
HTML Справочники
В SchoolsW3, найдете полный справочник тегов, атрибутов, событий, название цвета, значений, набор символов, URL кода, код языка, HTTP сообщений и т.д..
HTML Справочник тегов
HTML экзамен — получить диплом!
SchoolsW3 Сертификат
Идеальное решение для профессионалов, которым необходимо совмещать работу, семью, дом и карьеру.
Более 10 000 сертификатов уже выдано!
Получите Сертификат »
HTML Сертификат — документ знаний HTML.
CSS Сертификат — документ знаний CSS.
JavaScript Сертификат — документ знаний JavaScript и HTML DOM.
jQuery Сертификат — документ знаний jQuery.
PHP Сертификат — документ знаний PHP и SQL (MySQL).
Bootstrap Сертификат — документ знаний Bootstrap.
XML Сертификат — документ знаний XML, XML DOM и XSLT.
| Тег | Описание |
|---|---|
| <!—…—> | Определяет комментарий |
| <!DOCTYPE> | Определяет тип документа |
| <a> | Определяет гиперссылку |
| <abbr> | Определяет абревиатуру или акроним |
| <acronym> | Не поддерживается в HTML5. Используйте <abbr> вместо этого. Определяет акроним |
| <address> | Определяет контактную информацию автора / владельца документа |
| <applet> | Не поддерживается в HTML5. Используйте <embed> или <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> |
| <colgroup> | Определяет группу с одного или нескольких столбцов в таблице для форматирования |
| <data> | Связывает заданный контент с машиночитаемым переводом |
| <datalist> | Определяет список предварительно определённых параметров управления вводом |
| <dd> | Определяет описание / значение термина в списке описания |
| <del> | Определяет удалённый с документа текст |
| <details> | Определяет дополнительные детали, которые пользователь может просматривать или прятать |
| <dfn> | Задаёт термин, для которого будет дано определение (definition) |
| <dialog> | Определяет диалоговый бокс или окно |
| <dir> | Не поддерживается в HTML5. Используйте <ul> вместо этого. Определяет список каталогов |
| <div> | Определяет раздел (блочный) в документе |
| <dl> | Определяет список описаний |
| <dt> | Определяет термин / имя в списке описания |
| <em> | Определяет семантически подчёркнутый текст (empharized) |
| <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> | Определяет карту изображения на стороне клиента |
| <mark> | Определяет помеченный (маркированный) / выделенный текст |
| <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> | Определяет возможный разрыв строки |
Самоучитель, справочник html, css, javascript и php
Сеть Интернет уже давно стала для нас чем-то необходимым, каждодневным и универсальным. В сети каждый находит для себя что-то нужное, интересное или даже необходимое. Обилие Интернет сайтов, сервисов социальных сетей, форумов и многих других, полезных и не очень, ресурсов просто поражает. В сети можно найти все: от списка ресторанов и кинотеатров, куда бы вы хотели пойти, до подробного описания принципа работы адронного коллайдера, с подробными примерами и чертежами по его созданию.
Но как это работает, что нужно сделать, чтобы построить свой собственный сайт?
Если вас интересуют именно эти вопросы — вы зашли по адресу. Сайт www.puzzleweb.ru – это универсальный самоучитель и справочник по HTML 5, CSS, JavaScript и PHP, на страницах которого вы сможете не только узнать, как работают интернет сайты, но и научитесь создавать их самостоятельно.
Как пользоваться сайтом?
Для удобства восприятия и изучения материала сайт разделен на четыре основных раздела, в каждом из которых вы найдете всю необходимую информацию по интересующей вас теме:
 |
HTMLСамоучитель HTML – это подробное руководство по языку разметки HTML, включая все обновления и дополнения к языку в версии HTML 5. Полезно знать, что на каком бы языке программирования ни был бы написан сайт, для браузера пользователя его структура всегда подается в виде HTML. Справочник html также поможет вам свободно ориентироваться в данном языке. |
 |
CSSСамоучитель CSS, а также удобный справочник CSS, откроют перед вами практически безграничные возможности по оформлению интернет сайта. Перед вами предстанет интереснейший мир разнообразия форм и цветов, какими может обладать ваш сайт. |
 |
JavaScriptСамоучитель JavaScript – это удобнейшее онлайн пособие для начинающего программиста, после изучения которого вы научитесь создавать интерактивные интернет сайты. Изучение JavaScript даст вам возможность более качественно удовлетворять потребности посетителей вашего сайта. |
 |
PHPЕсли вы хотите научиться создавать динамические веб-сайты, уже знакомы с основами разметки HTML, но не представляете себе, как использовать для этих целей язык программирования PHP, то наш раздел по PHP станет вашим незаменимым помощником. |
Для кого создан сайт www.puzzleweb.ru?
Сайт будет полезен не только для начинающих WEB-программистов, но и для тех, кто уже умеет создавать сайты и приложения. Благодаря наличию на нашем ресурсе удобных справочников по CSS и HTML, вы всегда сможете быстро определить значение интересующего вас тега или свойства, не теряя времени на поиски информации в книгах или в Интернете. На страницах наших самоучителей вы найдете множество практических примеров исходного кода страниц, скриптов, которые вы с легкостью сможете применить для создания собственного проекта.
Учебник HTML 5. Статья «Введение»
Язык гипертекстовой разметки HTML (англ. HyperText Markup Language) — является языком разметки документов во Всемирной паутине.
Хочу сразу обратить Ваше внимание, что HTML является языком разметки, а не программирования, как многие ошибочно полагают. Его основная задача создать каркас для описания различных компонентов документа, таких как абзацы, заголовки, списки, таблицы, ссылки на другие страницы и так далее.
HTML документы описываются специальными именами HTML элементов (тегами), каждый тег описывает различное содержание документа. Теги представляют собой команды, которые сообщают браузеру, каким образом отображать веб-страницу (документ).
Цель любого веб-браузера прочитать HTML документ и правильно его отобразить. Браузер не отображает HTML теги, но использует их, чтобы определить, как отображать конкретный документ.
Теги бывают двух видов: парные и одиночные (пустые). У парных HTML-тегов первый тег в паре является начальным (открывающим) тегом, а второй тег является конечным (закрывающим) тегом. Основная функция начального тега заключается в том, чтобы сообщить браузеру где команда начинается, а конечным тегом определить где она заканчивается.
Давайте рассмотрим чем отличаются парные теги от одиночных.
Вид (синтаксис) парного тега:
<тег>Содержание тега</тег>
Обратите внимание, что все теги заключены в угловые скобки < и >, а закрывающий тег всегда должен содержать прямой слеш перед названием тега — </тег>, этим мы сообщаем браузеру, что на этом месте наша «команда» закончена.
Большинство ошибок в верстке (создание структуры HTML кода) у Вас может возникать по той причине, что не указан закрывающий тег или он указан без прямого слеша / . Если не указать прямой слеш, то браузер воспринимает тег как открывающий, а не закрывающий. В том случае если вы вообще не указали закрывающий тег, то браузер не узнает где Ваша команда заканчивается, чтобы её остановить, что может привести к серьезным ошибкам, будьте внимательны. К счастью, современные редакторы HTML кода позволяют быстрее отслеживать ошибки такого рода.
Вид (синтаксис) одиночного тега:
<тег>Содержание
В современном стандарте HTML 5 одиночные теги записываются как и начальные теги у парных тегов (наименование тега помещено в угловые скобки < и >).
Обращаю Ваше внимание, что до выхода современного стандарта одиночные теги требовали наличие прямого слеша перед наименованием тега (записывались по аналогии с закрывающими тегами). Использование прямого слеша в одиночных тегах не будет считаться ошибкой, но в этом и нет необходимости — короче код, быстрей загрузка.
Основное отличие одиночных тегов от парных заключается в том, что одиночные теги не требуют закрывающий тег после содержимого элемента. Они добавляют на страницу одиночные объекты, например, изображение, или производят какое-то одиночное действие, например, такое как перевод строки. В HTML одиночных тегов значительно меньше чем парных, к концу обучения вы будете знать их все.
Хотя в HTML 5 теги не чувствительны к регистру, я рекомендую вам писать их в нижнем регистре. С помощью тегов браузер распознает структуру и значение текста, они сообщают браузеру, какая часть документа является заголовком, где начинается новый абзац, где начинается список, либо размещена таблица, что нужно выделить цветом, что перенести на следующую строку и так далее. Анализируя эту информацию, браузер отображает каждый элемент так, как мы ему это сообщили.
Пример простого HTML документа:
И так, мы с Вами поняли, что HTML — это краеугольный камень, благодаря которому любой браузер пользователя отобразит страницу. Но как выглядит HTML? Давайте рассмотрим простой код, из которого состоит практически любая информационная страница:
<!DOCTYPE html> <html> <head> <title>Название для документа (страницы)<title> </head> <body> <h3>Это заголовок</h3> <p>Это параграф (абзац).</p> </body> </html>
Хочу сразу обратить Ваше внимание на то, что браузеры игнорируют символы табуляции и пробелы в документе (если им явно это не указать, но об этом позднее). Чтобы вам было легче воспринимать HTML код в примерах, теги вложенные в другие теги мы будем отделять табуляцией (как показано в примере) выше.
А теперь детально разберем из чего состоит любая HTML страница:
DOCTYPE это декларация, которая определяет тип документа. Декларация не является тегом HTML это только инструкция для веб-браузера о том, какая версия HTML используется в документе. Декларация !DOCTYPE помогает браузеру отобразить веб-страницу правильно, для этого браузер должен знать, как тип, так и версию документа.
Декларация <!DOCTYPE html> сообщает, что в этом документе используется пятая версия языка гипертекстовой разметки — HTML 5.
Обращаю Ваше внимание на то, что декларация должна указываться самой первой в вашем HTML документе, перед тегом <html>. Декларация <!DOCTYPE> не чувствительна к регистру, но записывать её принято в верхнем регистре.Хронология версий HTML:
| Версия | HTML | HTML 2.0 | HTML 3.2 | HTML 4.01 | XHTML | HTML 5 |
|---|---|---|---|---|---|---|
| Год | 1991 | 1995 | 1997 | 1999 | 2000 | 2014 |
Текст между тегами <html> и </html> сообщает браузеру, что необходимо прочитать документ как программный код, написанный на языке гипертекстовой разметки. Является корневым элементом HTML документа и все остальные элементы должны быть его потомками (вложены в него).
Текст между <head> и </head> содержит информацию о документе (сведения о документе, которые не отображаются пользователю). Внутри этого элемента обязательно должен быть вложен HTML тег <title>.
Текст между <title> и </title> обеспечивает название для документа. Название документа должно содержать важные ключевые слова, чтобы поисковые системы могли включить вашу страницу в результаты поиска (по определенным запросам пользователей).
Текст между <body> и </body> описывает видимое содержимое страницы!
Текст между <h3> и </h3> (англ. heading level 2) описывает заголовок второго уровня. Поисковые системы используют ваши заголовки для индексации структуры и содержания веб-страниц. Поэтому важно использовать заголовки, чтобы показать структуру документа. Как правильно использовать заголовки от первого до шестого уровня на ваших страницах мы рассмотрим далее в учебнике в статье «Базовый HTML».
Текст между <p> и </p> (англ. HTML Paragraph Element) определяет параграф (абзац). Содержание элемента всегда начинается с новой строки.
Ниже показано как отображается вышерассмотренный пример в браузере:
Рис. 1 Пример отображения HTML документа браузером.Обращаю Ваше внимание, что все примеры, которые рассматриваются в учебнике доступны для просмотра в отдельном окне. Желательно, чтобы вы помимо вопросов и задач, которые будут приводится в конце каждой статьи создавали аналогичные (собственные примеры) и эксперементировали с ними. Это позволит Вам максимально быстро изучить и применять рассмотренный материал.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы ответьте, или найдите ответ на следующие вопросы:
- Какая основная задача языка гипертекстовой разметки?
- Какая версия языка HTML сейчас используется?
- Что такое декларация? Какая декларация используется в современном стандарте?
- В какой HTML элемент помещается видимое содержимое документа (страницы)?