✕ Закрыть

 

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

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

Фото: Основные теги 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 позволяет разрабатывать современные интерактивные веб-сайты.