Основные HTML-теги
Тег — это специальное зарезервированное слово, заключённое в угловые скобки (например, ). Тег — основная составляющая HTML: им код начинается, им же заканчивается, внутри тегов заключается отображаемая на веб-странице информация. Записывать их рекомендуется в нижнем регистре, то есть обычными маленькими буквами: не , а .
Какими бывают теги?
Большинство HTML-тегов являются парными: есть открывающий (например, ) и закрывающий тег, который от открывающего отличает слеш (/) после первой угловой скобки (например, ). Всё, что находится внутри пары тегов, называется их содержимым.
СодержимоеЗакрывающий_тег> Помещённый внутри этих тегов текст становится жирным
Бывают и непарные (одиночные) теги, которые называются метками. Их, в отличие от парных тегов, не нужно закрывать, потому что они не работают с содержимым, а выполняют какую-то функцию сами по себе. Пример одиночного тега — . Он устанавливает перенос текста на следующую строку.
Если проводить параллели с русским языком, то можно сказать, что парные теги — это кавычки или скобки, влияющие на свойства заключённого в них текста (попробуйте не закрыть кавычки вовремя), а одиночные теги (метки) — это знаки препинания (восклицательный, вопросительный или точка).
Основные HTML-теги
Так как теги — основа языка разметки, не удивительно, что их довольно много. Рассмотрим основные, самые важные теги.
- — одиночный тег, внутри которого размещается комментарий. Комментарий — это текст, который не обрабатывается браузером. Внутри тега можно писать, что угодно, даже другие теги — работать они не будут, на экране не отобразятся. Разработчики комментируют код либо чтобы другим веб-мастерам было проще в нём разобраться, либо чтобы спустя продолжительное время его быстро смогли понять они сами.
- , , , , — теги, которые должны присутствовать в любом приличном HTML-документе (подробнее см. «Как создать сайт в Блокноте»).
- — тег содержит вспомогательную информацию для браузеров и поисковиков. Внутри него можно прописать ключевые слова, описание страницы, кодировку документа, имя автора и т. д.
- содержит ссылку на файл сценария или сам код.
- — тег, задающий стиль документа и/или его элементов с помощью CSS. HTML-документ может содержать множество тегов , определяющих разные стили разных частей страницы.
- — полная противоположность , его дополняющая. Тег задаёт «шапку» (заголовок) раздела или всей страницы.
- хранит в себе «ноги» сайта или раздела. Внутри него можно разместить вспомогательную информацию, копирайт, контактные данные и т. д.
- содержит основной контент страницы. Ни шапку, ни блок меню, ни «ноги» сайта, а то, ради чего страница создавалась. Например, на странице, которую вы сейчас читаете, внутри должна располагаться как раз эта статья.
- предназначен для создания ссылок. Ссылки — корень гипертекста, поэтому им посвящена отдельная статья.
- нужен для добавления на веб-страницу картинок (к вашим услугам посвящённая этому действу статья).
- , , — , , , , , , и другие теги форматирования текста составляют большую группу HTML-тегов, о них рассказывает статья «Форматирование текста в HTML».
- — блочный элемент. Текст внутри форматируется с помощью CSS (каскадных таблиц стилей, которым посвящена вторая часть самоучителя).
- . У вас есть абзац или блок . Текст в нём оформлен в едином стиле, но вы бы хотели, не нарушая структуры, сделать так, чтобы несколько слов имели другой размер шрифта или цвет. Именно для таких ситуаций и предназначен тег .
- , , — теги списков. Маркированные, нумерованные — работа этих тегов. Есть ещё списки определений, за которые отвечают теги , и , но подробно обо всей это шестёрке вы узнаете из статьи «Создание списков».
- , , , , и используются при создании таблиц и подробно рассматриваются в отдельной статье.
- — тег, добавляющий странице интерактивности, то есть позволяющий пользователю взаимодействовать с веб-сайтом. Конечно, форме необходим обработчик, но зато с помощью тегов внутри вы можете создать интерфейс. Флажки, кнопки, переключатели, поля ввода и другие объекты, которые требуют от вас активных действий — всё это элементы формы, код которых размещается внутри контейнера .
- — тег, создающий интерактивную кнопку. Чтобы при нажатии на неё что-нибудь произошло, кнопка должна находиться в форме (располагаться между тегами ).
- создаёт элементы формы: переключатели, флажки, кнопки, всевозможные поля ввода. Вставляется в контейнер . Но зачем нам тогда отдельно , если есть универсальный ? позволяет создать кнопку с расширенными параметрами. Например, на кнопке можно разместить картинку. На элементе, созданном через , такого сделать нельзя.
- и — теги создания меню в HTML 5. — это контейнер, внутри которого помещаются элементы , добавление которых и приводит к созданию пунктов меню. Довольно интересная парочка. Например, с её помощью вы можете создать собственное контекстное меню для страницы или отдельного её элемента.
- — ещё один тег формы, создающий в ней большое поле, в которое можно вводить не одну строку текста, а целые абзацы.
Полезные ссылки:
- Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
- Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
- Вёрстка сайта с нуля 2.0 — полноценный платный курс;
- Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).
Справочник тегов HTML
HTML — язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги — это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTML
Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
Тег | Краткое описание | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Комментарий. Подробнее | |||||||||||||||||||||||||
Определяет тип документа. Подробнее | |||||||||||||||||||||||||
Ссылка, гиперссылка, якорь. Подробнее | |||||||||||||||||||||||||
Определяет текст как аббревиатуру. Подробнее | |||||||||||||||||||||||||
Контактная информация автора или владельца документа. Подробнее | |||||||||||||||||||||||||
Определяет область на карте-изображении | |||||||||||||||||||||||||
Статья | |||||||||||||||||||||||||
Контент в стороне (содержимое не является основным на странице по смыслу) | |||||||||||||||||||||||||
Позволяет вставить воспроизводимый аудио файл. Подробнее | |||||||||||||||||||||||||
Полужирный текст. Подробнее | |||||||||||||||||||||||||
Задает базовый URL или атрибут target для относительных ссылок в документе. Подробнее | |||||||||||||||||||||||||
Область, где написание текста может имееть другое направления. Подробнее | |||||||||||||||||||||||||
Устанавливает направление написания текста. В отличии от направление указывается физическое направление Подробнее | |||||||||||||||||||||||||
Цитата. Подробнее | |||||||||||||||||||||||||
Указывает область body документа. Подробнее | |||||||||||||||||||||||||
Перенос строки. Подробнее | |||||||||||||||||||||||||
Кликабельная кнопка. Подробнее | |||||||||||||||||||||||||
Используется для рисовании графики с помощью скриптов | |||||||||||||||||||||||||
Подпись таблицы. Подробнее | |||||||||||||||||||||||||
Сноска на название материала. Подробнее | |||||||||||||||||||||||||
Используется для вставки компьютерного кода в текстовом виде. Подробнее | |||||||||||||||||||||||||
Задает характеристики колонок в таблице. Подробнее | |||||||||||||||||||||||||
Определяет группу из одной или более колонок таблицы для форматирования. Подробнее | |||||||||||||||||||||||||
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле. Подробнее | |||||||||||||||||||||||||
Определяет описание термина из тега в списке терминов . Подробнее | |||||||||||||||||||||||||
Текст, который удален в новой версии документа. Подробнее | |||||||||||||||||||||||||
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть. Подробнее | |||||||||||||||||||||||||
Указывает, что содержимое является термином. Подробнее | |||||||||||||||||||||||||
Определяет диалоговое окно или интерактивный элемент | |||||||||||||||||||||||||
Блочный элемент — один из основных элементов верстки. Подробнее | |||||||||||||||||||||||||
Определяет список определений. Подробнее | |||||||||||||||||||||||||
Название термина в списке определений . Подробнее | |||||||||||||||||||||||||
выделенный по смыслу текст (обычно, текст выделенный курсивом). Подробнее | |||||||||||||||||||||||||
Контейнер для внешнего приложения | |||||||||||||||||||||||||
Группа связанных элементов в форме. Подробнее | |||||||||||||||||||||||||
Заголовок для элемента | |||||||||||||||||||||||||
Определяет автономную группу из нескольких элементов (например картинка с подписью) | |||||||||||||||||||||||||
Нижний колонтитул | |||||||||||||||||||||||||
Определяет форму пользовательского ввода. Подробнее | |||||||||||||||||||||||||
— | Заголовки HTML разного уровня: , , , , , . Подробнее | ||||||||||||||||||||||||
Указывает область head документа. Подробнее | |||||||||||||||||||||||||
Блок заголовка | |||||||||||||||||||||||||
Горизонтальная линия — тематический разделитель. Подробнее | |||||||||||||||||||||||||
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. Подробнее | |||||||||||||||||||||||||
Выделяет текст курсивом. Подробнее | |||||||||||||||||||||||||
Определяет встроенный фрейм | |||||||||||||||||||||||||
Изображение, картинка. Подробнее | |||||||||||||||||||||||||
Поле для ввода, элемент формы. Подробнее | |||||||||||||||||||||||||
Текст, который был добавлен в новой версии документа. Подробнее | |||||||||||||||||||||||||
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. Подробнее | |||||||||||||||||||||||||
Метка для поля ввода. Обычно содержит подпись поля. Подробнее | |||||||||||||||||||||||||
Заголовок элементов . Подробнее | |||||||||||||||||||||||||
Элемент списка. Подробнее | |||||||||||||||||||||||||
Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS). Подробнее | |||||||||||||||||||||||||
Основной контент | |||||||||||||||||||||||||
Контейнер для . Определяет пользовательскую карту на изображении | |||||||||||||||||||||||||
Выделенный текст (обычно с помощью подсветки фона). Подробнее | |||||||||||||||||||||||||
Контейнер для списка пунктов меню | |||||||||||||||||||||||||
Определяет элементы, которые пользователь может вызвать из контекстного меню | |||||||||||||||||||||||||
Используется для определения мета-данных документа. Подробнее | |||||||||||||||||||||||||
Измеритель значений в заданном диапазоне | |||||||||||||||||||||||||
Контейнер для навигационных элементов | |||||||||||||||||||||||||
Альтернативный контент для пользователей, отключивших скрипты | |||||||||||||||||||||||||
Определяет встроенный объект | |||||||||||||||||||||||||
Определяет нумерованный список. Подробнее | |||||||||||||||||||||||||
Определяет группу связанных вариантов в выпадающем списке. Дает название группы. Подробнее | |||||||||||||||||||||||||
Параметр (вариант выбора) в выпадающем списке. Подробнее | |||||||||||||||||||||||||
Результат вычислений. Подробнее | |||||||||||||||||||||||||
Абзац. Подробнее | |||||||||||||||||||||||||
Задает параметры для встроенных объектов | |||||||||||||||||||||||||
Контейнер для нескольких изображений | |||||||||||||||||||||||||
Предварительно отформатированный текст. Подробнее | |||||||||||||||||||||||||
Индикатор выполнения (прогресса) | |||||||||||||||||||||||||
Цитата в тексте. Подробнее | |||||||||||||||||||||||||
Альтернативный текст, если браузер не поддерживает тег . Подробнее | |||||||||||||||||||||||||
Аннотация к содержимому тега . Подробнее | |||||||||||||||||||||||||
Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). Подробнее | |||||||||||||||||||||||||
Перечеркнутый текст. Подробнее | |||||||||||||||||||||||||
Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). Подробнее | |||||||||||||||||||||||||
Определяет скрипт или подключение скрипта из внешнего ресурса. Подробнее | |||||||||||||||||||||||||
Раздел | |||||||||||||||||||||||||
Определяет выпадающий список или список с множественным выбором. Подробнее | |||||||||||||||||||||||||
Текст шрифтом меньшего размера. Подробнее | |||||||||||||||||||||||||
Определяет ресурс для тегов , и . Подробнее | |||||||||||||||||||||||||
Строчный элемент. Подробнее | |||||||||||||||||||||||||
Текст, выделенный по значению. Обычно отображается полужирным. Подробнее | |||||||||||||||||||||||||
Определяет контейнер для определения CSS стилей документа. Подробнее | |||||||||||||||||||||||||
Отображает текст в виде нижнего индекса. Подробнее | |||||||||||||||||||||||||
Заголовок внутри тега . Подробнее | |||||||||||||||||||||||||
Отображает текст в виде верхнего индекса. Подробнее | |||||||||||||||||||||||||
Определяет таблицу. Подробнее | |||||||||||||||||||||||||
Определяет область контента в таблице. Подробнее | |||||||||||||||||||||||||
Ячейка в таблице
|