` и `<TITLE>`— одно и то же * Если они правильно распределены в документе, поисковым системам легче анализировать сайт, а пользователям проще его читать (сюда же настройка инклюзивности). Какие теги бывают: * Голова: head, скрытая дополнительная информация * заголовок страницы, title * метаданные: meta — инструкции, которые страница передаёт браузеру * Одиночный метатег `<meta charset="UTF-8">` подключает к HTML-документу алфавиты всех живых языков Земли. Без него браузер может неверно отобразить иероглифы, буквы кириллицы и вообще символы, не входящие в базовый латинский алфавит. * подключаемые файлы и шрифты: link * стили (`rel="stylesheet"`) * иконка для браузера (favicon) * `<link rel="icon" href="favicon.ico" type="image">`. * описание для поисковиков и социальных сетей * кодировка для правильного отображения * язык * ... * Тело: body, видимая часть страницы * Стиль: `style`, прописываем селекторы для описания стилей. Не рекомендуется его размещать в `body`. Их надо держать в `head`! * Заголовки: h1-h6 * Абзац: p * Ссылка: a (от слова anchor — якорь) * Если использовать атрибут `target="_blank"`, то ссылка будет открывать ресурс в новой вкладке * Изображение: img, нет закрывающего тега * Атрибут alt — текстовое описание изображения * Блоки: div — логическое объединение элементов. Они позволяют применять нам CSS стили сразу к множеству элементов. По умолчанию, `div` занимает все свободное место Специальные теги — теги для SEO, поисковых роботов, инклюзивности: * header — шапка сайта ## Атрибуты Дополнительные настройки тегов. Значения могут быть в одинарных или двойных кавычках (без разницы). У элементов есть общий набор атрибутов, например style — настройка CSS для элемента. ```html <h1 style="color: springgreen; font-size: 72px;">Твин Пикс</h1> ``` ## Example ```markup <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Тестовая страница

> For the complete documentation index, see [llms.txt](https://appsecurity.gitbook.io/devops/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://appsecurity.gitbook.io/devops/ppc/ppc-langs/frontend/html/vvedenie.md). # Введение ## Tips * * Могут быть атрибуты без значений (булевые): `` * ## Tags Общие замечания: * теги не чувствительны к регистру — `` и `<TITLE>`— одно и то же * Если они правильно распределены в документе, поисковым системам легче анализировать сайт, а пользователям проще его читать (сюда же настройка инклюзивности). Какие теги бывают: * Голова: head, скрытая дополнительная информация * заголовок страницы, title * метаданные: meta — инструкции, которые страница передаёт браузеру * Одиночный метатег `<meta charset="UTF-8">` подключает к HTML-документу алфавиты всех живых языков Земли. Без него браузер может неверно отобразить иероглифы, буквы кириллицы и вообще символы, не входящие в базовый латинский алфавит. * подключаемые файлы и шрифты: link * стили (`rel="stylesheet"`) * иконка для браузера (favicon) * `<link rel="icon" href="favicon.ico" type="image">`. * описание для поисковиков и социальных сетей * кодировка для правильного отображения * язык * ... * Тело: body, видимая часть страницы * Стиль: `style`, прописываем селекторы для описания стилей. Не рекомендуется его размещать в `body`. Их надо держать в `head`! * Заголовки: h1-h6 * Абзац: p * Ссылка: a (от слова anchor — якорь) * Если использовать атрибут `target="_blank"`, то ссылка будет открывать ресурс в новой вкладке * Изображение: img, нет закрывающего тега * Атрибут alt — текстовое описание изображения * Блоки: div — логическое объединение элементов. Они позволяют применять нам CSS стили сразу к множеству элементов. По умолчанию, `div` занимает все свободное место Специальные теги — теги для SEO, поисковых роботов, инклюзивности: * header — шапка сайта ## Атрибуты Дополнительные настройки тегов. Значения могут быть в одинарных или двойных кавычках (без разницы). У элементов есть общий набор атрибутов, например style — настройка CSS для элемента. ```html <h1 style="color: springgreen; font-size: 72px;">Твин Пикс</h1> ``` ## Example ```markup <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Тестовая страница

Это — моя страница

``` 1 — это объявление типа документа (необходимо указывать как артефакт)\ 2 — \ — содержит в себе всё содержимое на всей странице, и иногда его называют "корневой элемент"\ 3 — \ — Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы.\ 4 — \ — метаданные страницы — кодировка, то, что будет отображено в поисковике как краткое резюме, изображение как превью и тп\ 7 — \ — Он содержит *весь* контент, который вы хотите показывать посетителям вашей страницы