Тег определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.
Заголовок секции
Какое-нибудь содержимое секции
Примеры использования
Группировка элементов формы:
Создание панели навигации:
Если вы используете слишком много тегов для обёртывания содержимого, код может стать громоздким и трудночитаемым. В этом случае лучше использовать семантические теги или .
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Как добавить подпись в HTML. Тег
Описание изображения
Устаревший атрибут align — выравнивание подписи относительно элемента .
Тег может использоваться только внутри элемента .
Валидный HTML требует, чтобы тег находился после элемента или других медиа-элементов внутри . Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.
6 октября 2023
Метаданные HTML-страницы. Тег
Тег содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.
Атрибуты тега :
charset — кодировка символов в документе.
name — имя метаданных.
content — значение метаданных.
http-equiv — HTTP-заголовок для значения атрибута content .
Атрибут charset должен быть первым атрибутом в теге , а name и http-equiv нельзя использовать вместе.
4 октября 2023
Просто кнопка. Тег
Тег создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.
Атрибуты тега :
name — имя кнопки.
type — тип кнопки, по умолчанию — submit . Атрибут type необходим, если указан атрибут value .
value — значение, которое будет отправлено на сервер при нажатии на кнопку.
disabled — указывает, что кнопка должна быть отключена.
form — одна или несколько форм, к которым принадлежит кнопка.
formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
formmethod — метод HTTP, используемый при отправке данных формы.
formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
formtarget — указывает, где отображать ответ после отправки формы.
4 октября 2023
Независимый контент. Тег
Тег в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.
Заголовок статьи
Текст статьи.
Тегом размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Не используйте для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
3 октября 2023
Как встроить страницу через
Тег позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.
Простейший пример использования :
Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.
Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).
3 октября 2023
Выпадающий список. Тег
Тег используется для создания выпадающего списка. Этот тег содержит список опций, которые пользователь может выбрать. Когда пользователь выбирает опцию, выбранное значение отправляется на сервер или обрабатывается на клиентской стороне.
Все опции списка должны быть обёрнуты в тег .
Атрибуты тега :
autocomplete — подсказка для функции автозаполнения формы;
disabled — делает элемент неактивным;
form — связывает список с формой;
multiple — позволяет выбрать несколько опций;
name — задает имя элемента, которое будет отправляться на сервер;
required — делает элемент обязательным для заполнения;
size — задает количество строк в списке.
1 октября 2023
Встроенные CSS-стили для страницы с тегом
Тег используется для определения стилей для HTML-документов. Он является важным компонентом CSS, которые позволяют разработчикам создавать визуально привлекательные веб-страницы, определяя различные стили, такие как цвета, шрифты и макеты.
body
Добро пожаловать на мой сайт!
Атрибуты тега :
type — MIME-тип таблицы стилей.
media — типы носителей, для которы будет использоваться стиль.
29 сентября 2023
Изображение в HTML. Тег
Элемент используется для вставки изображений на веб-страницы.
У нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.
Существуют определенные правила или стандарты использования тега , которые рекомендуются для большинства случаев в веб-разработке. Несмотря на то что конкретные требования могут варьироваться в зависимости от проекта, ниже приведены атрибуты и практики, которые часто рекомендуются к использованию.
28 сентября 2023
1.2. HTML-элементы
HTML-элементы — основа языка HTML. Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя элемента.
Все HTML-элементы делятся на пять типов:
пустые элементы — , , , , ,
, , , , , , , , , ;
элементы с неформатированным текстом — , ;
элементы, выводящие неформатированный текст — , ;
элементы из другого пространства имён — MathML и SVG;
обычные элементы — все остальные элементы.
В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие элементы исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.
Полный список HTML-элементов
Таблица 1. HTML-элементы
Элемент
Описание
Используется для добавления комментариев.
Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.
Создаёт гипертекстовые ссылки.
Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title .
Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь элемента .
Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
Загружает звуковой контент на веб-страницу.
Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
Отображает текст в направлении, указанном в атрибуте dir , переопределяя текущее направление написания текста.
Выделяет текст как цитату, применяется для описания больших цитат.
Представляет тело документа (содержимое, не относящееся к метаданным документа).
Перенос текста на новую строку.
Создает интерактивную кнопку. Элемент может содержать текст или изображение.
Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
Добавляет подпись к таблице. Вставляется сразу после открывающего тега
.
Используется для указания источника цитирования. Отображается курсивом.
Представляет фрагмент программного кода, отображается шрифтом семейства monospace .
Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
Элемент используется для связывания значения атрибута value , которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым элемента.
Элемент-контейнер для выпадающего списка элемента . Варианты значений помещаются в элементы .
Используется для описания термина из элемента .
Помечает текст как удаленный, перечёркивая его.
Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в элемент .
Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
Элемент-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
Элемент-контейнер, внутри которого находятся термин и его описание.
Используется для задания термина.
Выделяет важные фрагменты текста, отображая их курсивом.
Элемент-контейнер для встраивания внешнего интерактивного контента или плагина.
Группирует связанные элементы в форме, рисуя рамку вокруг них.
Заголовок/подпись для элемента .
Самодостаточный элемент-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
Определяет завершающую область (нижний колонтитул) документа или раздела.
Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action .
Создают заголовки шести уровней для связанных с ними разделов.
Элемент-контейнер для метаданных HTML-документа, таких как , , , , .
Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
Горизонтальная линия для тематического разделения параграфов.
Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
Встраивает изображения в HTML-документ с помощью атрибута src , значением которого является адрес встраиваемого изображения.
Создает многофункциональные поля формы, в которые пользователь может вводить данные.
Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
Таблица-шпаргалка с элементами
Для удобства пользования я сгруппировала HTML-элементы по тематическим разделам, добавив значения свойства display . Чтобы перейти к таблице, кликните по рисунку.
Служебные теги
Служебные теги — это элементы языка HTML, формирующие структуру документа (страницы). Они хранят различные скрипты, стили и метаданные, которые необходимы для поисковых роботов и браузеров.
К служебным тегам относят:
Тег html
Элемент html — это первый служебный тег, который пишет разработчик, создавая HTML-документ. Между открывающим и закрывающим тегами располагается вся информация о веб-странице.
Открывающий тег всегда стоит вторым после элемента, устанавливающего тип документа !DOCTYPE, и может содержать внутри себя атрибуты title, manifest, xmlns.
Закрывающий тег всегда стоит последним и не должен содержать внутри себя атрибутов.
Между открывающим html и закрывающим /html находятся теги head и body, которые отвечают за техническую и видимую информацию страницы соответственно.
Тег head
Элемент head — это служебный тег, который содержит в себе всю техническую информацию о веб-странице, а также задает ее заголовок. Эта информация не видна обычному пользователю (кроме title — заголовка окна веб-страницы), но помогает браузерам и поисковым системам работать с данными страницы.
Данная область пишется первой и является неким контейнером для метаданных html-документа. В ней могут содержаться такие элементы, как title, base, meta, link, style.
Внутри открывающего head может содержаться атрибут profile, который задает адрес профиля метаданных.
Тег title
Элемент title отвечает за заголовок страницы, который отображается в шапке браузера. Иными словами, title задает текст, который будет написан на самой вкладке браузера.
Данный тег пишется один раз и располагается в контейнере head. Его написание обязательно, так как браузер не может самостоятельно определить заголовок.
Тег meta
Служебный тег meta предназначен для хранения технической информации, которая используется браузерами и поисковыми роботами. Например, это могут быть ключевые слова, описание сайта, кодировка документа и др.
Элемент meta не имеет закрывающего тега. Он располагается в контейнере head и может содержать внутри себя несколько атрибутов одновременно:
charset. Указывает кодировку документа (страницы). Например, utf-8;
http-equiv. Данный атрибут формирует http-заголовок и определяет действия браузера. Название заголовка указывается в самом атрибуте http-equiv, а его значение — в атрибуте content. Примеры значений — content-security-policy (задает правила и политику сайта, защищает от атак с внедрением контента и т. д.), content-type (кодировка для документа), default-style (предпочитаемые стили), refresh (интервал обновления страницы в секундах);
name. Задает тип метатега. Используется в паре «имя=значение». Примеры значений — author (имя автора), description (описание веб-страницы), keywords (ключевые слова). Недопустимо одновременное использование name и http-equiv;
content. Устанавливает значение атрибутов name и http-equiv. Атрибут content может содержать не одно, а несколько значений, указанных через запятую или точку с запятой.
Тег style
Служебный тег style определяет стили элементов страницы. Например, стиль H1 (его размер, шрифт, цвет). Задается данный тег в контейнере head и может применяться неоднократно (для разных элементов).
Задав стиль в head, браузер использует его в body к соответствующему элементу.
media — позволяет определить устройство вывода, для которого задана таблица стилей. Для каждого устройства можно задать свой стиль;
type — задает синтаксис, который необходимо использовать для верной интерпретации таблиц стилей. По умолчанию значение равно «text/css».
Тег body
Элемент body — это служебный тег, содержащий в себе все данные, которые отображаются на веб-странице (текст, медиафайлы, таблицы и т. д.). Иными словами, body отвечает за отображение контента документа.
Внутри контейнера body используются все элементы, предназначенные для дизайна страницы. Но иногда там могут быть расположены и обработчики событий. Например, onload, который выполняется после того, как документ завершит загрузку.
Внутри открывающего тега body можно разместить атрибуты, задающие определенные значения параметров для всей веб-страницы целиком. Например, ее фон, цвет текста, цвет гиперссылок и т. д.
alink — цвет активных ссылок;
background — фон страницы (изображение, картинка, видео);
bgcolor — цвет фона (если это простая заливка);
bgproperties — свойства фона (прокручиваться вместе с контентом, оставаться неподвижным, прокручиваться в режиме Paralax и т. д.);
bottommargin, topmargin, rightmargin, leftmargin — отступы от соответствующих краев страницы до контента;
link — цвет ссылок;
scroll — отображение полос прокрутки;
text — цвет текста на странице;
vlink — цвет нажатых ссылок.
Кроме вышеописанных атрибутов в служебном теге body можно также использовать универсальные атрибуты и события.
Тег script
Элемент script — служебный тег, предназначенный для описания скриптов. Он может содержать в себе ссылку на саму программу или ее текст, написанный на другом языке. Данный тег позволяет HTML-документам работать с программами, написанными на языке JavaScript и др.
Один и тот же скрипт может храниться во внешнем файле и использоваться одновременно для нескольких страниц. Это позволяет выполнять его быстрее при последующих загрузках, так как при первой загрузке файл кэшируется.
Атрибуты для тега script:
async — позволяет загружать скрипт асинхронно;
defer — не дает скрипту начать работу до тех пор, пока страница не будет загружена полностью;
language — указывает язык программирования скрипта;
src — адрес внешнего файла;
type — определяет тип содержимого тега script.
Служебный тег script можно располагать в любом месте документа (как в контейнере head, так и в контейнере body).
Похожие темы: нет
Синонимы: нет Все термины на букву «С» Все термины в глоссарии
Друзья, теперь вы можете поддержать SEOnews https://pay.cloudtips.ru/p/8828f772 Ваши донаты помогут нам развивать издание и дальше радовать вас полезным контентом.
Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся контейнеры , ,
и др.
Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы ( , например). Запрещено добавлять внутрь встроенных элементов блочные (пример 1).
Пример 1. Использование блочных элементов
Блочные элементы
Lorem ipsum dolor sit amet.
Ut wisi enim ad minim veniam
В данном примере абзац (тег
) вставляется внутрь контейнера , а ссылка (тег ) — в заголовок
. Кстати, ошибкой будет поступить наоборот — добавить
в контейнер (
Ut wisi
), поскольку тег не относится к блочным элементам.
Вкладывание блочных тегов внутрь встроенных элементов характерно, скорее, для новичков, которые еще не понимают разницы между ними. К тому же браузеры научились отлавливать подобные ошибки и отображают код более-менее корректно. Тем не менее, рекомендуем придерживаться в этом вопросе спецификации, чтобы выводить веб-страницу без ошибок.
Ширина блочных элементов
По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег в коде документа присутствует один, то он занимает всю свободную ширину окна браузера и ширина блока будет равна 100%. Стоит поместить один тег внутрь другого, как ширина внутреннего тега начинает исчисляться относительно его родителя, т.е. внешнего контейнера.
Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока ( width ), отступов ( margin ), полей ( padding ) и границ ( border ). В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.
Пример 2. Ширина слоя
Ширина
Lorem ipsum dolor sit amet.
В результате данного примера получим слой шириной 342 пиксела. На рис. 1 показано, из чего складывается ширина слоя.
Рис 1. Ширина блочного элемента
В том случае когда < !DOCTYPE>в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width .
Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается как auto , это позволяет вписывать слой в окно браузера, не принимая в расчет значения установленных полей. Если изменить ширину на 100%, то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки.
Для получения универсального результата существует несколько подходов. В примере 3 продемонстрировано создание трех слоев, ширина которых определяется в процентах.
Пример 3. Ширина слоя в процентах
Ширина
Результат примера показан на рис. 2.
Рис. 2. Отображение ширины слоев в браузере
Ширина первого слоя в данном примере ( layer1 ) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя ( layer2 ) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег
). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою ( layer3 ) вообще не применяется свойство width , поэтому оно определяется по умолчанию — auto . В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.
Способ установки ширины зависит от применяемого макета и выбора разработчика, но в любом случае нужно учитывать особенности блочных элементов и создавать универсальный код.
Высота
С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height и добавляет к нему еще значение margin , padding и border . Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.
Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4).
Пример 4. Высота слоя
Высота
Результат данного примера продемонстрирован на рис. 3.
Рис. 3. Высота блока в разных браузерах
Видно, что браузер оставляет высоту неизменной, за счет чего текст не помещается в блоке и накладывается поверх слоя.
Цвет фона
Цвет фона элемента проще всего устанавливать через универсальное свойство background . Фоном при этом заливается область, которая определяется значениями width , height и padding (рис. 4).
Рис. 4. Область слоя, которая заполняется фоновым цветом
Таким образом, margin не принимает участия в формировании цветной области.
Границы
Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается и различие при отображении границ. Браузер Internet Explorer 7 проводит рамку внутри блока, а Firefox — снаружи. Но если использовать фоновую заливку, то увидим совершенно противоположную картину (рис. 5). А все потому, что Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet Explorer — по внутренней. Начиная с версии 8.0 Internet Explorer поменял стиль отображения рамки, она проводится внутри блока, как и в Firefox.
а. Internet Explorer 7
б. Firefox, Internet Explorer 8+
Рис. 5. Отображение рамки в браузерах
В примере 5 показано, как создать код для получения подобной границы.
Пример 5. Пунктирная рамка
Рамка
Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически одинаковым.
Резюме
Блочные элементы выступают в качестве основного строительного материала при верстке веб-страниц. Такие элементы характерны тем, что всегда начинаются с новой строки и занимают всю доступную ширину области, в которой располагаются.
Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями height и width , но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы. Можно только посоветовать ограниченно использовать свойства width и height , поскольку по умолчанию браузер применяет аргумент auto , который заставляет настраивать размеры элемента автоматически.
