HTML

HTML

HyperText Markup Language

язык разметки, который используется для создания и структурирования контента на веб-страницах

HyperText (гипертекст)

текст с ссылками на другие документы

Markup (разметка)

использование тегов для структурирования данных


HTML — не язык программирования . Он не выполняет логических операций, не содержит условий и циклов

Веб-браузеры (Chrome, Firefox, Safari и др.) интерпретируют HTML, чтобы отображать контент так, как задумал разработчик

Главная цель HTML

Определить, какие части текста являются заголовками, абзацами, списками, изображениями, ссылками и т.д.

Основные компоненты HTML

Элементы (теги)

основная структурная единица веб-страницы


<p>Это абзац текста</p>
  • <p> — открывающий тег
  • Это абзац текста. — содержимое
  • </p> — закрывающий тег

Основные компоненты HTML

Элементы (теги)

Элементы HTML состоят из:

  1. Открывающего тега: <тег>
  2. Содержимого: контент внутри тега
  3. Закрывающего тега: </тег> 

<тег>Содержимое</тег>

Основные компоненты HTML

Одиночные теги

self-closing или самозакрывающиеся

Некоторые теги не содержат контента и не требуют закрывающего тега

Например, <br> (разрыв строки), <hr> (горизонтальная линия), <img> (изображение) 


<img src="image.jpg" alt="Описание изображения" />
<br />

Основные компоненты HTML

Атрибуты

Атрибуты добавляют к тегам дополнительную информацию и всегда указываются в открывающем теге 


<тег атрибут="значение">Содержимое</тег>

Виды атрибутов

Глобальные

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

id, class, style

Специфические

характерны для определённых тегов

например, href для <a>, src для <img>)

Основные компоненты HTML

Комментарии

Комментарии помогают разработчикам документировать код и временно отключать его части. 


<!-- Это комментарий, который не отображается на странице -->

Основные компоненты HTML

Документ и структура

Любая HTML-страница начинается с объявления типа документа 


<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Название страницы</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
  </body>
</html>

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

HTML-документ — это иерархическая структура, представляемая в виде "дерева" элементов, известного как DOM (Document Object Model)

DOM (Объектная модель документа)

это структура HTML-документа в виде дерева, где каждый тег, атрибут и текстовый узел — это объект

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

Структура DOM-дерева


<body>
  <h1>Заголовок</h1>
  <p>Абзац текста <strong>с выделением</strong>.</p>
</body>
  • Корень: <html>
    • Ветка: <body>
      • Узлы: <h1> , <p>
        • Вложенные узлы: <strong> (внутри <p> )
        • Текстовые узлы: "Заголовок", "Абзац текста", "с выделением"

Структура index.html 


<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Моя первая страница</title>
  </head>
  <body>
    <h1>Добро пожаловать!</h1>
    <p>Это базовый HTML-документ.</p>
  </body>
</html>
  • <!DOCTYPE html> — объявляет браузеру, что используется HTML5.
  • <html lang="ru"> — корневой элемент документа, атрибут lang указывает язык контента.
  • <head> — метаинформация (не видна на странице): кодировка, заголовок, подключение стилей и скриптов.
  • <body> — видимая часть страницы: текст, изображения, ссылки и т.д.

HTML тэги

Виды тегов

По позиции

Блочные (block)

создают новую строку и занимают всю ширину родительского контейнера

  • <div> — универсальный контейнер
  • <p> — абзац
  • <h1> – <h6> — заголовки

Строчные (inline)

не создают новую строку и занимают только столько места, сколько требуется содержимому

  • <span> — универсальный контейнер
  • <a> — ссылка
  • <img> — изображение

HTML тэги

Виды тегов

По функции

Контейнерные (группирующие) теги

Используются для структурирования контента и создания макета страницы

  • ..., <div> , <span>

Гиперссылки и навигация

Позволяют создавать ссылки и перемещаться между страницами

  • <a> — основная ссылка
  • <link> — подключение внешних файлов (CSS, фавиконка)

HTML тэги

Виды тегов

По функции

Текстовые теги

Используются для форматирования текста

  • ... <h1> – <h6> , <p>

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

  • <strong> — жирный текст (важный)
  • <em> — курсив (выделение)
  • <u> — подчёркнутый текст
  • <s> — зачёркнутый текст
  • <mark> — выделение цветом
  • <small> — уменьшенный текст
  • <sub> / <sup> — нижний и верхний индекс

HTML тэги

Виды тегов

По функции
Изображения
  • <img> — вставка изображения
  • <picture> — адаптивные изображения
  • <figure> / <figcaption> — оформление изображений
Видео
  • <video> — вставка видео
  • <source> — несколько форматов видео
Аудио
  • <audio> — вставка аудио
  • <source> — альтернативные форматы аудио

HTML тэги

Виды тегов

По функции
Таблицы

