Основы веб-разработки: структура документа HTML5 и семантические теги

Веб-страницы, которые мы ежедневно просматриваем в Интернете, создаются с использованием языка гипертекстовой разметки HTML (HyperText Markup Language), разработанного Тимом Бернерсом-Ли в 1991 году.

Гипертекст — это текст, содержащий интерактивные связи (гиперссылки) с другими документами, аудио, видео или изображениями. Кликая по ссылке, пользователь мгновенно переходит на другой связанный ресурс в любой точке мира.

HTML — это НЕ язык программирования (в нем нет циклов, переменных или математических вычислений). Это декларативный язык разметки, который с помощью специальных текстовых маркеров — тегов — указывает браузеру, где находится заголовок, где абзац текста, где таблица, а где вставлена картинка.

Любая правильная веб-страница имеет строгую структуру вложенности:

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<title>Заголовок вкладки браузера</title>

</head>

<body>

<h1>Главный заголовок страницы</h1>

<p>Первый абзац текста страницы.</p>

</body>

</html>

Разбор элементов скелета:

• <!DOCTYPE html> — сообщает браузеру, что документ написан по современному стандарту HTML5;

• <html>...</html> — корневой контейнер всей веб-страницы;

• <head>...</head> — служебная «голова» документа (техническая информация для браузера и поисковиков: кодировка UTF-8, подключение стилей, название страницы в теге <title>);

• <body>...</body> — видимое «тело» страницы, куда помещается все, что видит пользователь на экране.

Базовые теги контента в HTML5:

• Заголовки: от <h1> (самый главный заголовок) до <h6> (наименьший подзаголовок);

• Абзацы: тег <p>...</p> (paragraph) создает текстовый блок с отступами сверху и снизу;

• Выделение текста: <strong>...</strong> (важный полужирный текст), <em>...</em> (логический курсив);

• Списки:

1. Нумерованный список: <ol> (ordered list) с элементами <li> (list item);

2. Маркированный список (точечный): <ul> (unordered list) с элементами <li>;

• Гиперссылки: тег <a href="URL">текст_ссылки</a> (anchor). Атрибут href задает адрес перехода (например, <a href="https://ibrain.kz">Портал ibrain.kz</a>);

• Изображения: одиночный тег <img src="photo.jpg" alt="Описание фото">. Атрибут src указывает путь к файлу картинки, а alt — текст на случай, если картинка не загрузится.

В современном стандарте HTML5 введены семантические теги, которые четко объясняют браузерам и поисковым роботам Google и Яндекс назначение каждого смыслового блока сайта:

• <header> — «шапка» сайта (логотип, навигация);

• <nav> — блок основных навигационных ссылок меню;

• <main> — уникальный главный контент страницы;

• <article> — самостоятельная законченная публикация (статья, новость);

• <section> — тематический смысловой раздел статьи;

• <footer> — «подвал» сайта (авторские права, контакты, соцсети).