Введение
HTML (HyperText Markup Language) является основным языком разметки для создания веб-страниц. Он использует различные теги для определения структуры и содержания страницы. В этой статье мы рассмотрим различные теги HTML и их роли в создании веб-страниц. Мы охватим основные и расширенные теги, которые помогут вам эффективно разметить контент на вашем сайте.
Основные теги HTML
<html>
Тег <html> является корневым элементом документа HTML. Он определяет начало и конец HTML-документа.
<head>
Тег <head> содержит информацию о документе, такую как заголовок страницы, мета-теги, подключение CSS и JavaScript файлов.
<head>
<title>Заголовок страницы</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head><body>
Тег <body> определяет тело документа, которое содержит все видимое содержимое страницы, такое как текст, изображения, ссылки и другие элементы.
<body>
<h1>Привет, мир!</h1>
<p>Это содержимое страницы.</p>
<img src="image.jpg" alt="Изображение">
<a href="https://www.example.com">Ссылка</a>
</body><h1>–<h6>
Теги <h1>–<h6> используются для создания заголовков различных уровней. <h1> представляет самый высокий уровень заголовка, а <h6> – самый низкий.
<h1>Заголовок уровня 1</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</h3><p>
Тег <p> используется для создания абзацев текста.
<p>Это абзац текста.</p><a>
Тег <a> используется для создания ссылок.
<a href="https://www.example.com">Это ссылка</a><img>
Тег <img> используется для вставки изображений на страницу.
<img src="image.jpg" alt="Описание изображения"><ul> и <li>
Тег <ul> используется для создания неупорядоченного списка, а тег <li> – для каждого элемента списка.
<ul>
<li>Пункт списка 1</li>
<li>Пункт списка 2</li>
<li>Пункт списка 3</li>
</ul><ol> и <li>
Тег <ol> используется для создания упорядоченного списка, а тег <li> – для каждого элемента списка.
<ol>
<li>Пункт списка 1</li>
<li>Пункт списка 2</li>
<li>Пункт списка 3</li>
</ol><div>
Тег <div> используется для группировки элементов и создания блочных областей на странице.
<div>
<p>Это группа элементов.</p>
<p>Это еще один элемент в группе.</p>
</div>Расширенные теги HTML
<table>, <tr>, <th>, <td>
Теги <table>, <tr>, <th> и <td> используются для создания табличных данных.
<table>
<tr>
<th>Заголовок столбца 1</th>
<th>Заголовок столбца 2</th>
</tr>
<tr>
<td>Ячейка данных 1</td>
<td>Ячейка данных 2</td>
</tr>
</table><form>, <input>, <button>
Теги <form>, <input> и <button> используются для создания форм и взаимодействия с пользователем.
<form>
<label for="name">Имя:</label>
<input type="text" id="name" name="name" required>
<button type="submit">Отправить</button>
</form><header>, <main>, <footer>
Теги <header>, <main> и <footer> используются для определения заголовка, основного содержимого и подвала страницы соответственно.
<header>
<h1>Заголовок страницы</h1>
</header>
<main>
<p>Основное содержимое страницы.</p>
</main>
<footer>
<p>Подвал страницы.</p>
</footer><video> и <audio>
Теги <video> и <audio> используются для вставки видео и аудио на страницу.
<video src="video.mp4" controls></video>
<audio src="audio.mp3" controls></audio>
