Что такое тег html
Тег является контейнером, который заключает в себе все содержимое веб-страницы, включая теги и . Открывающий и закрывающий теги в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, тег идет в документе вторым, после определения типа документа (Document Type Definition, DTD), устанавливаемого через элемент . Закрывающий тег должен всегда стоять в документе последним.
Синтаксис
Атрибуты
title Добавляет всплывающую подсказку на веб-страницу. manifest Указывает файл манифеста, необходимый для создания оффлайнового приложения. xmlns Указывает пространство имен для XHTML-документов.
Также для этого тега доступны универсальные атрибуты.
HTML теги
Теги это строительные блоки в HTML. Все что можно увидеть на веб-странице и с чем можно взаимодействовать реализовано при помощи тегов HTML.
В данном справочнике содержится информация обо всех тегах HTML 4.01 и HTML5 с описанием, примерами и атрибутами.
Базовые теги
Вставляет комментарии | |
body | Определяет тело HTML документа |
br | Вставляет разрыв строки |
DOCTYPE | Декларация типа HTML документа |
h1-h6 | Определяют HTML заголовки |
hr | Определяет тематический разрыв контента |
html | Определяет, что это HTML-документ |
p | Определяет текстовый параграф |
title | Определяет титульный заголовок страницы |
Ссылки
a | Определяет гипертекстовую ссылку |
link | Определяет ссылку на внешний ресурс |
nav | Определяет набор ссылок навигации |
Форматирование
abbr | Определяет аббревиатуру |
acronym | Определяет акроним |
address | Определяет информацию об авторе статьи или документа |
b | Определяет жирное начертание текста |
bdi | Изолирует текст от изменения направления вывода |
bdo | Устанавливает направление вывода текста |
big | Увеличивает размер текста |
blockquote | Определяет цитату внутри документа |
center | Используется для выравнивания текста по центру |
cite | Определяет название работы, цитату или сноску на другой документ |
code | Определяет программный код |
del | Определяет удаленный текст |
dfn | Определяет первое появление нового термина |
em | Определяет акцентированный текст |
font | Определяет характеристики шрифта текст |
i | Устанавливает начертание текста курсивом |
ins | Определяет новый добавленный текст |
kbd | Определяет текст, набранный на клавиатуре |
mark | Определяет выделенный текст |
meter | Определяет оценочный индикатор |
pre | Определяет заранее форматированный текст |
progress | Определяет индикатор прогресса выполнения задачи |
q | Определяет короткую цитату внутри документа |
rp | Определяет текст для вывода в браузерах, не поддерживающих элемент |
rt | Определяет небольшую аннотацию к тексту |
ruby | Предназначен для добавления небольшой аннотации |
s | Определяет нерелевантный текст |
samp | Определяет текст, который является результатом вывода компьютерной программы |
small | Уменьшает размер текста |
strike | Определяет перечеркнутый текст |
strong | Определяет важный текст |
sub | Определяет текст в виде нижнего индекса |
sup | Определяет текст в виде верхнего индекса |
time | Определяет дату/время |
tt | Определяет телетайпный текст |
u | Определяет подчеркнутый текст |
var | Определяет переменную компьютерной программы |
wbr | Определяет место для переноса строки в тексте |
Программные объекты
applet | Вставляет в код страницы Java апплет |
embed | Определяет контейнер для внешнего приложения |
noscript | Определяет контент, который будет отображаться, если браузер не поддерживает скрипты |
object | Вставляет в код страницы программный объект |
param | Определяет параметры для программных объектов |
script | Определяет скрипты, исполняемые на стороне пользователя |
Изображения
area | Определяет активные области в карте-изображении |
canvas | Определяет область, в которой можно рисовать при помощи скриптов |
figcaption | Определяет подпись к элементу |
figure | Используется для группирования различных самодостаточных элементов |
img | Вставляет изображение |
map | Определяет карту-изображение |
Семантика и стили
article | Определяет автономный контент |
aside | Определяет блок сбоку от основного контента |
details | Определяет дополнительную информацию |
dialog | Создает диалоговое окно |
div | Определяет блок кода HTML документа |
footer | Определяет «подвал» документа или раздела |
header | Определяет «шапку» документа или раздела |
main | Определяет основное содержимое документа |
section | Определяет раздел документа |
span | Используется для группирования строчных элементов |
style | Определяет CSS стили на уровне веб-страницы |
summary | Определяет заголовок для элемента |
Аудио и видео
audio | Позволяет в браузере проигрывать звуковые файлы |
source | Определяет медиа ресурс для медиа элементов |
track | Определяет текстовую дорожку для медиа элементов |
video | Позволяет в браузере проигрывать видео файлы |
Мета-информация
base | Определяет базовые URL для ссылок на странице |
basefont | Определяет цвет, размер и шрифт текста по умолчанию |
head | Является контейнером для всех головных элементов документа |
meta | Определяет мета-информацию о HTML документе |
Формы и элементы ввода
button | Определяет кнопку формы |
datalist | Определяет предопределенные варианты значений для элемента |
fieldset | Используется для группирования родственных элементов формы |
form | Используется для создания HTML форм |
input | Определяет поле ввода HTML формы |
keygen | Определяет поле-генератор ключей |
label | Определяет метку для элемента |
legend | Определяет заголовок для элемента |
optgroup | Используется для группирования родственных вариантов выбора |
option | Определяет отдельные пункты в выпадающем списке выбора |
output | Представляет результаты вычислительных операций |
select | Используется для создания выпадающего списка |
textarea | Определяет многострочное текстовое поле ввода |
Таблицы
caption | Определяет пояснительный заголовок таблицы |
col | Определяет свойства для каждого столбца таблицы |
colgroup | Определяет группу из одного или более столбцов таблицы для форматирования |
table | Определяет HTML таблицу |
tbody | Группирует основное содержимое HTML таблицы |
td | Определяет стандартную ячейку HTML таблицы |
tfoot | Группирует содержимое нижнего колонтитула HTML таблицы |
th | Определяет заголовочную ячейку HTML таблицы |
thead | Группирует содержимое верхнего колонтитула HTML таблицы |
tr | Определяет строку HTML таблицы |
Списки
dd | Используется для создания определения термина в списке определений |
dir | Определяет список директорий (системных папок) |
dl | Создает список определений |
dt | Создает термин в списке определений |
li | Создает элемент списка |
menu | Определяет список/меню команд |
menuitem | Определяет команду/пункт меню |
ol | Создает упорядоченный (нумерованный) список |
ul | Создает неупорядоченный (маркированный) список |
Фреймы
frame | Определяет фрейм внутри фреймовой структуры |
frameset | Определяет фреймовую структуру |
iframe | Определяет встроенный фрейм |
noframes | Определяет информацию, которая выводится, когда нет поддержки фреймов |
Основные HTML-теги
Тег — это специальное зарезервированное слово, заключённое в угловые скобки (например, ). Тег — основная составляющая HTML: им код начинается, им же заканчивается, внутри тегов заключается отображаемая на веб-странице информация. Записывать их рекомендуется в нижнем регистре, то есть обычными маленькими буквами: не , а .
Какими бывают теги?
Большинство HTML-тегов являются парными: есть открывающий (например, ) и закрывающий тег, который от открывающего отличает слеш (/) после первой угловой скобки (например, ). Всё, что находится внутри пары тегов, называется их содержимым.
СодержимоеЗакрывающий_тег> Помещённый внутри этих тегов текст становится жирным
Бывают и непарные (одиночные) теги, которые называются метками. Их, в отличие от парных тегов, не нужно закрывать, потому что они не работают с содержимым, а выполняют какую-то функцию сами по себе. Пример одиночного тега — . Он устанавливает перенос текста на следующую строку.
Если проводить параллели с русским языком, то можно сказать, что парные теги — это кавычки или скобки, влияющие на свойства заключённого в них текста (попробуйте не закрыть кавычки вовремя), а одиночные теги (метки) — это знаки препинания (восклицательный, вопросительный или точка).
Любой тег состоит из:
- Открывающей угловой скобки ().
- Специального слова (имени тега). Например, hr, iframe, b.
- Закрывающей угловой скобки (>).
Основные HTML-теги
Так как теги — основа языка разметки, не удивительно, что их довольно много. Рассмотрим основные, самые важные теги.
- — одиночный тег, внутри которого размещается комментарий. Комментарий — это текст, который не обрабатывается браузером. Внутри тега можно писать, что угодно, даже другие теги — работать они не будут, на экране не отобразятся. Разработчики комментируют код либо чтобы другим веб-мастерам было проще в нём разобраться, либо чтобы спустя продолжительное время его быстро смогли понять они сами.
- , , , , — теги, которые должны присутствовать в любом приличном HTML-документе (подробнее см. «Как создать сайт в Блокноте»).
- — тег содержит вспомогательную информацию для браузеров и поисковиков. Внутри него можно прописать ключевые слова, описание страницы, кодировку документа, имя автора и т. д.
- содержит ссылку на файл сценария или сам код.
- — тег, задающий стиль документа и/или его элементов с помощью CSS. HTML-документ может содержать множество тегов , определяющих разные стили разных частей страницы.
- — полная противоположность , его дополняющая. Тег задаёт «шапку» (заголовок) раздела или всей страницы.
- хранит в себе «ноги» сайта или раздела. Внутри него можно разместить вспомогательную информацию, копирайт, контактные данные и т. д.
- содержит основной контент страницы. Ни шапку, ни блок меню, ни «ноги» сайта, а то, ради чего страница создавалась. Например, на странице, которую вы сейчас читаете, внутри должна располагаться как раз эта статья.
- предназначен для создания ссылок. Ссылки — корень гипертекста, поэтому им посвящена отдельная статья.
- нужен для добавления на веб-страницу картинок (к вашим услугам посвящённая этому действу статья).
- , , — , , , , , , и другие теги форматирования текста составляют большую группу HTML-тегов, о них рассказывает статья «Форматирование текста в HTML».
- — блочный элемент. Текст внутри форматируется с помощью CSS (каскадных таблиц стилей, которым посвящена вторая часть самоучителя).
- . У вас есть абзац или блок . Текст в нём оформлен в едином стиле, но вы бы хотели, не нарушая структуры, сделать так, чтобы несколько слов имели другой размер шрифта или цвет. Именно для таких ситуаций и предназначен тег .
- , , — теги списков. Маркированные, нумерованные — работа этих тегов. Есть ещё списки определений, за которые отвечают теги , и , но подробно обо всей это шестёрке вы узнаете из статьи «Создание списков».
- , , , , и используются при создании таблиц и подробно рассматриваются в отдельной статье.
- — тег, добавляющий странице интерактивности, то есть позволяющий пользователю взаимодействовать с веб-сайтом. Конечно, форме необходим обработчик, но зато с помощью тегов внутри вы можете создать интерфейс. Флажки, кнопки, переключатели, поля ввода и другие объекты, которые требуют от вас активных действий — всё это элементы формы, код которых размещается внутри контейнера .
- — тег, создающий интерактивную кнопку. Чтобы при нажатии на неё что-нибудь произошло, кнопка должна находиться в форме (располагаться между тегами ).
- создаёт элементы формы: переключатели, флажки, кнопки, всевозможные поля ввода. Вставляется в контейнер . Но зачем нам тогда отдельно , если есть универсальный ? позволяет создать кнопку с расширенными параметрами. Например, на кнопке можно разместить картинку. На элементе, созданном через , такого сделать нельзя.
- и — теги создания меню в HTML 5. — это контейнер, внутри которого помещаются элементы , добавление которых и приводит к созданию пунктов меню. Довольно интересная парочка. Например, с её помощью вы можете создать собственное контекстное меню для страницы или отдельного её элемента.
- — ещё один тег формы, создающий в ней большое поле, в которое можно вводить не одну строку текста, а целые абзацы.
Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.
Полезные ссылки:
- Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
- Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
- Вёрстка сайта с нуля 2.0 — полноценный платный курс;
- Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).
Что такое теги, примеры использования
Тег – элемент HTML кода страницы, либо «метка» на сайте, позволяющая структурировать информацию. HTML теги позволяют структурировать текст, и выделить его фрагменты.
Полный список тегов смотрите в прекрасном самоучителе и справочнике по HTML — http://htmlbook.ru/html .
Примеры использования тегов как ключевых слов и пометок тем на сайте
Также теги используются для облегчения навигации по сайту как ключевые слова и метки тем. Примеры:
- В интернет магазине тегами можно обозначить размеры, цвета. В таком случае, посетитель желающий приобрести красную рубашку или футболку вместо пролистывания категорий выберет две метки – свой размер и красный цвет. И при корректной ручной простановке меток результат его устроит.
- Блог – независимо от тематики, структурировать несколько сотен страниц можно по общим признакам. Если это блог путешественника – по странам и городам. Посетители блога, выбирающие страну смогут почитать впечатления об интересующих местах.
- Портал – в конце любой статьи можно обозначить метками основные инфоповоды. Например, стоимость металлопроката. Это даст возможность в один клик вывести все статьи портала на похожие темы.
Для крупных интернет магазинов теги позволяют получать дополнительный поисковый трафик. Если зафиксировать страницы меток не как результаты фильтра, а как статические страницы и наполнить их содержательным контентом, это будет полезный пользователям «продающий» материал. Пример – тег «серые футболки». На странице выводятся все подходящие товары, с советами по выбору, уходу, цветовым сочетаниям.
iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.
- Виртуальные серверы с NVMe SSD дисками от 299 руб/мес
- Безлимитный хостинг на SSD дисках от 142 руб/мес
- Выделенные серверы в наличии и под заказ
- Регистрацию доменов в более 350 зонах