Любой сайт - это набор html документов, связанные между собой гиперссылками. Сам документ структурирован с помощью ХТМЛ тегов, а они в свою очередь образуют из себя элементы web страницы.
В помощь разработчикам сайтов и для быстрого поиска основных тегов, мы создали Html шпаргалку по тегам и их описанием.
Базовые HTML теги
Без использования данных тегов, не обходится ни один html документ. Они задают первоначальную структуру и настройки web страницы. Исключением тут могут быть только теги комментирования и разделительной черты.
Теги заголовков создают структурированные текст, позволяющий поисковым роботам лучше ориентироваться на странице сайта.
| Тег | Описание | Парный | Одиночный |
|---|---|---|---|
<!DOCTYPE> | Указывает тип документа. | да | |
<html> | Это корневой тег html документа. | да | |
<head> | Не отображаемый технический раздел. В нем подключаются дополнительные файлы к ХТМЛ документу и устанавливаются настройки отображения документа. | да | |
<title> | Устанавливает заголовок для html страницы. | да | |
<body> | Указывает на тело документа. | да | |
<h1> | Заголовок первого уровня. | да | |
<h2> | Заголовок второго уровня. | да | |
<h3> | Заголовок третьего уровня. | да | |
<h4> | Заголовок четвертого уровня. | да | |
<h5> | Заголовок пятого уровня. | да | |
<h6> | Заголовок шестого уровня. | да | |
<p> | Устанавливает абзац. | да | |
<br> | Разделитель строк. Тег переноса строки. | да | |
<hr> | Выводит разделительную черту. | да | |
| <!-- --> | Комментарий в html разметке. | да |
Теги форматирования
Благодаря использованию тегов форматирования, разработчики сайтов могут акцентировать внимание на определенных элементах страницы. Выделять важные данные в тексте и акцентировать внимание на них.
Теги ввода/вывода и формы
Для взаимодействия пользователя с сайтом, используются теги форм и теги элементов ввода данных. Они позволяют получать данные от пользователя сайта и реагировать на них.
Вы часто видите их использование на страницах авторизации, виджетах комментирования статей и формах обратной связи.
| Тег | Описание | Парный | Одиночный |
|---|---|---|---|
<form> | Создает форму для отправки данных. | да | |
<input> | Создает поле ввода данных. | да | |
<iframe> | Создает контейнер/фрейм для вставки данных извне. | да | |
<textarea> | Создает многострочное поле ввода данных. | да | |
<button> | Создает кнопку | да | |
<select> | Создает контейнер элемента с выпадающим списком или множественным выбором. | да | |
<optgroup> | Группирует элементы тега <option> | да | |
<option> | Создает пункт для контейнера <select> | да | |
<label> | Создание текстовой метки для элемента ввода данных формы. | да | |
<fieldset> | Группировка элементов в форме. | да | |
<legend> | Создает заголовок для группы элементов формы. | да | |
<datalist> | Указывает список значений, предварительно созданных для элемента <input> | да | |
<output> | Устанавливает место вывода значений. | да |
Медиа теги
Используя меда теги (media tags ), сайты могу вставлять видео, аудио и изображения на своих страницах. Это позволяет сделать содержимое страниц более красочными и интересными для посетителя.
| Тег | Описание | Парный | Одиночный |
|---|---|---|---|
<area> | Устанавливает области изображения карты. | да | |
<audio> | Создает контейнер для вставки аудио. | да | |
<canvas> | Создает контейнер для вывода объектов созданных через JS | да | |
<figure> | Создает контейнер для группирования данных изображений. | да | |
<figcaption> | Добавляет описание для <figure> | да | |
<picture> | Создает контейнер с выбором нескольких источников изображений. | да | |
<source> | Указывает источники файлов видео, аудио или изображений. | да | |
<img> | Вставляет изображение. | да | |
<svg> | Указывает контейнер для вставки SVG элементов. | да | |
<video> | Вставляет видео | да | |
<track> | Устанавливает текстовые данные для тегов <audio> и <video> | да |
Теги навигации
Очень важными тегами при создании страниц сайта, являются именно теги навигации. Они дают возможность с легкостью переходить от одной страницы к другой, в один клик мышки.
| Тег | Описание | Парный | Одиночный |
|---|---|---|---|
<a> | Гиперссылка, ссылка, якорь. | да | |
<nav> | Создание навигации на web странице. | да |
Теги списков
Для организации читаемого текста и выделения важных моментов в статье, на помощь приходят теги списков. Они позволяют структурировать данные, показать пошаговые инструкций в очень удобном виде.
| Тег | Описание | Парный | Одиночный |
|---|---|---|---|
<ul> | Контейнер маркированного списка. | да | |
<ol> | Контейнер нумерованного списка. (с числами) | да | |
<li> | Элемент списка. | да | |
<dl> | Контейнер списка с определениями. | да | |
<dt> | Описывает термин в списке <dl> | да | |
<dd> | Определение термина в списке <dl> | да | |
<menu> | Контейнер списка меню. | да |
Теги таблицы
Теги таблицы, позволяют отобразить большое количество табличных данных в удобном виде. Разделять их на колонки и строки. Делать эти данные более читаемыми и сгруппированными. Выделять важные моменты и многое другое.
| Тег | Описание | Парный | Одиночный |
|---|---|---|---|
<table> | Создает контейнер таблицы. | да | |
<caption> | Добавляет название таблицы. | да | |
<th> | Ячейка таблицы в заглавии. | да | |
<tr> | Строка таблицы. | да | |
<td> | Ячейка таблицы. | да | |
<thead> | Группировка ячеек заглавия таблицы. | да | |
<tbody> | Группировка ячеек тела таблицы. | да | |
<tfoot> | Группировка ячеек нижней части таблицы. (подвала) | да | |
<col> | Установка стиля и ширины для одной колонки таблицы. | да | |
<colgroup> | Групповая установка стиля и ширины для колонок таблицы. | да |
Стилевые и семантические теги
Благодаря стилевым тегам, можно сделать уникальный дизайн страницы. Менять внешний вид элементов страницы, цвет, размер и стиль отображения.
Семантические теги, позволяют указывать поисковым роботам важные части web сайта. Помогая им правильно определять где находится основная часть статьи, а где второстепенные элементы. А так же позволяют акцентировать их внимание на определенных данных статьи.
| Тег | Описание | Парный | Одиночный |
|---|---|---|---|
<time> | Помечает текст внутри как время. | да | |
<style> | Определяет стили элементов html страницы. | да | |
<link> | Подключение файлов стилей html документа. | да | |
<div> | Создает блочный элемент. | да | |
<span> | Создает строчный элемент. | да | |
<header> | Задает шапку сайта или раздела. Обычно там находится заголовок | да | |
<footer> | Задает нижнюю часть сайта или раздела. | да | |
<main> | Задает основную часть html страницы. | да | |
<section> | Задает раздел страницы. | да | |
<article> | Указывает на основную часть статьи. | да | |
<aside> | Указывает на второстепенные части статьи. Такие как сайдбар и т.д. | да | |
<details> | Открывающийся при клике блок информации. | да | |
<dialog> | Устанавливает диалоговое окно. | да | |
<summary> | Создает заголовок для <details> блока. | да | |
<data> | Создает связь между человеко-читаемым текстом и машинными данными. | да |
Метатеги
Использование мета тегов в html-документах позволяет браузеру правильно отображать страницу.
| Тег | Описание | Парный | Одиночный |
|---|---|---|---|
<head> | Определяет раздел документа, для хранения информации и настроек для браузера и поисковых систем. | да | |
<meta> | Устанавливает метаданные HTML документа. | да | |
<base> | Устанавливает корневой url страницы для всех относительных ссылок в документе. | да |
Подключение скриптов и внешних приложений
Возможность подключения js скриптов и других объектов, делает html страницу более интерактивной. Это позволяет извлекать и изменять содержимое страницы без необходимости ее перезагрузки. Добавлять игры, виджеты, карты и многое другое..
| Тег | Описание | Парный | Одиночный |
|---|---|---|---|
<script> | Контейнер для указания кода, исполняемого на стороне клиента в браузере. | да | |
<noscript> | Альтернативный текст для браузеров, не поддерживающих выполнение скриптов. | да | |
<embed> | Контейнер для подключения внешнего приложения к документу. | да | |
<object> | Подключает объекты к документу. | да | |
<param> | Определяет параметры для подключаемых объектов. <object> | да |
Комментарии:
Добавить комментарий