Основные теги HTML для создания сайта

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

1. Основная структура HTML-документа

Любая HTML-страница начинается с базовой структуры:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Название страницы</title>
</head>
<body>
    <h1>Заголовок страницы</h1>
    <p>Основной контент страницы.</p>
</body>
</html>

<!DOCTYPE html> – объявляет тип документа (HTML5).
<html> – корневой тег страницы.
<head> – содержит метаинформацию о странице.
<title> – задает заголовок страницы во вкладке браузера.
<body> – содержит отображаемый пользователю контент.

2. Теги заголовков и абзацев

Для организации текста используются заголовки и абзацы:

<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<p>Обычный абзац текста.</p>

<h1>...<h6> – заголовки различных уровней (h1 – самый крупный, h6 – самый мелкий).
<p> – абзац текста.

3. Форматирование текста

Для выделения текста можно использовать следующие теги:

<strong>Жирный текст</strong>
<em>Курсивный текст</em>
<u>Подчеркнутый текст</u>
<mark>Выделенный текст</mark>

<strong> – жирный текст (важный).
<em> – курсив (акцент).
<u> – подчеркнутый текст.
<mark> – выделение цветом.

4. Списки

Списки позволяют структурировать информацию:

<ul>
    <li>Элемент ненумерованного списка</li>
</ul>

<ol>
    <li>Элемент нумерованного списка</li>
</ol>

<ul> – ненумерованный список.
<ol> – нумерованный список.
<li> – элемент списка.

5. Ссылки и изображения

Для навигации используются ссылки, а для отображения графики – изображения:

<a href="https://example.com">Перейти на сайт</a>
<img src="image.jpg" alt="Описание изображения">

<a> – создает гиперссылку.
<img> – вставляет изображение.

6. Таблицы

Для представления табличных данных используется тег <table>:

<table>
    <tr>
        <th>Заголовок</th>
        <th>Заголовок</th>
    </tr>
    <tr>
        <td>Ячейка</td>
        <td>Ячейка</td>
    </tr>
</table>

<table> – создаёт таблицу.
<tr> – строка таблицы.
<th> – заголовочная ячейка.
<td> – обычная ячейка.

7. Формы

Формы используются для ввода данных пользователем:

<form action="submit.php" method="post">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Отправить">
</form>

<form> – создаёт форму.
<input> – поле ввода.
<label> – подпись для элементов формы.
<submit> – кнопка отправки.

8. Блоки и контейнеры

Для группировки элементов используются <div> и <span>:

<div>
    <p>Блочный элемент.</p>
</div>

<span>Строчный элемент.</span>

<div> – блочный контейнер.
<span> – строчный контейнер.

Заключение

Теги HTML позволяют создавать структуру веб-страницы, форматировать текст, вставлять изображения, создавать формы и таблицы. Использование HTML в сочетании с CSS и JavaScript позволяет разрабатывать современные интерактивные веб-сайты.