HTML (HyperText Markup Language) — это стандартный язык разметки, который используется для создания и структурирования контента на веб-страницах. Для структуризации контента на странице используются теги, они же команды HTML. Рассмотрим основные теги этого языка.
- Структура страницы
- Теги заголовков
- Теги параграфов и блоков
- Теги списков
- Тег ссылки
- Тег изображения
- Форматирование текста: полужирный и курсив
- Подчеркнутый и зачеркнутый текст
- Теги для создания таблиц
- Видео и аудио
- Заключение
Структура страницы
Каждый HTML-документ начинается с объявления типа документа (DOCTYPE), затем следует тег <html>, в котором содержатся команды HTML <head> и <body>.
В <head> обычно размещают метаданные, такие как <title> и <meta>, которые считывают поисковые роботы. Кроме того, в <head> можно добавить ссылку на стили CSS, прописать скрипт или добавить специальный код, например счетчик посещений или код аналитики.
Всё остальное, то есть основной контент страницы, размещают внутри тега <body>.
Теги заголовков
Заголовки помогают структурировать текст, создавая логическую иерархию. Команды HTML маркируют шесть уровней заголовков от <h1> до <h6>, где <h1> — наиболее важный заголовок, а <h6> — наименее важный. Чаще всего используются три верхних уровня.
<h1>Название статьи</h1>
<h2>Название раздела</h2>
<h3>Название подраздела</h3>
Заголовки также играют важную роль в поисковой оптимизации, помогая поисковым роботам лучше понять содержание страницы.
Теги параграфов и блоков
Тег <p> используется для создания абзацев текста. Это основной элемент для текстовых блоков на веб-странице.
<p>Внутри тега могут размещаться другие команды HTML: ссылки, элементы мультимедиа, заголовки и так далее.\</p>
Параграфы позволяют разбивать текст на удобные для чтения блоки.
Еще один тег, который используется для разбивки контента на блоки, — это <div>. Его функции сходны с тегом <p>. Но если <p> используется в основном для работы с текстом, то в <div> можно размещать любой контент, в том числе и текст.
Теги списков
Списки помогают организовать информацию на странице путем перечисления ключевых идей или объектов. Неупорядоченные списки создаются с помощью тега <ul>, упорядоченные (нумерованные)— с помощью тега <ol>. Каждая новая строчка списка определяется тегом <li>.
<ul>
<li>Зима</li>
<li>Весна</li>
<li>Лето</li>
</ul>
<ol>
<li>Январь</li>
<li>Февраль</li>
<li>Март</li>
</ol>
Неупорядоченные списки обычно используются для простого перечисления элементов, а упорядоченные — когда важен порядок следования.
Тег ссылки
Тег <a> используется для создания гиперссылок, позволяющих переходить с одной страницы на другую. Чтобы эта команда HTML корректно сработала, нужно использовать элемент href, который содержит адрес ссылки.
<a href="https://www.example.com">Посетите Example.com</a>
Тег изображения
Тег <img> используется для вставки изображений. Для корректной работы этого тега используется атрибут src, который указывает путь к изображению.
<img src="image.jpg" alt="Описание изображения">
Форматирование текста: полужирный и курсив
Команды HTML <strong> и <em> используются для выделения текста жирным шрифтом и курсивом соответственно.
<strong>Текст, выделенный жирным шрифтом</strong>
<em>Текст, выделенный курсивом</em>
Некоторые платформы поддерживают также теги <i> и <b>, которые также выделяют текст курсивом и жирным шрифтом соответственно.
Подчеркнутый и зачеркнутый текст
Теги <u> и <del> используются для подчеркивания и зачеркивания текста соответственно.
<u>Подчеркнутый текст</u>
<del>Зачеркнутый текст</del>
Вместо тега <del> может также использоваться тег <s>, который тоже делает текст зачеркнутым.
Теги для создания таблиц
Таблицы в HTML — это не просто способ организации информации, зачастую это основа структуры веб-страницы. Вот какие команды HTML используются для этого.
Основные теги таблиц
Таблицы создаются с помощью тегов <table>, <tr>, <td> и <th>, которые позволяют организовать данные в строках и столбцах.
<table>
<tr>
<th>Заголовок столбца 1</th>
<th>Заголовок столбца 2</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
Тег <th> используется для заголовков столбцов, а тег <td> — для данных ячеек.
Атрибуты и стилизация таблиц
Таблицы можно стилизовать с помощью CSS и атрибутов, таких как border, cellpadding и cellspacing.
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th>Заголовок столбца 1</th>
<th>Заголовок столбца 2</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
Видео и аудио
Тег <video> используется для вставки видеофайлов на веб-страницу, тег <audio> — для размещения звука. Основные атрибуты включают src для указания пути к видео и controls для отображения элементов управления.
<video src="video.mp4" controls>Ваш браузер не поддерживает видео.</video>
<audio src="audio.mp3" controls>Ваш браузер не поддерживает аудио.</audio>
Заключение
Понимание и правильное использование основных команд HTML — это фундаментальный навык для веб-разработчиков, который позволяет создавать структурированные, доступные и функциональные веб-страницы. Больше узнать о создании страниц можно на нашем курсе по фронтенд-разработке.
