Основы HTML

HTML (Hypertext Markup Language) — язык разметки для структурирования и отображения веб-страниц.

Структура HTML-документа

Базовый шаблон (HTML5):

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

<!DOCTYPE html> — объявление типа документа.
<head> — метаданные (не отображаются в браузере).
<body> — основное содержимое.

Метатег Viewport

Критичен для мобильных устройств. Позволяет контролировать масштаб.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Основные теги и семантика

HTML5 вводит семантические теги для улучшения понимания структуры поисковиками и программами экранного доступа:

<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>.

Текст и форматирование

Заголовки: <h1>...<h6>.
Абзацы и переносы: <p>, <br>.
Логическое выделение: <strong> (важное, жирный), <em> (акцент, курсив), <code> (код).
Контейнеры: <div> (блочный), <span> (строчный).

Списки

Маркированный: <ul> + <li>.
Нумерованный: <ol> + <li>.

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

Ссылка: <a href="URL" target="_blank">Текст</a>.
Изображение: <img src="path" alt="описание" width="500">.

Таблицы

Используются для отображения структурированных данных. Не рекомендуются для верстки макета.

Структура таблицы:

<table>
    <caption>Заголовок таблицы</caption>
    <thead>
        <tr>
            <th>Заголовок столбца 1</th>
            <th>Заголовок столбца 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Данные 1</td>
            <td>Данные 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Итог 1</td>
            <td>Итог 2</td>
        </tr>
    </tfoot>
</table>

Объединение ячеек: colspan (по горизонтали), rowspan (по вертикали).

Формы

Инструмент для сбора данных пользователя.

Базовая форма:

<form action="/handler-url/" method="post">
    <label for="username">Имя:</label>
    <input type="text" id="username" name="name" placeholder="Введите имя">
    
    <button type="submit">Отправить</button>
</form>

Элементы управления:

<input>: type="text", password, email, number, checkbox, radio, file, date, hidden.
<select> + <option>: выпадающий список.
<textarea>: многострочный ввод текста.
<fieldset> + <legend>: группировка связанных полей.

Атрибуты валидации:

required, minlength, maxlength, min, max, pattern (регулярные выражения).

4.0 KiB Raw Blame History