Используются для представления табличных данных

  • <table> — таблица
  • <tr> — строка
  • <td> — ячейка
  • <th> — заголовочная ячейка
  • <thead> , <tbody> , <tfoot> — разделы таблицы
Формы и ввод данных

Позволяют пользователям вводить данные

  • <form> — форма
  • <input> — поле ввода
  • <textarea> — многострочное поле
  • <button> — кнопка
  • <select> , <option> — выпадающий список
  • <label> — подпись к полю

HTML тэги

Виды тегов

По функции
Структурные и вспомогательные теги
  • <br> — перенос строки
  • <hr> — горизонтальная линия
  • <wbr> — возможный перенос слова
  • <details> / <summary> — раскрывающийся блок
  • <progress> — индикатор выполнения
  • <meter> — индикатор измерений
Скрипты и мета-информация
  • <script> — подключение JavaScript
  • <noscript> — контент, если JS отключен
  • <meta> — метаданные страницы
  • <title> — заголовок страницы
  • <style> — встроенные стили

Метаинформация

данные о веб-странице, которые не отображаются напрямую в браузере, но используются для SEO, адаптивности, кодировки и интерактивности страницы

  • <meta charset="UTF-8"> — кодировка.
  • <meta name="viewport"> — адаптивность.
  • <meta name="description"> — описание страницы (SEO).
  • <meta property="og:image"> — картинка для соцсетей.

meta тэги указываются в теге <head>...</head>

Атрибуты

Глобальные атрибуты

id (идентификатор элемента)

  • Уникальный идентификатор для поиска элемента в CSS и JavaScript 

<h1 id="main-title">Заголовок страницы</h1>

class (класс элемента)

  • Позволяет группировать элементы для применения стилей 

<p class="text-bold text-red">Этот текст выделен.</p>

Атрибуты

Глобальные атрибуты

style (встроенные / inline стили)

  • Применение CSS-стилей прямо в HTML

<div style="color: blue; font-size: 18px;">Текст с синим цветом.</div>

hidden (скрытый элемент)

  • Полностью скрывает элемент с веб-страницы 

                    <p hidden>Этот текст скрыт и не виден пользователю.</p>

Атрибуты

Глобальные атрибуты

  • id — уникальный идентификатор элемента.
  • class — для группировки элементов по классу.
  • style — для встроенного CSS-оформления.
  • title — всплывающая подсказка при наведении.
  • hidden — скрывает элемент с веб-страницы.

Специфические атрибуты

  • href для <a> — адрес ссылки.
  • src для <img> — путь к изображению.
  • alt для <img> — альтернативный текст.
  • value для <input> — значение поля ввода.
  • target для <a> — способ открытия ссылки.

Атрибуты

Работа с булевыми атрибутами

атрибуты, которые принимают значение true, если они указаны, и false, если отсутствуют

Им не нужно задавать значение 

<input type="checkbox" checked />
<input type="text" disabled value="Недоступное поле" />

Семантика в HTML

теги, которые не просто структурируют контент, но и дают браузеру и поисковым системам понять смысловую нагрузку элементов

  • <header> — верхняя часть страницы
  • <nav> — блок с навигацией
  • <main> — основной контент
  • <section> — раздел контента
  • <aside> — боковая информация (сайдбар, рекламные блоки)
  • <article> — самостоятельный блок (например, новостная статья)
  • <footer> — подвал страницы 

<div>Заголовок страницы</div>
<div>Меню</div>
<div>
    <div>
        <div>Название статьи</div>
        <div>Содержание статьи...</div>
    </div>
</div>
<div>Контактная информация</div>
                        

<header>Заголовок страницы</header>
<nav>Меню</nav>
<main>
    <article>
        <h1>Название статьи</h1>
        <p>Содержание статьи...</p>
    </article>
</main>
<footer>Контактная информация</footer>

Примеры семантических тегов

<nav >
<main>
<header>
<section>
<article>
<article>
<article>
<article>
<footer>

Функция семантики

  • Улучшение SEO (поисковые системы лучше индексируют сайт).
  • Повышение доступности (экранные читалки правильно озвучивают контент).
  • Улучшение читаемости кода (разработчики быстрее понимают структуру).
  • Упрощение поддержки и модификации кода.

<div class="header">Заголовок</div>
<div class="menu">Меню</div>
<div class="content">
    <div class="article">
        <h1>Название статьи</h1>
        <p>Текст статьи...</p>
    </div>
</div>
<div class="footer">Контакты</div>

Минусы кода

  • Поисковым системам и браузерам сложнее понять структуру страницы.
  • Машинные алгоритмы не знают, где основное содержимое, а где навигация.
  • Разработчику сложнее быстро разобраться в коде.
Codepen.io 

.c1 {
    background-color: #ff0000
}

.c2 {
    background-color: #00ff00
}

.c3 {
    background-color: #0000ff
}

.c4 {
    background-color: #ffff00
}

.c5 {
    background-color: #ff00ff
}

.c6 {
    background-color: #00ffff
}