HTML (Hypertext Markup Language) — Язык гипертекстовой разметки это код, который используется для структурирования и отображения веб-страницы и её контента.
Блочные и строчные элементы
Блочные элементы — формируют видимый блок на странице. Они окажутся на новой строке после любого контента, который шёл до них, и любой контент после них также окажется на новой строке. Чаще всего элементами блочного уровня бывают структурные элементы страницы, представляющие собой, например, параграфы (абзацы), списки, меню навигации, футеры, или подвалы, и т. п. Элементы блочного уровня не вкладываются в строчные элементы, но иногда могут вкладываться в другие элементы блочного уровня.
Строчные элементы — это те, которые содержатся в элементах блочного уровня и окружают только малые части содержимого документа, не целые абзацы и группировки контента (например ссылки или span). Строчные элементы не приводят к появлению новой строки в документе.
Название страницы и иконка
<title>Название страницы</title>
<link rel="shortcut icon" href="Ссылка на иконку" type="image/x-icon" />Подключение стилей и скриптов
<link rel="stylesheet" href="my-css-file.css" />
<script src="my-js-file.js"></script>Кодировка текста документа
<meta charset="UTF-8">utf-8 — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком.
Описание
У элементов meta часто есть атрибуты name и content:
- name — тип элемента, то есть какие именно метаданные он содержит.
- content — сами метаданные.
<meta name="author" content="Имя автора" />
<meta name="description" content="Описание проекта используется на страницах поисковой выдачи" />Протокол Open Graph
Мета данные для отображения в соц. сетях при публикации ссылки на сайт
<meta property="og:title" content="Заголовок страницы" />
<meta property="og:type" content="Тип контента (например article)" />
<meta property="og:url" content="Ссылка на контент" />
<meta property="og:image" content="Ссылка на картинку для превью" />Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">Чтобы пользоваться сайтами было удобно, нужно правильно масштабировать страницы. Для этого используется метатег viewport. Он не делает верстку адаптивной. Его предназначение — контроль масштаба отображения страницы.
Для области просмотра можно определить следующие параметры:
- width — ширина области viewport. Принимает значение device-width или фактическое число пикселей в виде целого неотрицательного числа — например, 320px.
- height — высота области viewport. Принимает значение device-height или фактическое число пикселей.
- initial-scale — коэффициент масштабирования начального размера viewport. Принимает значения от 0.1 до 10. Значение 1.0 задает отсутствие масштабирования.
- user-scalable — указывает, может ли пользователь масштабировать страницу жестами. Принимает значение yes или no.
- minimum-scale — минимальное значение масштабирования. Принимает значения от 0.1 до 10. Значение 1.0 задает отсутствие масштабирования.
- maximum-scale — максимальное значение масштабирования. Принимает значения от 0.1 до 10. Значение 1.0 задает отсутствие масштабирования.