sup — надстрочный текст
- 25 января 2023
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <sup>
используется для добавления надстрочного текста. Надстрочный текст отображается на полсимвола выше обычной строки и обычно используется для сносок, математических уравнений и порядковых показателей.
<p><sup>Надстрочный текст</sup>, а здесь обычный</p>
Надстрочный текст, а здесь обычный.
Тег можно использовать для сносок:
<p>Это абзац текста<sup>[1]</sup>.</p>
<p>Сноска: <sup>[1]</sup> Это сноска.</p>
Или в математических формулах:
<Теорема Пифагора может быть записана как c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup>.</p>
Тег <sup>
следует использовать только для надстрочного текста. Если он используется неправильно, это может повлиять на читаемость и доступность содержимого.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
details — раскрывающийся список
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
В современном веб-дизайне ключевую роль играет не только визуальная привлекательность, но и удобство использования. Одним из инструментов, значительно улучшающих пользовательский опыт на веб-страницах, являются теги <details>
и <summary>
. Эти элементы HTML позволяют создавать раскрывающиеся списки, что делает контент более структурированным и удобным для восприятия.
Что такое и ?
?
Тег <details>
представляет собой элемент, который по умолчанию находится в закрытом состоянии и раскрывается при взаимодействии, обеспечивая дополнительную информацию пользователю по запросу.
В свою очередь, <summary>
служит заголовком для контента, скрытого внутри <details>
, и отображается независимо от состояния (открыт/закрыт) родительского тега.
Преимущества использования
Использование <details>
и <summary>
на веб-страницах имеет ряд преимуществ:
- Улучшение навигации: помогает организовать контент, делая его более доступным и понятным для пользователей.
- Экономия места: позволяет компактно разместить большой объем информации, предоставляя доступ к ней по мере необходимости.
- Увеличение взаимодействия: поощряет пользователей к активному взаимодействию с контентом, повышая общее вовлечение.
Как использовать?
Разметка с использованием <details>
и <summary>
достаточно проста:
<details>
<summary>Заголовок</summary>
Здесь располагается скрытый контент, который будет отображен после клика по заголовку.
</details>
Этот код создаст интерактивный элемент, который по умолчанию будет закрыт и откроется при клике на заголовок, раскрывая содержимое.
Заголовок
Здесь располагается скрытый контент, который будет отображен после клика по заголовку.SEO-оптимизация и доступность
С точки зрения SEO и доступности, использование <details>
и <summary>
также имеет свои преимущества.
Текст, скрытый внутри <details>
, по-прежнему доступен для поисковых систем, что позволяет включать важные ключевые слова и фразы без перегрузки видимой части страницы избыточной информацией. Кроме того, правильное использование этих элементов способствует улучшению структуры контента и его индексации поисковыми системами.
Заключение
Теги <details>
и <summary>
— это мощные инструменты для создания интерактивных веб-страниц, способствующие улучшению пользовательского опыта и SEO-оптимизации. Их использование позволяет сделать контент более доступным и интересным, стимулируя пользователей к дальнейшему взаимодействию с вашим сайтом.
Используя эти элементы в своих проектах, вы не только облегчите навигацию по сайту для посетителей, но и улучшите его позиции в поисковой выдаче, благодаря более эффективной индексации контента.
- 24 марта 2024
body — тело страницы
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <body>
используется для размещения всего содержимого, которое отображается на веб-странице.
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<h1>Заголовок 1</h1>
<p>Это параграф.</p>
</body>
</html>
Атрибуты тега <body>
:
onbeforeunload
— сценарий, который выполнится, когда пользователь соберётся покинуть страницу.onhashchange
— сценарий, который выполнится при изменении URL.onmessage
— сценарий, который выполнится при получении сообщения от приложения.onoffline
— сценарий, который выполнится, когда браузер начнёт работать в автономном режиме.ononline
— сценарий для запуска, когда браузер начинает работать в режиме онлайн.onpagehide
— сценарий, который выполняется, когда пользователь переходит со страницы.onpageshow
— сценарий, который выполняется, когда пользователь переходит на страницу.onunload
— сценарий, который выполняется, когда пользователь покидает страницу.onafterprint
— сценарий, который выполнится после печати веб-страницы.onbeforeprint
— сценарий, который выполнится перед печатью веб-страницы.onlanguagechange
— сценарий, который выполнится при изменении языка документа.onmessageerror
— сценарий, который выполнится при возникновении ошибки в сообщении, полученном с помощью API Messaging.onpopstate
— сценарий, который выполнится при изменении состояния истории браузера.onrejectionhandled
— сценарий, который выполнится при обработке отклоненного обещания в объектеPromise
.onstorage
— сценарий, который выполнится при изменении данных в объектеlocalStorage
илиsessionStorage
.onunhandledrejection
— сценарий, который выполнится при возникновении отклоненного обещания в объектеPromise
без обработки.
- 13 марта 2024
b — полужирный текст
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <b>
используется для выделения текста без дополнительного акцента или значимости. В результате содержимое этого тега обычно отображается жирным шрифтом. Несмотря на это, этот тег не должен использоваться для стилизации; для таких задач лучше использовать CSS.
<p>Сегодня мы <b>не</b> будем работать допоздна!</p>
Сегодня мы не будем работать допоздна!
- 2 марта 2024
html — главный элемент в HTML
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <html>
является корневым элементом веб-страницы. Все содержимое документа, включая <head>
и <body>
, находится внутри этого тега. Тег <html>
сообщает браузеру, что документ является HTML-документом.
💡 <html>
— обязательный элемент структуры HTML-документа.
Пример использования
Убедитесь, что перед тегом <html>
всегда указан корректный DOCTYPE (<!DOCTYPE html>
), который сообщает браузеру о версии HTML-документа.
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мой сайт</title>
</head>
<body>
<h1>Добро пожаловать на мой сайт!</h1>
<p>Это демонстрационная страница.</p>
</body>
</html>
Добавьте атрибут lang
в тег <html>
, чтобы указать язык содержимого, например: <html lang="ru">
для русскоязычного контента.
Связанные теги
Больше о теге
- 1 марта 2024
div — универсальный контейнер
Тег <div>
определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.
<div class="section">
<h2>Заголовок секции</h2>
<p>Какое-нибудь содержимое секции</p>
</div>
- 6 октября 2023
figcaption — подпись к figure
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <figcaption>
используется для добавления подписи к элементу <figure>
. Обычно он размещается после других медиа-элементов, например, после <img>
, и содержит описание либо название изображения или другого контента, находящегося внутри <figure>
.
<figure>
<img src="image.jpg" alt="Image">
<figcaption>Описание изображения</figcaption>
</figure>
Устаревший атрибут align
— выравнивание подписи относительно элемента <figure>
.
Тег <figcaption>
может использоваться только внутри элемента <figure>
.
Валидный HTML требует, чтобы тег <figcaption>
находился после элемента <img>
или других медиа-элементов внутри <figure>
. Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.
- 6 октября 2023
meta — метаданные страницы
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <meta>
содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.
<head>
<meta charset="UTF-8">
<meta name="description" content="Это описание веб-страницы">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Иван Иванов">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Тег <meta>
помещается в <head>
HTML-документа.
Атрибуты тега <meta>
:
charset
— кодировка символов в документе.name
— имя метаданных.content
— значение метаданных.http-equiv
— HTTP-заголовок для значения атрибутаcontent
.
Атрибут charset
должен быть первым атрибутом в теге <meta>
, а name
и http-equiv
нельзя использовать вместе.
- 4 октября 2023
button — просто кнопка
Тег <button>
создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.
Атрибуты тега <button>
:
name
— имя кнопки.type
— тип кнопки, по умолчанию —submit
. Атрибутtype
необходим, если указан атрибутvalue
.value
— значение, которое будет отправлено на сервер при нажатии на кнопку.disabled
— указывает, что кнопка должна быть отключена.form
— одна или несколько форм, к которым принадлежит кнопка.formaction
— URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.formenctype
— указывает, как данные формы должны быть закодированы при отправке на сервер.formmethod
— метод HTTP, используемый при отправке данных формы.formnovalidate
— устанавливает, что данные формы не должны проверяться при отправке на сервер.formtarget
— указывает, где отображать ответ после отправки формы.
- 4 октября 2023
article — независимый контент
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <article>
в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.
<article>
<h2>Заголовок статьи</h2>
<p>Текст статьи...</p>
</article>
Тегом <article>
размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Не используйте <article>
для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
- 3 октября 2023
iframe — встроенная страница
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <iframe>
позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.
Простейший пример использования <iframe>
:
<iframe src="https://example.com" width="600" height="400"></iframe>
Атрибут src
задаёт URL-адрес страницы, которую вы хотите встроить.
Атрибуты width
и height
— ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).
- 3 октября 2023