HTML-элементы

Элементы HTML(язык гипертекстовой разметки) являются строительными блоками веб-страниц. Они определяют структуру и содержание веб-страницы, позволяя браузерам отображать её так, как задумано.

Каждый элемент HTML состоит из тегов, атрибутов и контента, и вместе они обеспечивают функциональность и дизайн Интернета.

В этом уроке по HTML мы изучим, что такое элементы HTML, различные типы элементов HTML, наиболее часто используемые элементы, их применение и лучшие практики, чтобы сделать ваши веб-страницы эффективными и доступными и т. д., с помощью подробных примеров.

Что такое HTML-элементы?

HTML-элемент определяется начальным тегом, содержимым и конечным тегом. Структура выглядит следующим образом: 

<tagname>Content goes here</tagname>

Например, следующий элемент абзаца использует тег <p> : 

<p>This is a paragraph.</p>

На следующем снимке экрана мы показали, как этот абзац выглядит в веб-браузере, а также показали HTML-код через инспектор браузера.

Пример HTML-элементов — абзац, отображаемый на веб-странице, вместе с кодом в инспекторе страниц.

HTML-элементы можно вкладывать, комбинировать и стилизовать для создания сложных веб-страниц.

Типы HTML-элементов

1. Блочные элементы

Блочные элементы занимают всю доступную ширину и начинаются с новой строки. Примеры:

  • <div> : Универсальный контейнер для группировки других элементов.
  • <p> : Представляет абзац.
  • <h1> to <h6> : Заголовки, используемые для определения названий и подзаголовков.
  • <ul> и <ol> : используются для создания неупорядоченных и упорядоченных списков.

Пример: index.html 

<!DOCTYPE html>
<html lang="en">
<body>
  <div>A div.</div>
  <p>This is a paragraph.</p>
  <h1>Heading 1</h1>
  <h6>Heading 6</h6>
  <ul>
    <li>Unordere list item 1</li>
    <li>Unordere list item 2</li>
  </ul>
</body>
</html>

Видео

2 встроенных элемента

Строчные элементы не начинаются с новой строки и занимают ширину, равную ширине их содержимого. Вот распространённые примеры:

  • <span> : универсальный контейнер для встроенного содержимого.
  • <a> : Определяет гиперссылки.
  • <strong> : Обозначает сильное выделение(обычно жирным шрифтом).
  • <em> : Обозначает выделенный текст(обычно курсив).

3 пустых элемента

Пустые элементы не имеют закрывающих тегов и являются самодостаточными. Примеры:

  • : Вставляет перенос строки.
  • <img> : Встраивает изображение.
  • <input> : Создает поле ввода.

Часто используемые элементы HTML

1 Текстовые элементы

Текстовые элементы используются для определения и оформления текста на веб-странице. Примеры:

  • <h1> to <h6> : Определить заголовки, где <h1> — наиболее важный, а <h6> наименее важный.
  • <p> : Создает абзацы.
  • <blockquote> : Представляет блок цитируемого текста.
  • <pre> : Отображает предварительно отформатированный текст.

2 элемента медиа

Медиа-элементы встраивают изображения, видео и аудио в веб-страницы:

  • <img> : Встраивает изображение.
  • <video> : Встраивает видео.
  • <audio> : Встраивает аудиоконтент.
  • <figure> and <figcaption> : Группировка медиа-контента с подписью.

3 элемента формы

Элементы формы собирают вводимые пользователем данные и включают в себя:

  • <form> : Представляет форму.
  • <input> : Создает поля ввода(текст, пароль, флажок и т. д.).
  • <textarea> : Создает многострочное поле ввода текста.
  • <button> : Определяет нажимаемые кнопки.

Вложенность HTML-элементов

HTML-элементы можно вкладывать друг в друга, создавая сложные структуры. Например: 

<div>
  <h1>Welcome</h1>
  <p>This is a sample paragraph with a <strong>bold</strong> word.</p>
</div>

Вложенность позволяет логически группировать и структурировать контент, что упрощает его стилизацию и управление.

Атрибуты HTML-элементов

Атрибуты предоставляют дополнительную информацию об элементах HTML. Они указываются в начальном теге и обычно состоят из имени и значения: 

<a href="https://example.com">Visit Example</a>

Общие атрибуты включают в себя:

  • href : Указывает URL для ссылок.
  • src : Указывает источник изображений, видео или скриптов.
  • alt : Предоставляет альтернативный текст для изображений.
  • id и class : определение уникальных идентификаторов и классов для стилизации.

Семантические элементы HTML

Семантические элементы HTML чётко описывают своё значение и назначение, улучшая доступность и SEO. Примеры:

  • <header> : Представляет заголовок страницы или заголовок раздела.
  • <nav> : Определяет навигационное меню.
  • <main> : Указывает основную область содержимого.
  • <article> : представляет собой самостоятельный контент, например записи в блогах.
  • <footer> : Определяет нижний колонтитул страницы или раздела.

Использование семантических элементов улучшает читаемость кода и обеспечивает совместимость со вспомогательными технологиями.

Заключение

HTML-элементы — основа веб-разработки. Понимая их типы, применение и передовые практики, вы сможете создавать надёжные, доступные и визуально привлекательные веб-страницы. Независимо от того, создаёте ли вы простые текстовые страницы или сложные веб-приложения, освоение HTML-элементов — важнейший шаг на вашем пути как веб-разработчика.