Что такое язык HTML?
HTML (Hypertext Markup Language) – это код, используемый для того, чтобы структурировать и отображать веб-страницы и ее контент. Благодаря языку разметок браузер способен отобразить текст и элементы так, как планировали разработчики. Если бы не основные HTML теги, странички сайта превратились бы в хаотичное скопление элементов, которыми было бы сложно воспользоваться. С аббревиатурой HTML часто встречаются специалисты, которые занимаются созданием сайтов, наполнением их контентом и продвижением в поисковых системах. Этот язык часто используется для форматирования текстового контента в копирайтинге, а также подключения виджетов и аналитических систем в SEO-продвижении.
Список HTML тегов
HTML 5.2. теги (имя тега, описание, значение свойства display)
| <html></html> | корневой элемент html-документа | block |
| <head></head> | контейнер для метаданных html-документа | none |
| <title></title> | заголовок / имя html-документа | none |
| <base> | базовый url-адрес, относительно которого вычисляются относительные адреса | none |
| <link> | подключает внешние таблицы стилей | none |
| <meta> | мета-данные веб-страницы | none |
| <style></style> | подключает таблицы стилей | none |
| <body></body> | тело html-документа | block |
| <article></article> | раздел контента, образующий независимую часть документа или сайта | block |
| <section></section> | логическая область (раздел) страницы, обычно с заголовком | block |
| <nav></nav> | раздел документа, содержащий навигационные ссылки по сайту | block |
| <aside></aside> | контент страницы, имеющий косвенное отношение к основному контенту | block |
| <h1></h1> - <h6></h6> | заголовки шести уровней | block |
| <header></header> | секция для вводной информации сайта или группы навигационных ссылок | block |
| <footer></footer> | секция для нижнего колонтитула документа или раздела | block |
| <p></p> | параграфы в тексте | block |
| <address></address> | контактные данные автора документа или статьи | block |
| <hr> | горизонтальная линия | block |
| <pre></pre> | выводит текст с пробелами и переносами | block |
| <blockquote></blockquote> | большая цитата | block |
| <ol></ol> | упорядоченный нумерованный список | block |
| <ul></ul> | маркированный список | block |
| <li></li> | элемент списка | list-item |
| <dl></dl> | контейнер для термина и его описания | block |
| <dt></dt> | задаёт термин | block |
| <dd></dd> | расшифровывает термин | block |
| <figure></figure> | независимый контейнер для такого контента как изображения, диаграммы и т.п. | block |
| <figcaption></figcaption> | заголовок для элемента <figure> | block |
| <main></main> | контейнер для уникального основного содержимого в пределах одной страницы сайта | block |
| <div></div> | контейнер для разделов html-документа, группирует блочные элементы | block |
| <table></table> | html-таблица | table |
| <caption></caption> | подпись к таблице | table-caption |
| <colgroup></colgroup> | контейнер для одного или нескольких <col> | table-column-group |
| <col> | выбирает для форматирования столбцы | table-column |
| <thead></thead> | блок заголовков таблицы | table-header-group |
| <tbody></tbody> | тело таблицы | table-row-group |
| <tfoot></tfoot> | нижний колонтитул таблицы | table-footer-group |
| <tr></tr> | строка таблицы | table-row |
| <th></th> | заголовок столбца таблицы | table-cell |
| <td></td> | ячейка таблицы | table-cell |
| <details></details> | контейнер с дополнительными сведениями, который можно открыть или закрыть | block |
| <summary></summary> | видимый заголовок для элемента <details> | block |
| <dialog></dialog> | диалоговое окно, инспектор или окно | block |
| <script></script> | подключает сценарии к странице | none |
| <noscript></noscript> | секция, не поддерживающая скрипт | block |
| <template></template> | фрагменты HTML-кода, которые могут быть клонированы и вставлены в документ скриптом | none |
| <canvas></canvas> | холст-контейнер для динамического отображения изображений | inline-block |
| <picture></picture> | контейнер для одного <img> и ноль или больше <source> | inline |
| <source> | местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio> | none |
| <img> | html-изображения | inline |
| <iframe></iframe> | создаёт встроенный фрейм | block |
| <embed> | встраивает внешний интерактивный контент или плагин | inline-block |
| <object></object> | контейнер для встраивания мультимедиа | inline-block |
| <param> | задаёт параметры для плагинов, встраиваемых с помощью элемента <object> | none |
| <audio></audio> | добавляет аудио-файлы | inline-block |
| <video></video> | добавляет видео-файлы | inline-block |
| <track> | субтитры для элементов <audio> и <video> | none |
| <map></map> | активные области на карте-изображении | inline |
| <area> | гиперссылка с текстом или активная область внутри карты-изображения | inline |
| <a></a> | гиперссылка | inline |
| <em></em> | выделяет важные фрагменты текста курсивом | inline |
| <strong></strong> | выделяет полужирным важный текст | inline |
| <small></small> | отображает текст шрифтом меньшего размера | inline |
| <s></s> | перечёркивает неактуальный текст | inline |
| <cite></cite> | источник цитирования | inline |
| <q></q> | краткая цитата | inline |
| <dfn></dfn> | выделяет термин курсивом | inline |
| <abbr></abbr> | аббревиатура или акроним | none |
| <ruby></ruby> | контейнер для Восточно-Азиатских символов и их расшифровки | inline |
| <rb></rb> | обертка для аннотации | inline |
| <rp></rp> | тег для скобок вокруг символов | none |
| <rt></rt> | расшифровка символов | block |
| <rtc></rtc> | обертка для дополнительной аннотации | inline |
| <data></data> | связывает содержимое с машиночитаемым переводом | inline |
| <time></time> | дата / время документа или статьи | inline |
| <code></code> | фрагмент программного кода | inline |
| <var></var> | выделяет переменные из программ | inline |
| <samp></samp> | результат выполнения сценария | inline |
| <kbd></kbd> | текст, вводимый пользователем с клавиатуры | inline |
| <sub></sub> | подстрочное написание символов | inline |
| <sup></sup> | надстрочное написание символов | inline |
| <i></i> | выделяет текст курсивом без акцента | inline |
| <b></b> | задает полужирное начертание отрывка текста, без дополнительного акцента | inline |
| <u></u> | выделяет отрывок текста подчёркиванием, без дополнительного акцента | inline |
| <mark></mark> | выделяет фрагменты текста желтым фоном | inline |
| <bdi></bdi> | изолирует текст, читаемый справа налево | inline |
| <bdo></bdo> | задаёт направление написания текста | inline |
| <span></span> | контейнер для строчных элементов | inline |
| <br> | перенос текста на новую строку | none |
| <wbr> | возможное место разрыва длинной строки | none |
| <del></del> | перечёркивает текст, помечая как удаленный | inline |
| <ins></ins> | подчёркивает изменения в тексте | inline |
| <form></form> | html-форма | block |
| <label></label> | текстовая метка для элемента <input> | inline |
| <input> | многофункциональные поля формы | inline-block |
| <button></button> | интерактивная кнопка | inline-block |
| <select></select> | элемент управления с выбором значений из предложенных вариантов <option> | inline-block |
| <datalist></datalist> | контейнер для выпадающего списка элемента <input> с <option>-значениями | none |
| <optgroup></optgroup> | контейнер с заголовком для группы элементов <option> | block |
| <option></option> | вариант (опция) в раскрывающемся списке | block |
| <textarea> | многострочное поле формы | inline-block |
| <output></output> | поле для вывода результата вычисления | inline |
| <progress></progress> | индикатор выполнения задачи | inline-block |
| <meter></meter> | индикатор измерения в заданном диапазоне | inline-block |
| <fieldset></fieldset> | группирует связанные элементы в форме | block |
| <legend></legend> | заголовок элементов формы, сгруппированных с помощью <fieldset> | block |
Точная дата создания языка HTML неизвестна, считается, что он возник в периоды с 1986 по 1991 годы. Сперва его создали для тех, кто не разбирается в верстке и программировании: сложнейшая разметочная система SGML была упрощена до тегов, которые стали известны как базовые команды HTML. Даже сейчас 11 из 18 элементов до сих пор используются в новых версиях тегов. Хотя теперь сайты можно собрать на специальных конструкторах, использование HTML все еще остается одним из важнейших умений разработчика. Даже если нет необходимости писать шаблон с нуля, может появиться необходимость работы с ним при взаимодействии с контентом сайта.
Формально HTML считается языком гипертекстовой разметки текста. Он необходим для размещения на веб-странице не только текстового контента, но и картинок, таблиц и видеороликов. Как только вы посещаете сайт через компьютер или смартфон, браузер загружает HTML-файл с данными о структуре и контенте веб-странички. Базовые теги HTML показывают браузеру как отобразить содержимое сайта. Они начинаются и заканчиваются угловыми скобками, либо знаками «больше» и «меньше». Буквы между скобками или знаками называются содержимым элемента, и выглядят строки кода следующим образом:
<h1>Заголовок</h1>
<p>Текстовый абзац <a href=»…»>с гиперссылкой</a>.</p>
<ul>
<li>Элемент ненумерованного перечисления</li>
<li>Еще один элемент ненумерованного перечисления</li>
</ul>
HTML команды помогают выстроить визуальную основу веб-страницы, но за сам «запуск» сайта не отвечают. Они лишь показывают расположение элементов в заданном разработчиком виде. Самые первые сайты были созданы фактически только на одном HTML-коде, с незначительным использованием скриптов на JavaScript. Сейчас HTML теги используются для отрисовки веб-странички, наведения внешней красоты при помощи CSS и добавления логики через JavaScript. Данный язык обладает некоторыми элементами оформления, но возможности все же довольно ограничены (цвет шрифта, цвет строки или столбца). Кроме того, в HTML-файле возможно прописать следующие элементы:
- гиперссылки;
- таблицы;
- изображения;
- блоки;
- абзацы;
- формы;
- заголовки.
Удобство HTML смогло упростить разработчикам задачу: теперь интегрировать различные сервисы на веб-страницу сайта стало гораздо проще. Из-за наличия некоторых возможностей может показаться, что HTML – это полноправный язык программирования, на самом деле это не так. Теги языка HTML определяют корректное отображение веб-страницы. А остальные функции и возможности обеспечивают подключаемые программные модули.
На информационно-справочном сайте Sprav.uz вы найдете информацию не только про ключевые теги HTML, но и сведения по компаниям на территории Узбекистана. Посетив страницы нашего информационного портала, вы сможете найти контактный телефон, адрес и время работы нужной вам организации. Сайт оснащен удобным пользовательским навигатором, который поможет отыскать нужные сведения или полезную информацию.
