Что такое тег html
Перейти к содержимому

Что такое тег html

  • автор:

Что такое тег 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 .

html

Примеры использования тегов как ключевых слов и пометок тем на сайте

Также теги используются для облегчения навигации по сайту как ключевые слова и метки тем. Примеры:

  • В интернет магазине тегами можно обозначить размеры, цвета. В таком случае, посетитель желающий приобрести красную рубашку или футболку вместо пролистывания категорий выберет две метки – свой размер и красный цвет. И при корректной ручной простановке меток результат его устроит.
  • Блог – независимо от тематики, структурировать несколько сотен страниц можно по общим признакам. Если это блог путешественника – по странам и городам. Посетители блога, выбирающие страну смогут почитать впечатления об интересующих местах.
  • Портал – в конце любой статьи можно обозначить метками основные инфоповоды. Например, стоимость металлопроката. Это даст возможность в один клик вывести все статьи портала на похожие темы.

Для крупных интернет магазинов теги позволяют получать дополнительный поисковый трафик. Если зафиксировать страницы меток не как результаты фильтра, а как статические страницы и наполнить их содержательным контентом, это будет полезный пользователям «продающий» материал. Пример – тег «серые футболки». На странице выводятся все подходящие товары, с советами по выбору, уходу, цветовым сочетаниям.

iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.

  • Виртуальные серверы с NVMe SSD дисками от 299 руб/мес
  • Безлимитный хостинг на SSD дисках от 142 руб/мес
  • Выделенные серверы в наличии и под заказ
  • Регистрацию доменов в более 350 зонах

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *