| <picture></pictire> | контейнер для одного <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 |
| <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 |
| Тег | Описание |
|---|---|
| <acronym> | Не поддерживается в HTML5. Используйте <abbr> вместо этого. Определяет акроним |
| <abbr> | Определяет аббревиатуру или акроним |
| <address> | Определяет контактную информацию для автора / владельца документа / статьи |
| <b> | Определяет жирный текст |
| <bdi> | Изолирует часть текста, который может быть отформатирован в другом направлении от прочего текста за его пределами |
| <bdo> | Переопределяет текущее направление текста |
| <big> | Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет большой текст |
| <blockquote> | Определяет раздел, что цитируется с другого источника |
| <center> | Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет центрирование текста |
| <cite> | Определяет название произведения |
| <code> | Определяет фрагмент компьютерного кода |
| <del> | Определяет удалённый с документа текст |
| <dfn> | Представляет определяющий экземпляр термина |
| <em> | Определяет подчёркнутый текст |
| <font> | Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет шрифт, цвет и размер для текста |
| <i> | Определяет часть текста альтернативным голосом или настроением |
| <ins> | Определяет текст, который был вставлен в документ |
| <kbd> | Определяет ввод с клавиатуры |
| <mark> | Определяет отмеченный / выделенный текст |
| <meter> | Определяет скалярное измерение в границах известного диапазона (датчик) |
| <pre> | Определяет предварительно отформатированный текст |
| <progress> | Представляет ход выполнения задания |
| <q> | Определяет короткую цитату |
| <rp> | Определяет, что отображать в браузерах, которые не поддерживают ruby аннотации |
| <rt> | Определяет объяснение / произношение символов (для восточноазиатской типографики) |
| <ruby> | Определяет аннотацию ruby (для восточноазиатской типографики) |
| <s> | Определяет текст, которій больше не является правильным |
| <samp> | Определяет исходные данные с компьютерной программы |
| <small> | Определяет меньший текст |
| <strike> | Не поддерживается в HTML5. Используйте <del> или <s> вместо этого. Определяет перечёркнутый текст |
| <strong> | Определяет важный текст |
| <sub> | Определяет подстрочный текст (нижний индекс) |
| <sup> | Определяет надстрочный текст (верхний индекс) |
| <template> | Определяет шаблон |
| <time> | Определяет дату / время |
| <tt> | Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет текст телетайпа |
| <u> | Определяет текст, который должен быть стилистически отличным от обычного текста |
| <var> | Определяет переменную |
| <wbr> | Определяет возможный разрыв строки |
HTML5 | htmlbook.ru
HTML5 | htmlbook.ruОпределяет содержание сайта вроде новости, статьи, записи блога, форума или др.
Определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации.
Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице.
Указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста.
Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства.
Создает команду в виде переключателя, флажка или обычной кнопки.
Создает список вариантов, которые можно выбирать при наборе в текстовом поле.
Используется для хранения информации, которую можно скрыть или показать по требованию пользователя.
Используется для загрузки и отображения объектов.
Содержит описание для тега <figure>.
Используется для группирования любых элементов, например, изображений и подписей к ним.
Определяет «подвал» сайта или раздела.
Определяет «шапку» сайта или раздела.
Используется для группирования заголовков веб-страницы или раздела.
Используется для генерации пары ключей — закрытого и открытого.
Элемент <main> предназначен для основного содержимого документа. Содержимое должно быть уникальным и не включать типовые блоки вроде шапки сайта, подвала, навигации, боковой панели, формы поиска и т. п.
Помечает текст как выделенный.
Отображает список меню.
Используется для вывода значения в некотором известном диапазоне.
Группирует ссылки навигации по сайту.
Определяет область для вывода, преимущественно с помощью скриптов.
Используется для отображения прогресса завершенности задачи.
Используется для вывода текста в браузерах, которые не поддерживают тег <ruby>.
Добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>.
Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста.
Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др.
Вставляет звуковой или видеофайл для тегов <audio> и <video>.
Указывает заголовок для тега <details>, по которому можно щелкать для разворачивания/сворачивания информации.
Помечает текст внутри тега как дату, время или оба значения.
Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице.
Указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.
О сайте
Помощь
Копирование материалов
Борьба с ошибками
Технологии
Поисковый плагин
Основные разделы
Статьи
Блог
Практикум
Цифровые книги
Форум
HTML
Самоучитель HTML
XHTML
Справочник по HTML
HTML5
CSS
Самоучитель CSS
Справочник по CSS
Рецепты CSS
CSS3
Сайт
Вёрстка
Макеты
Веб-сервер
htmlbook.ru использует Друпал хостинг it-patrol© 2002–2020 Влад Мержевич, по всем вопросам пишите по адресу [email protected]
Подпишитесь на материалы сайта по RSS
Учебник 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 5 для современной верстки сайтов и блогов
Здравствуйте гости данного блога и мои верные подписчики. С таким скоростным развитием технологий, науки и программирования, как это можно наблюдать сегодня, неудивительно, что запросы потребителей растут. А это значит, что рано или поздно появляются усовершенствованные версии программ, оборудования и главное языков.
Прочтение статьи даст вам четкое понимание границ между html и html 5. К тому же вы сможете оперировать полученными знаниями и верстать все свои сайты уже используя теги html 5.
Я хочу посвятить данную публикацию обсуждению html 5. Мы разберем с вами главные особенности платформы, новые элементы языка и их отличие от старых, а также рассмотрим конкретные примеры кода. А теперь перейдем непосредственно к самому соку!
Главнокомандующий разметкой сайтов, знаменитый html
После прочтения предыдущих моих публикаций, а также других источников айтишной тематики я думаю, что с уверенностью могу назвать вас «гуру-мастерами». Ведь вам не составит никакого труда рассказать, что из себя представляет язык html и для чего он был создан. Вы молодцы!
Новичкам же в данной области знаний не стоит волноваться. Я специально повторю главные определения.
Итак, для начала стоит запомнить, что html – это язык разметки гипертекста, т.е. текста, в котором содержатся связанные между собой элементы текстового, видео- , аудио- и графического форматов. Данный инструмент необходим для оформления структуры сайтов, форматирования внешнего вида страниц и указания расположения объектов на ней.
Для управления контентом сайта используются теги языка. Что же означает «тег» и для чего он нужен?
Тег – это единица языка разметки, которая способствует заданию на странице сайта определенного отображения конкретного объекта, а также указания его вида (ссылка, картинка и другое).
Элементы языка бывают одиночными и контейнерами (их еще обычно называют парными). Они различаются только тем, что парные внутри себя могут содержать другие элементы: теги или текст.
Каждый элемент обсуждаемого веб-языка имеет свой набор атрибутов. «Еще один термин? А он для чего нужен?» – спросите вы. Увы, но без терминологии никак.
Атрибуты нужны для расширения спектра возможностей отдельного тега, а также для более гибкого управления внешним видом контейнеров. Безусловно, элементы языка разметки спокойно могут существовать и без определения атрибутов. Тогда браузер будет задавать им форматирование по умолчанию.
Ниже я прикрепил таблицу с примерами парных и одиночных распространенных тегов html с их наиболее используемыми атрибутами. К сожалению, привести атрибутов полный список сложно, их слишком много. Для этого лучше обращаться к спецификациям языка.| Одиночные теги | |
| <meta charset=»utf-8″ name = «GENERATOR» content = «Microsoft FrontPage 4.0»> | В данном примере представлен одиночный тег meta, который содержит в себе неотображаемую в браузере информацию. Charset, name и content – это атрибуты элемента, отвечающие соответственно за кодировку документа, наименование метатега и установку значения, заданного до этого в имени. |
| <img src=»image/cars.jpeg» alt=»BMW»> | Тег отвечает за отображение графических файлов на страницах веб-ресурсов. При помощи атрибута src задается путь к самой картинке, width задает ширину объекта, а height – высоту, alt предназначен для вывода альтернативного текста в случае невозможности загрузить изображение. |
| Парные теги | |
| <a href= «tip.html» target=»_blank» title=» Нажмите на ссылку и она откроется в новой вкладке»> Как правильно приготовить запеканку?</a> | Тег создает анкор (т.е. ссылку). В href указывается адрес файла, на который произойдет переход, target задает, как именно будет загружаться открытая ссылка (в данном примере она откроется в новой вкладке), title отвечает за всплывающую подсказку при наведении на анкор. |
Близкий родственник языка html
Как уже рассказывалось в предыдущих моих статьях, не стоит путать html и html 5. Html 5 хоть и в каком-то смысле «родственник» html, но это совершенно новая платформа, основная задача которой поддерживать аудио- и видеофайлы, анимации, отображение геолокаций и многое другое.
Данная спецификация оснащает веб-страницы новыми возможностями и сообщает DOM (объектная модель документа) о наличии новых объектов на ней. Это ускоряет работу загрузки страницы и упрощает работу браузеров.
Огромным преимуществом для разработчиков является то, что с появлением html 5 ничего переучивать не нужно. Он поддерживает все теги html 4 и дополняет их современными. Добавлю также к этому еще один положительный факт. С появлением таких элементов, как <video> и <audio>, отпала необходимость использовать устаревшие теги поддержки мультимедиа. К ним относятся: <bgsound>, <dir>, <rb>, <applet> и другие.
А теперь я хочу перечислить основные теги спецификации, к которым относятся article, aside и другие, а также описать для чего они были созданы.
| Тег | Описание |
| <article> | Задает наименование статьи, объявления, страницы сайта и т.д. Атрибутов не имеет. |
| <aside> | Определяет боковой блок для размещения в нем карты сайта, рекламы, ссылок на ресурсы и т.д. Можно использовать универсальные атрибуты. |
| <canvas> | Полезный элемент для создания при помощи JavaScript анимаций, рисунков, а также редактирования имеющихся картинок. Поддерживает как уникальные атрибуты, так и события. |
| <figure> | Основная задача тега: группировать разные элементы в единое целое. Это может быть, например, текст и рисунок. |
Семантические теги
С появлением платформы html 5 появились и семантические теги. Сейчас простым языком объясню, что это такое.
Ранее при написании веб-сервисов с удобным интерфейсом и выделением шапки сайта, его основной части и «подвала» (место внизу страницы для дополнительной информации или указания авторства) использовалась блочная верстка при помощи div-ов.
Может это и было удобно с одной стороны для девелоперов, однако поисковым системам, а также браузерам приходилось туго. Поэтому было найдено решение в виде семантических тегов.
Эти элементы всего лишь стандартизируют основные единицы сайта едиными для всех ресурсов наименованиями тегов. К ним относятся <header>, <footer> и <nav>. <header> отвечает за определение на сайте его заголовка или заголовка текста, <footer> – за «подвал» внизу интернет-страницы, а <nav> – за навигацию сайта.
Для усвоения материала хочу, чтоб вы опробовали практический пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ваш сайт</title>
</head>
<body>
<header>
<h2>Блог для айтишников</h2>
</header>
<nav>
<ul>
<li>Пункт меню 1</li>
<li>Пункт меню 2</li>
</ul>
</nav>
<article>
<header>
<h3>Заголовок публикации</h3>
<p><a href="#">Автор </a>. Всего комментариев: 6 </p>
</header>
<p>Текст первой статьи</p>
</article>
<footer>
<p>Copyright любимый блогер</p>
</footer>
</body>
</html> |
<!DOCTYPE HTML> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /> <title>Ваш сайт</title> </head> <body> <header> <h2>Блог для айтишников</h2> </header> <nav> <ul> <li>Пункт меню 1</li> <li>Пункт меню 2</li> </ul> </nav> <article> <header> <h3>Заголовок публикации</h3> <p><a href=»#»>Автор </a>. Всего комментариев: 6 </p> </header> <p>Текст первой статьи</p> </article> <footer> <p>Copyright любимый блогер</p> </footer> </body> </html>
Данный пример показывает удобство структурирования кода при помощи html 5. Хочу отметить, что на сегодняшний день уважающие себя разработчики используют в своих веб-ресурсах спецификацию html 5 и css3. Они улучшают взаимодействие браузера с сайтом, а также оптимизируют работу поисковых роботов.
Ну что ж. Я рассказал все, что вам нужно знать на начальных стадиях изучения языка html. Если вы узнали что-то новое для себя, то подписывайтесь на обновления моего блога и делитесь ссылочкой с друзьями. Пока-пока!
С уважением, Роман Чуешов
Загрузка…
Прочитано: 324 раз
Таблица основных тегов html с примерами
Несмотря на то, что сейчас можно создавать отличные сайты на конструкторах в визуальном режиме, использование языка HTML остаётся важным навыком разработчика. Даже если вы не пишете шаблон с нуля, может возникнуть необходимость отредактировать его или вставить виджет стороннего сервиса — через HTML-код.
HTML позволяет форматировать страницы, придавая им необходимый вид. Если такой задачи нет, то знание тегов поможет отредактировать код встраиваемого виджета. Понимая структуру HTML, вы, например, можете быстро изменить размер видео или виджета и другие особенности его отображения.
Базовые теги
<!—…—> — тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.
<!DOCTYPE> — показывает браузеру тип документа, сообщает его версию и язык.
<html></html> — корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.
<head></head>— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, <title> или <style>.
<meta> — тег для оформления метаданных документа, используемых браузером для обработки страницы, а поисковиками — для индексации.
<body></body> — тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег <body> имеет несколько атрибутов, позволяющих управлять цветами.
<body bgcolor=?> — цвет фона документа в формате RGB.
<body text=?> — цвет текста.
<body link=?> — цвет гиперссылок.
<body vlink=?> — цвет гиперссылок, по которым уже переходили.
<body alink=?> — цвет гиперссылок при нажатии.
<title></title>— метатег, который задаёт название страницы, отображаемое на вкладке браузера.
<header></header> — определяет содержимое блока с вводной информацией сайта или группой ссылок.
Форматирование текста
<h2></h2>……<h6></h6>. — теги заголовков, от самого большого к самому маленькому.
<b></b> — жирный текст без придания важности выделенному фрагменту.
<strong></strong> — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.
<i></i> — выделение текста курсивом без придания важности.
<del></del> — зачёркивает текст, помечая его удалённым.
<s></s> — отображает перечёркнутый текст.
<ins></ins> — подчёркивает текст, визуально выделяя внесённые изменения.
<u> — подчёркивание без дополнительного акцентирования внимания.
<em></em> — расставление акцентов путём выделения фрагментов текста курсивом.
<mark></mark> — выделение частей текста жёлтым маркером.
<tt></tt> — имитация текста, набранного на печатной машинке.
<small></small> — отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.
<sub></sub> — подстрочное начертание символов.
<sup></sup> — надстрочное начертание символов.
<cite></cite> — оформление цитат.
<address> — добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.
<pre></pre> — вывод неформатированного текста с сохранением пробелов и особенностей переносов.
<p></p> — контейнер для абзаца.
<br> — переносит текст на другую строку без создания абзаца.
<blockquote> </blockquote> — отступы с обеих сторон для оформления цитаты или врезки.
<q></q> — краткое цитирование.
<dl></dl> — контейнер для размещения термина и его определения.
<dt> — добавление термина.
<dd> — добавление определения понятия
<dfn> — выделение термина курсивом. Последующий текст должен раскрывать понятие.
<abbr> — указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.
<ol></ol> — список с цифрами.
<ul></ul> — список со значками.
<li> — отметка каждого элемента перечня (цифра или значок в зависимости от типа списка).
<a></a> — добавление гиперссылки в текст. Имеет обязательный атрибут href, в котором указывается ссылка или якорь. Внутри контейнера помещается текст, при нажатии на который происходит переход на другую страницу или другое место на этой же странице.
<code></code> — выделение фрагмента кода с помощью шрифта monospace.
Встраивание элементов
<img></img> — вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:
<img src=»name» align=?> — выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.
<img src=»name» border=?> — позволяет настроить в пикселях толщину рамки вокруг изображения.
<picture></picture> — контейнер для расположения элемента <img> без <source>, который даёт браузеру возможность самостоятельно выбрать подходящую картинку.
<audio></audio> — вставка звукового контента.
<video></video> — вставка видео (поддерживается Ogg, WebM и MP4).
<source></source> — указывает местоположение файла для <video>, <audio> и <picture>
<track> — формирует субтитры для <video> и <audio>.
<object></object> — контейнер, через который встраиваются мультимедийные файлы. Для передачи параметров применяется тег <param>.
<hr> — размещает на странице горизонтальную линию. Имеет несколько атрибутов.
<hr size=?> — устанавливает высоту линии.
<hr width=?> — устанавливает ширину линии.
<hr noshade> — убирает тень у линии.
<hr color=?> — задаёт цвет линии.
<script></script> — определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на внешний источник.
<noscript></noscript> — ограничивает фрагмент документа, в котором скрипт не выполняется.
Работа с таблицами
<table></table> — размещает таблицу. Все остальные теги для форматирования таблиц должны находиться внутри это контейнера.
<thead></thead> — определяет заголовок.
<tbody></tbody> — отмечает тело таблицы.
<td></td> — создаёт одну ячейку.
<th></th> — указывает на заголовок ячейки.
<tr> — создание одной строки.
<tfoot></tfoot> — показывает нижний колонтитул.
<caption></caption> — вставляет подпись. Указывается после тега <table>.
<col> — позволяет указать ширину и другие параметры одной или нескольких колонок.
Создание форм и кнопок
<form></form> — создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.
<button></button> — создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.
<select multiple name=»NAME» size=?></select> — формирует меню с поддержкой скроллинга.
<select name=»NAME»></select> — создаёт ниспадающее меню.
<option></option> — описывает каждый отдельный пункт меню.
<input> — формирует поля для добавления пользовательских данных.
<output> — выводит результаты вычислений, сделанных с помощью скрипта.
<label> — оформляет пометку для поля, созданного тегом <input>.
<textarea></textarea> — создаёт большие поля для ввода текста.