HTML (HyperText Markup Language)
это язык разметки, специально разработанный для создания гипертекстовых документов. Он определяет структуру и содержание веб-страниц, делая их доступными и навигируемыми.
В этом определении есть термин «гипертекст», который может вызвать затруднения в понимании.
Гипертекст
это текст, содержащий интерактивные элементы, называемые гиперссылками. Эти ссылки позволяют пользователям мгновенно переходить между различными документами или разделами внутри одного документа.
Гипертекст встречается не только в интернете, но и в документах Word. Однако на веб-сайтах он предоставляет уникальные возможности: можно перейти к конкретному разделу страницы (якорь), переместиться на другую страницу текущего сайта или даже на другой сайт.
Пример гиперссылки
Вот как выглядит гиперссылка в HTML: <
a href="https://example.com">Перейти на сайт</a>
Здесь "Перейти на сайт" — это видимый текст, а href указывает адрес назначения.
Структура HTML-документа
Веб-страница, которую вы видите в браузере, по сути, является обычным текстовым файлом с особой разметкой. Браузер считывает эту разметку и превращает ее в интерактивное визуальное представление.
Каждый HTML-документ имеет фундаментальную структуру, заключенную в корневой тег <html>...</html>, который служит контейнером для всего содержимого страницы.
Основные структурные элементы, которые мы рассмотрим, это <!DOCTYPE>, <html>, <head> и <body>
Назначение <!DOCTYPE>
Объявление <!DOCTYPE html> не является HTML-тегом в строгом смысле слова, это инструкция для веб-браузера. Она сообщает ему, какой стандарт HTML используется для текущего документа.
- Для современных веб-страниц всегда используется <!DOCTYPE html>, что указывает на стандарт HTML5.
- Это объявление критически важно, так как оно переводит браузер в "стандартный режим" (standards mode), обеспечивая корректную интерпретацию CSS и JavaScript, а также правильное отображение страницы.
- Без корректного DOCTYPE браузер может перейти в "режим совместимости" (quirks mode), что приведет к непредсказуемому отображению и проблемам с кроссбраузерностью.
Назначения <head> и <body>
<head> (Заголовок документа)
Секция <head> содержит метаинформацию о веб-странице, которая не отображается напрямую на странице, но важна для браузера, поисковых систем и других сервисов.
- <meta charset="UTF-8">: Указывает кодировку символов.
- <title>: Заголовок страницы, отображаемый во вкладке браузера.
- <link>: Ссылки на внешние таблицы стилей (CSS).
- <script>: Ссылки на внешние скрипты (JavaScript) или сам код.
<body> (Тело документа)
Секция <body> содержит всё видимое содержимое веб-страницы — то, что пользователь видит и с чем взаимодействует в браузере.
- <h1>-<h6>: Заголовки различных уровней.
- <p>: Параграфы текста.
- <img>: Изображения.
- <a>: Гиперссылки.
- <div>: Универсальные контейнеры для группировки содержимого.
- <ul>, <ol>, <li>: Списки.
Подробнее в видео - https://dzen.ru/video/watch/6897341dedc8701121aec52d
Подписывайся! Будет интересно!
Телеграмм - https://t.me/john_soi_blog
Дзен - https://dzen.ru/john_soi_blog
Boosty - https://boosty.to/dh_education