Главная / Блог / Таблица основных тегов html с примерами

Таблица основных тегов html с примерами

Опубликовано: 15 декабря 2022

Обновлено: 22 июня 2023

Оглавление Частые вопросы Похожие статьи

312 просмотров

7 мин. чтения

Оглавление

Базовые теги
Форматирование текста
Встраивание элементов
Работа с таблицами
Создание форм и кнопок

Получить консультацию

Оставьте заявку — уточним требования и подскажем решение под вашу задачу.

Что вы получите от внедрения специализированных сервисов под HTML-теги

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

Как команда редакции структурировала обучение по HTML-тегам

Редакция запустила серию статей по верстке и решила сделать подборку сервисов, где есть наглядная таблица тегов HTML с примерами и быстрым поиском по атрибутам.

Проблема: редакторы и авторы путались в базовых тегах, путали семантические элементы и старые теги разметки, много времени уходило на ручной поиск примеров.
Критерии выбора: наличие структурированной справки по тегам, фильтры по семантике и поддержке браузерами, готовые примеры кода и возможность быстро встроить их в редакционный гайд.
Результат: сократилось время подготовки статей по верстке, повысилось качество разметки, а таблица тегов с примерами стала единым источником правды для всей команды.

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

HTML позволяет вам форматировать страницы, чтобы придать им желаемый вид. Если такой задачи нет, знание тегов поможет отредактировать код встроенного виджета. Например, поняв структуру HTML, вы сможете быстро изменить размер видео или виджета и другие аспекты отображения.

Базовые теги

<!—…—> — тег для добавления комментариев в документ.

<!DOCTYPE> — показывает браузеру тип документа, сообщает его версию и язык.

<html></html> — корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.

<head></head>— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, <title> или <style>.

<body></body> — тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег <body> имеет несколько атрибутов, позволяющих управлять цветами.

<body bgcolor=?> — цвет фона документа в формате RGB.

<body text=?> — цвет текста.

<body link=?> — цвет гиперссылок.

<body vlink=?> — цвет гиперссылок, по которым уже переходили.

<body alink=?> — цвет гиперссылок при нажатии.

<title></title>— метатег, который задаёт название страницы, отображаемое на вкладке браузера.

<header></header> — определяет содержимое блока с вводной информацией сайта или группой ссылок.

Форматирование текста

<h1></h1>……<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>.

<hr> — размещает на странице горизонтальную линию. Имеет несколько атрибутов.

<hr size=?> — устанавливает высоту линии.

<hr width=?> — устанавливает ширину линии.

<hr noshade> — убирает тень у линии.

<hr color=?> — задаёт цвет линии.

Работа с таблицами

<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> — создаёт большие поля для ввода текста.

FAQ по выбору и использованию сервисов с таблицами HTML-тегов

Как выбирать сервис под задачу обучения и документации по HTML-тегам?

Смотрите не только на полноту базы, но и на структуру: отдельные группы под семантику, форму, мультимедиа, а также на наличие блока, где наглядно показаны основные теги html с примерами в реальном DOM. Важно, чтобы сервис поддерживал быстрый поиск по тегу, атрибутам и типовым сценариям (например, навигация, статьи, формы).

Как проверить совместимость и актуальность сведений в сервисе по тегам?

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

Что учитывать при миграции с одной базы тегов на другую?

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

Как оценивать цену и ограничения таких сервисов?

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

Какие требования предъявлять к безопасности и работе с данными?

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

Полезные переходы