Жаркий сезон
Жаркий сезон
Скидки до 55 000 ₽ + вторая профессия в подарок
Главная | Все статьи | Код

Основные теги HTML

JavaScript Время чтения статьи ~4 минуты
Основные теги HTML главное изображение

HTML (HyperText Markup Language) — это стандартный язык разметки, который используется для создания и структурирования контента на веб-страницах. Для структуризации контента на странице используются теги, они же команды HTML. Рассмотрим основные теги этого языка.

Познакомьтесь с Фронтенд разработкой бесплатно

Начните с этих 5 уроков

Структура страницы

Каждый 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="Описание изображения">

Познакомьтесь с Фронтенд разработкой бесплатно

Начните с этих 5 уроков

Форматирование текста: полужирный и курсив

Команды 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>

Познакомьтесь с Фронтенд разработкой бесплатно

Начните с этих 5 уроков

Видео и аудио

Тег <video> используется для вставки видеофайлов на веб-страницу, тег <audio> — для размещения звука. Основные атрибуты включают src для указания пути к видео и controls для отображения элементов управления.

<video src="video.mp4" controls>Ваш браузер не поддерживает видео.</video>

<audio src="audio.mp3" controls>Ваш браузер не поддерживает аудио.</audio>

Заключение

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

Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Осваивайте разработку веб-страниц, оживляйте дизайн макетов, публикуйте сайты и приложения. Отслеживайте ошибки в интерфейсе и устраняйте их
10 месяцев
с нуля
Старт 25 июля
профессия
от 6 300 ₽ в месяц
Обучитесь разработке бэкенда сайтов и веб-приложений — серверной части, которая отвечает за логику и базы данных
10 месяцев
с нуля
Старт 25 июля
профессия
от 6 183 ₽ в месяц
Выполняйте ручное тестирование веб-приложений, находите ошибки в продукте. Узнайте все о тест-дизайне.
4 месяца
с нуля
Старт 25 июля
профессия
от 6 300 ₽ в месяц
Научитесь разработке веб-приложений, сайтов и программного обеспечения на языке Java, программируйте и используйте структуры данных
10 месяцев
с нуля
Старт 25 июля
профессия
от 5 025 ₽ в месяц
новый
Собирайте, анализируйте и интерпретируйте данные, улучшайте бизнес-процессы и продукт компании. Обучитесь работе с библиотеками Python
9 месяцев
с нуля
Старт 25 июля
профессия
от 6 300 ₽ в месяц
Занимайтесь созданием сайтов, веб-приложений, сервисов и их интеграцией с внутренними бизнес-системами на бекенд-языке PHP
10 месяцев
с нуля
Старт 25 июля
профессия
от 5 840 ₽ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 25 июля
профессия
от 9 900 ₽ в месяц
Обучитесь разработке визуальной части сайта — фронтенда, а также реализации серверной — бэкенда. Освойте HTML, CSS, JavaScript
16 месяцев
с нуля
Старт 25 июля
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 25 июля
профессия
новый
Организовывайте процесс автоматизации тестирования на проекте, обучитесь языку программирования JavaScript, начните управлять процессом тестирования
8 месяцев
c опытом
в разработке
Старт 25 июля