Чтобы сверстать простой сайт, необязательно знать все HTML-теги. Для начала можно изучить самые популярные — их достаточно для создания примитивной страницы с текстом, ссылками, картинками, подключёнными стилями и скриптами.
Мы будем рассматривать популярность тегов, опираясь на исследование Николая Шабалина — автора профессиональных курсов HTML Academy. Он проанализировал структуру 55 тысяч сайтов и посмотрел, из чего они состоят: какие теги встречаются часто, а какие — редко.
Теги , и
На каждой веб-странице есть три обязательных тега, они формируют структуру документа и содержат информацию для браузеров и поисковых систем.
— контейнер для содержимого страницы.
содержит служебную информацию. Здесь подключаются стили, указывается заголовок страницы, подключаются метатеги.
содержит контент — всё, что отображается в браузере.
Тег
Тег — самый популярный. Он используется как контейнер для HTML-элементов. В него можно добавить заголовок, абзацы текста, списки, формы или что-то ещё, а потом стилизовать.
О нас
Мы очень любим котов и веб-разработку.
Тег не имеет семантического значения, то есть не передаёт никакой информации о своём содержании. Он нужен для визуального форматирования и разметки.
Обращу внимание на отрыв от других тегов. Он потому популярный, что им можно описать бессмысленные сущности, коих больше, чем осмысленных. Также не для всех осмысленных сущностей есть теги. Например, используется для создания сетки. Для сеток нет тегов, только стили: гриды, флексы, флоаты и прочее.
Некоторые разработчики создают на смысловые блоки, например, шапку, подвал или меню. Так можно делать, но это плохая практика. Лучше использовать специальные семантические теги: , , , , и . Они дают больше информации о содержимом и делают код более читабельным.
Тег
Если в атрибут добавить протокол mailto: , ссылка откроет почтовый клиент пользователя и создаст электронное письмо. Например, когда пользователь кликнет по ссылке из примера ниже, откроется клиент с автоматически заполненным полем получателя — keks@example.com.
Тег
Тег — несемантический, как и . Он используется для стилизации отдельных слов и фраз в блоке текста. Например, вы можете использовать тег, чтобы изменить цвет слова в абзаце, применить другой шрифт или начертание.
В этом параграфе часть слов написана красным цветом.
280 978 и 1 463 187 упоминаний.
создаёт неупорядоченный список, то есть элементы в нём не пронумерованы, а помечены маркером. Внутри тега с помощью добавляются элементы списка.
С помощью таких списков разработчики создают навигацию, каталог с карточками товаров, пагинацию, раздел с отзывами и прочее. То есть блоки, которые содержат несколько однородных и равноправных элементов.
Тег
Тег
создаёт абзацы — отделяет одну часть текста от другой. Например, все абзацы на этой странице размечены тегом
Если вы верстаете личный блог, сайт-визитку или целый интернет-магазин, не забудьте правильно разметить текст. Неважно, для каких целей вы создаёте продукт и сколько в нём будет текста — в любом случае абзацы важны.
В письменной речи принято в одном абзаце раскрывать одну идею. Но в HTML абзац — не смысловая, а скорее структурная единица. Он лишь явно выделяет параграфы. Притом в тег можно вкладывать не только текст, но и, например, картинки.
Тег добавляет графики, иллюстрации и фотографии. Обычно его используют, когда на страницу нужно вставить контентное изображение — то есть которое доносит до пользователей полезную информацию. Например, показывает продукт или покупателей. Фоны и декоративные элементы чаще добавляют с помощью CSS или тега .
У есть четыре обязательных атрибута:
alt — альтернативный текст, описывающий изображение. Нужен на случай, если картинка не загрузится.
src — адрес, по которому находится изображение.
width — ширина изображения.
height — высота изображения.
Тег
Тег переносит текст на другую строку, не начиная нового абзаца.
Санкт-Петербург, набережная реки Карповки, 5.
Распространённая ошибка разработчиков-новичков — использовать для деления текста на абзацы. Тег не подходит для таких задач — для абзацев есть
.
Тег
Тег подключает на страницу JavaScript. ставится в конце документа, перед закрывающим тегом
. Если сделать наоборот и подключить JS в начале, страница будет отрисовываться медленнее.
У тега есть обязательный атрибут src , в котором указывается путь до файла.
Тег
Тег подключает CSS-файлы. В отличие от , он ставится в начале документа, в теге .
У два обязательных атрибута:
rel со значением stylesheet означает, что файл содержит таблицу стилей.
href указывает адрес файла.
Тег
Тег содержит метаданные — информацию, которая может влиять на страницу. Атрибут charset указывает кодировку страницы, чтобы браузер правильно отобразил текст. Самая распространённая современная кодировка — utf-8.
С помощью атрибута name=»keywords» можно подсказать поисковым системам ключевые слова, по которым пользователи должны находить сайт. Атрибут name=»description» указывает описание сайта, которое будет видно, например, в поисковике.
Тег
Тег форматирует текст — делает его курсивным.
Дизайнер решил выделить текст курсивом
Часто тег используется для иконок: . Именно поэтому он так часто встречается в исследовании. Однако такое использование тега — грубая ошибка, потому что он предназначен для работы с текстом
Кстати, есть ещё один тег для выделения курсивом, не такой популярный — . Разработчики используют его, чтобы поставить акцент на слове или фразе.
Тебе не стоило дразнить Кекса. Он обиделся
Что ещё надо знать
Как мы говорили в начале статьи, этих тегов хватит для создания простой страницы. Но чтобы верстать хорошо, придётся изучить семантические теги. То есть не создавать всю разметку на , а размечать элементы правильно. Например, для шапки сайта использовать , для подвала — , для навигации — , а для крупных смысловых разделов — .
Есть и другие теги — вы найдёте их в спецификации HTML.
Потренировать навыки вёрстки можно на курсе «Старт в программировании». Два первых раздела — бесплатные.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
The top CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.
Try it
The effect of top depends on how the element is positioned (i.e., the value of the position property):
When position is set to absolute or fixed , the top property specifies the distance between the element’s outer margin of top edge and the inner border of the top edge of its containing block.
When position is set to relative , the top property specifies the distance the element’s top edge is moved below its normal position.
When position is set to sticky , the top property is used to compute the sticky-constraint rectangle.
When position is set to static , the top property has no effect.
When both top and bottom are specified, position is set to absolute or fixed , and height is unspecified (either auto or 100% ) both the top and bottom distances are respected. In all other situations, if height is constrained in any way or position is set to relative , the top property takes precedence and the bottom property is ignored.
/* values */ top: 3px;top: 2.4em;/* s of the height of the containing block */top: 10%;/* Keyword value */top: auto;/* Global values */top: inherit;top: initial;top: revert;top: revert-layer;top: unset;
Values
A negative, null, or positive that represents:
for absolutely positioned elements, the distance to the top edge of the containing block.
for relatively positioned elements, the distance that the element is moved below its normal position.
for absolutely positioned elements, the position of the element is based on the bottom property, while height: auto is treated as a height based on the content; or if bottom is also auto , the element is positioned where it should vertically be positioned if it were a static element.
for relatively positioned elements, the distance of the element from its normal position is based on the bottom property; or if bottom is also auto , the element is not moved vertically at all.
Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a , , or the auto keyword.
Formal definition
Initial value
auto
Applies to
positioned elements
Inherited
no
Percentages
refer to the height of the containing block
Computed value
if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
div>The size of this content is determined by the position of its edges.div>
Specifications
Browser compatibility
BCD tables only load in the browser
See also
inset , the shorthand for all related properties: top , bottom , left , and right
The mapped logical properties: inset-block-start , inset-block-end , inset-inline-start , and inset-inline-end and the shorthands inset-block and inset-inline
position
Found a content problem with this page?
This page was last modified on Feb 21, 2023 by MDN contributors.
Свойство top для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчёт координат зависит от значения свойства position. Если оно равно absolute , в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края (рис. 1).
В случае значения relative , top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative , то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя (рис. 2).
Демо¶
Синтаксис¶
1234567891011121314
/* values */top:3px;top:2.4em;/* s of the height of the containing block */top:10%;/* Keyword value */top:auto;/* Global values */top:inherit;top:initial;top:unset;
Значения¶
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Значение свойства top может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.
html>head>metacharset="utf-8"/>title>toptitle>style>.menuposition:absolute;/* Абсолютное позиционирование */left:300px;/* Положение от левого края */top:50px;/* Положение от верхнего края */width:120px;/* Ширина блока */background:#e0e0e0;/* Цвет фона */border:1pxsolid#000;/* Параметры рамки */padding:5px;/* Поля вокруг текста */>.contentposition:absolute;/* Абсолютное позиционирование */left:0;/* Положение от левого края */top:0;/* Положение от верхнего края */width:280px;/* Ширина блока */background:#00a5b6;/* Цвет фона */color:white;/* Цвет текста */padding:5px;/* Поля вокруг текста */padding-right:60px;/* Отступ справа */text-align:justify;/* Выравнивание по ширине */>style>head>body>divclass="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. div>divclass="menu"> Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. div>body>html>
