Полный обзор тегов и атрибутов HTML
HTML является динамично развивающимся языком разметки, что требует постоянного обновления знаний о его элементах. В данном обзоре представлен структурированный список ключевых тегов и атрибутов, которые актуальны для HTML5 и его последних версий. Рассмотрены основные разделы, включая базовые теги и структуру документа, метаданные, элементы структуры, мультимедиа, формы, семантические элементы, интерактивные элементы и глобальные атрибуты.
1. Базовые теги и структура документа
Корневым элементом HTML-документа является тег <html>. Он содержит два основных блока:
- <head>: включает метаданные, заголовок страницы и ссылки на внешние ресурсы, такие как таблицы стилей CSS и скрипты JavaScript.
- <body>: содержит основное содержание страницы.
Пример базовой структуры документа:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой сайт</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" async defer></script>
</head>
<body>
<!-- Основное содержание страницы -->
</body>
</html>
2. Метаданные
Метаданные располагаются внутри тега <head> и содержат важную информацию о веб-странице, такую как описание, ключевые слова, кодировка и ссылки на внешние ресурсы.
- <meta charset="UTF-8">: задаёт кодировку символов для документа.
- <meta name="description" content="...">: предоставляет краткое описание страницы для поисковых систем.
- <meta name="keywords" content="...">: перечисляет ключевые слова, хотя их значимость в современных алгоритмах поисковых систем снижается.
- <link rel="stylesheet" href="style.css">: связывает документ с внешним файлом CSS.
- <script src="app.js" async defer>: подключает внешний файл JavaScript, используя асинхронную загрузку для повышения производительности.
3. Основные теги для структурирования контента
Эти теги используются для организации и структурирования содержимого веб-страницы.
- <div>: контейнер блочного типа.
- <span>: контейнер строчного типа.
- <p>: элемент для абзацев текста.
- <h1>–<h6>: заголовки различных уровней.
- <a href="https://example.com" target="_blank">Ссылка</a>: гиперссылка с указанием URL и цели открытия.
- <img src="image.jpg" alt="Описание изображения">: изображение с указанием источника и альтернативного текста.
- <ul> и <ol>: неупорядоченные и упорядоченные списки соответственно.
- <li>: элемент списка.
- <table>: таблица, содержащая теги <tr> (строки), <th> (заголовки) и <td> (ячейки).
Примеры использования:
<div class="container">...</div>
<span class="text">...</span>
<p>Это абзац текста.</p>
<h1>Заголовок первого уровня</h1>
<p><a href="https://example.com" target="_blank">Ссылка на сайт</a></p>
<img src="image.jpg" alt="Описание изображения">
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
</ul>
<table>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
<tr>
<td>Элемент таблицы 1</td>
<td>Элемент таблицы 2</td>
</tr>
</table>
4. Теги для работы с мультимедиа
Для интеграции мультимедийных элементов на веб-страницу используются следующие теги:
- <video>: для воспроизведения видеофайлов.
- Атрибуты:
- src: указывает путь к видеофайлу.
- controls: включает элементы управления воспроизведением (пауза, перемотка и т.д.).
- autoplay: автоматически запускает воспроизведение видео.
- loop: устанавливает бесконечный цикл воспроизведения.
- muted: отключает звук при воспроизведении.
- <audio>: для воспроизведения аудиофайлов.
- Атрибуты:
- src: ссылка на аудиофайл.
- controls: отображает элементы управления воспроизведением.
- <iframe>: встраивает внешние ресурсы, такие как видео с YouTube.
- Атрибуты:
- src: URL ресурса.
- width, height: задают размеры встраиваемого элемента.
Примеры:
<video autoplay muted loop controls src="video.mp4">
Ваш браузер не поддерживает воспроизведение видео.
</video>
<audio src="audio.mp3" controls>
Ваш браузер не поддерживает воспроизведение аудио.
</audio>
<iframe src="https://www.youtube.com/embed/video_id" width="560" height="315"></iframe>
5. Формы
Тег <form> используется для создания форм ввода данных пользователем. Основные элементы форм включают:
- <form>: корневой элемент формы.
- Атрибуты:
- action: указывает URL, на который отправляются данные.
- method: определяет метод отправки данных (GET или POST).
- enctype: задаёт тип кодировки данных (например, multipart/form-data для загрузки файлов).
- <input type="text" id="name" name="name" required>: текстовое поле.
- Атрибуты:
- type: определяет тип поля (text, email, password и др.).
- id: уникальный идентификатор элемента.
- name: имя поля для передачи данных.
- required: указывает на обязательное заполнение поля.
- placeholder: устанавливает текстовую подсказку.
- <input type="submit" value="Отправить">: кнопка для отправки формы.
- <textarea>: многострочное текстовое поле.
- Атрибуты:
- rows, cols: задают количество строк и столбцов в текстовом поле.
- <select multiple>: выпадающий список.
- <option selected>: элемент списка с предварительно выбранным значением.
Пример формы:
<form action="/submit" method="POST">
<label for="name">Имя:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Отправить">
</form>
6. Семантические теги
Семантические теги улучшают доступность веб-страниц для поисковых систем и экранных читалок.
- <header>: определяет шапку документа или раздела.
- <footer>: размещает подвал документа или раздела.
- <nav>: содержит навигационные элементы.
- <article>: представляет собой самостоятельный раздел или статью.
- <section>: используется для разделения документа на логические блоки.
- <aside>: включает дополнительный или боковой контент.
- <main>: определяет основное содержимое документа.
- <figure>: содержит мультимедийный контент и его подпись.
- <figcaption>: устанавливает подпись к мультимедийному контенту.
Пример использования:
<article>
<header>
<h1>Статья о HTML</h1>
<p>Дата публикации: 1 января 2023 года</p>
</header>
<section>
<p>Основное содержание статьи.</p>
</section>
<aside>
<p>Дополнительный контент.</p>
</aside>
<footer>
<p>© 2023</p>
</footer>
</article>
7. Глобальные атрибуты
Глобальные атрибуты могут быть применены к любому HTML-элементу.
- class: задаёт CSS-класс для элемента.
- id: устанавливает уникальный идентификатор элемента.
- style: содержит инлайновые стили CSS.
- title: добавляет всплывающую подсказку. *data-*: позволяет хранить пользовательские данные.
- hidden: скрывает элемент от отображения.
- tabindex: задаёт порядок перехода по элементам с помощью клавиши Tab. *aria-*: предоставляет информацию для экранных читалок в соответствии со спецификацией ARIA.
Примеры:
<div class="container" id="main" style="background-color: #f0f0f0" title="Основной контейнер" aria-label="Основной элемент">...</div>
<button tabindex="0" data-id="123" aria-labelledby="label-123">Кнопка</button>
8. Устаревшие теги
Использование следующих тегов не рекомендуется в современном веб-разработке:
- <font>: для стилизации текста.
- <center>: для выравнивания содержимого по центру.
- <big>, <strike>: для стилизации текста (эти теги считаются устаревшими).
- <frame>, <marquee>: для анимации и встраивания фреймов (эти теги не используются в современном вебе).
Заключение
Данный обзор предоставляет систематизированную информацию о ключевых тегах и атрибутах HTML, которые применяются для создания современных веб-страниц.
#создатьсайт, #dev