Skip to Content
⚙️ Активно работаю над созданием контента и документами для портфолио
База знанийТехнологииHTML

HTML

Hyper Text Markup Language – язык гипертекстовой разметки.

Официальная спецификация – https://html.spec.whatwg.org/ 
MDN Web Docs (справочник) – https://developer.mozilla.org/ru/ 

Структура HTML-элемента

HTML
<div>
	<a href="https://myrepo.ru" target="_blank">Мой репозиторий</a>
</div>

<div> и <a> – открывающие теги;
</div> и </a> – закрывающие теги;

href и target – атрибуты тега <a>;
https://myrepo.ru и _blank – значения атрибутов тега <a>;
Мой репозиторий – содержание элемента (тега <a>).

<div> по отношению к <a> – родительский элемент;
<a> по отношению к <div> – дочерний элемент, вложение.

Структура HTML-документа

HTML
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Заголов HTML-документа</title>
		<link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="css/cdn.css">
  </head>
  <body>
    <!-- Текстовый комментарий в HTML-коде документа -->
    <button>Кнопка</button>
  </body>
</html>

<!DOCTYPE html><html></html> – HTML-документ (страница);
<head></head> – информация о странице с метаданными;
<body></body> – видимое содержание страницы.

Метатеги

В <head> содержатся правила, по которым браузер обрабатывает HTML-страницу. Эти правила описываются метатегами. Например:

HTML
<meta charset="utf-8">
<title>Заголовок страницы</title>
<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" href="icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Описание страницы">

Для создания красивого превью при копировании ссылки в мессенджеры или соцсети используют метатеги в формате OpenGraph . Вот пример с сайта IMDb.com :

HTML
<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

Размеры элементов

  • 32px – в пикселях;
  • 10% – в процентах от такого же свойства родительского элемента;
  • 50vh и 50vw – в долях от viewport (окна просмотра в браузере);
  • 1.5em – относительно размера шрифта текущего или родительского элемента;
  • .8rem – относительно размера шрифта корневого элемента html.

<article> vs. <section>

В спецификации у тега <article> довольно расплывчатое описание. Из-за этого не всегда понятно, когда использовать его, а когда <section>.

<section> применяется для выделения большого логического блока на странице. Это структурный элемент страницы.

<article> применяется для вёрстки блока, не привязанного к окружающему его контенту. Если можно убрать этот блок со страницы, и ничего не изменится, смысл не исказится, то допустимо использовать <article>.

Обновлено
GithubJavascript