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

26 июня 2024 г.

2 минуты

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

1 месяц

С нуля

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

5 месяцев

С нуля

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

10 месяцев

С нуля

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

1 месяц

С нуля

Основы JavaScript

Синтаксис, основы программирования, переменные, строки, арифметика, условные конструкции, циклы, функции, модули

2 месяца

С опытом

Bootstrap

Навык работы с SASS, Bootstrap 5 и Gulp для ускорения, упрощения и оптимизации процесса вёрстки и разработки сайтов

Содержание

Структура страницы
Теги заголовков
Теги параграфов и блоков
Теги списков
Тег ссылки
Тег изображения
Форматирование текста: полужирный и курсив
Подчеркнутый и зачеркнутый текст
Теги для создания таблиц
Видео и аудио
Заключение

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

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

Эффективная разработка на Java с IntelliJ IDEA: установка и настройка среды

Как стать тестировщиком игр?

Что такое интерфейс

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

Команды 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 — это фундаментальный навык для веб-разработчиков, который позволяет создавать структурированные, доступные и функциональные веб-страницы. Больше узнать о создании страниц можно на нашем курсе по фронтенд-разработке.

Анастасия Уминская

год назад