Таблица основных тегов HTML
HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.
Язык HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.
Язык XHTML является более строгим вариантом HTML, он следует всем ограничениям XML и, фактически, XHTML можно воспринимать как приложение языка XML к области разметки гипертекста.
Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования.
| Основные теги | |
| ;; | Указывает программе просмотра страниц что это HTML документ. |
| ;; | Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. |
| ;; | Определяет видимую часть документа |
| Теги оглавления | |
| ;; | Помещает название документа в оглавление программы просмотра страниц |
| Атрибуты тела документа | |
| ; | Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB – пример: FF0000 – красный цвет. |
| ; | Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB – пример: 000000 – черный цвет. |
| ; | Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB – пример: 00FF00 – зеленый цвет. |
| ; | Устанавливает цвет гиперссылок на котох вы уже побывали, используя значение цвета в виде RRGGBB – пример: 333333 – серый цвет. |
| ; | Устанавливает цвет гиперссылок при нажатии. |
| Теги для форматирования текста | |
| ;; | Обрамляет предварительно отформатированный текст. |
| ;; | Создает САМЫЙ БОЛЬШОЙ заголовок |
| ;; | Создает самый маленький заголовок |
| ;; | Создает жирый текст |
| ;; | Создает наклонный текст |
| ;; | Создает текст – имитирующий стиль печатной машинки. |
| ;; | Используется для цитат, обычно наклонный текст. |
| ;; | Используется для выделения из текста слова (наклонный или жирный текст) |
| ;; | Устанавливает размер текста в пределах от 1 до 7. |
| ;; | Устанавливает цвет текста, используя значение цвета в виде RRGGBB. |
| Гиперссылки | |
| ;; | Создает гиперссылку на другие документы или часть текущего документа. |
| ; ; | Создает гиперссылку вызова почтовой программы для написания письма по указанному адресу. |
| ;; | Отмечает часть текста как цель для гипперссылок в документе. |
| ;; | Создает гиперссылку на часть текущего документа. |
| Форматирование | |
| ; | Создает новый параграф |
| ; | Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center |
| ; | Вставляет перевод строки. |
| ; ; | Создает отступы с обеих сторон текста. |
| ;; | Создает список определений. |
| ; | Определяет каждый из терминов списка |
| ; | Описывает каждое определение |
| ;; | Создает нумерованный список |
| ; | Определяет каждый элемент списка и присваивает номер |
| ;; | Создает ненумерованный список |
| ; | Предваряет каждый элемент списка и добавляет кружок или квадратик. |
| ; | Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей |
| Графические элементы | |
| ; | Добавляет изображение в HTML документ |
| ; | Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle |
| ; | Устанавливает толщину рамки вокруг изображения |
| ; | Добавляет в HTML документ горизонтальную линию. |
| ; | Устанавливает высоту(толщину) линии |
| ; | Устанавливает ширину линии, можно указать ширину в пикселах или процентах. |
| ; | Создает линию без тени. |
| ; | Задает линии определенный цвет. Значение RRGGBB. |
| Таблицы | |
| Создает таблицу. | |
| Определяет строку в таблице. | |
| Определяет отдельную ячейку в таблице. | |
| Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом) | |
| Атрибуты таблицы | |
| ; | Задает толщину рамки таблицы. |
| ; | Задает расстояние между ячейками таблицы. |
| ; | Задает расстояние между содержимым ячейки и ее рамкой. |
| ; | Устанавливает ширину таблицы в пикселах или процентах от ширины документа. |
| ; или ; | Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right. |
| ; или ; | Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom. |
| ; | Указывает кол-во столбцев которое объединено в одной ячейке. (по умолчанию=1) |
| ; | Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1) |
| ; | Не позволяет программе просмотра делать перевод строки в ячейке таблицы. |
| Фреймы | |
| ;; | Предваряет тег ; в документе, содержащем фреймы; |
| ; | Определяет строки в таблице фреймов, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы фреймов. |
| ; | Определяет столбцы в таблице фреймов, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы фреймов. |
| ; | Определяет единичный фрейм или область в таблице фреймов. |
| ;; | Определяет, что будет показано в окне браузера если он не поддерживает фреймы. |
| Атрибуты фреймов | |
| ; | Определяет какой из HTML документов будет показан во фрейме. |
| ; | Указывает Имя фрейма или области, что позволяет перенаправлять информацию в этот фреймр или область из других фреймов. |
| ; | Определяет величину отступов по левому и правому краям фрема; должно быть равно или больше 1. |
| ; | Определяет величину отступов по верхнему и нижнему краям фрейма; должно быть равно или больше 1. |
| ; | Указывает будет-ли выводится линейка прокрутки во фрейме; значение value может быть “yes,” “no,” или “auto”. Значение по умолчанию для обычных документов – auto. |
| ; | Препятствует изменению размеров фрейма. |
| Формы | |
| Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML только создает внешний интерфейс формы. | |
| ;; | Создает формы |
| ;; | Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки. |
| ; | Указывает каждый отдельный элемент меню |
| ;; | Создает ниспадающее меню |
| ; | Указывает каждый отдельный элемент меню |
| ;; | Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту. |
| ; | Создает checkbox. За тегом следует текст. |
| ; | Создает radio кнопку. За тегом следует текст. |
| ; | Создает строку для ввода текста. Параметром Size указывается длина в символах. |
| ; | Создает кнопку “Принять” |
| ; | Создает кнопку “Принять” – для этого используется изображение |
| ; | Создает кнопку “Отмена” |
Таблица основных тегов html с примерами
HTML — язык разметки, который используется в большинстве веб-страниц. Браузер интерпретирует его значения (теги) и отображает текст и элементы так, как их представляли разработчики. Без стандартизированного языка страницы сайта превращались бы в мешанину из букв, картинок и форм, которой невозможно нормально пользоваться.
Несмотря на то, что сейчас можно создавать отличные сайты на конструкторах в визуальном режиме, использование языка HTML остаётся важным навыком разработчика. Даже если вы не пишете шаблон с нуля, может возникнуть необходимость отредактировать его или вставить виджет стороннего сервиса — через HTML-код.
HTML позволяет форматировать страницы, придавая им необходимый вид. Если такой задачи нет, то знание тегов поможет отредактировать код встраиваемого виджета. Понимая структуру HTML, вы, например, можете быстро изменить размер видео или виджета и другие особенности его отображения.
Базовые теги
— тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.
— показывает браузеру тип документа, сообщает его версию и язык.
— корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.
— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, или .
— тег для оформления метаданных документа, используемых браузером для обработки страницы, а поисковиками — для индексации.
— тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег имеет несколько атрибутов, позволяющих управлять цветами.
— цвет фона документа в формате RGB.
— цвет гиперссылок, по которым уже переходили.
— цвет гиперссылок при нажатии.
— метатег, который задаёт название страницы, отображаемое на вкладке браузера.
— определяет содержимое блока с вводной информацией сайта или группой ссылок.
Форматирование текста
. . — теги заголовков, от самого большого к самому маленькому.
— жирный текст без придания важности выделенному фрагменту.
— расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.
— выделение текста курсивом без придания важности.
— зачёркивает текст, помечая его удалённым.
— отображает перечёркнутый текст.
— подчёркивает текст, визуально выделяя внесённые изменения.
— подчёркивание без дополнительного акцентирования внимания.
— расставление акцентов путём выделения фрагментов текста курсивом.
— выделение частей текста жёлтым маркером.
— имитация текста, набранного на печатной машинке.
— отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.
— подстрочное начертание символов.
— надстрочное начертание символов.
— добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.
— вывод неформатированного текста с сохранением пробелов и особенностей переносов.
— переносит текст на другую строку без создания абзаца.
— отступы с обеих сторон для оформления цитаты или врезки.
— контейнер для размещения термина и его определения.
— добавление определения понятия
— выделение термина курсивом. Последующий текст должен раскрывать понятие.
— указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.
— добавление гиперссылки в текст. Имеет обязательный атрибут href, в котором указывается ссылка или якорь. Внутри контейнера помещается текст, при нажатии на который происходит переход на другую страницу или другое место на этой же странице.
— выделение фрагмента кода с помощью шрифта monospace.
Встраивание элементов
— вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:
— выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.
— позволяет настроить в пикселях толщину рамки вокруг изображения.
— контейнер для расположения элемента без , который даёт браузеру возможность самостоятельно выбрать подходящую картинку.
— вставка звукового контента.
— вставка видео (поддерживается Ogg, WebM и MP4).
— указывает местоположение файла для , и
— контейнер, через который встраиваются мультимедийные файлы. Для передачи параметров применяется тег .
— размещает на странице горизонтальную линию. Имеет несколько атрибутов.
— устанавливает высоту линии.
— устанавливает ширину линии.
— определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на внешний источник.
— ограничивает фрагмент документа, в котором скрипт не выполняется.
Работа с таблицами
— размещает таблицу. Все остальные теги для форматирования таблиц должны находиться внутри это контейнера.
— указывает на заголовок ячейки.
— показывает нижний колонтитул.
— позволяет указать ширину и другие параметры одной или нескольких колонок.
Создание форм и кнопок
— создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.
— создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.
— формирует меню с поддержкой скроллинга.
— описывает каждый отдельный пункт меню.
— формирует поля для добавления пользовательских данных.
— выводит результаты вычислений, сделанных с помощью скрипта.
— оформляет пометку для поля, созданного тегом .
— создаёт большие поля для ввода текста.