HTML *
* О нём мало говорят
HTML
Первое, что видит браузер
Содержит информацию о ресурсах
Парсится различными инструментами
Декларативный
109
<a> <abbr>
<address> <area> <article>
<aside> <audio> <b> <base> <bdi> <bdo> <blockquote> <body>
<br> <button> <canvas> <caption>
<cite> <code> <col> <colgroup>
<data> <datalist> <dd> <del>
<details> <dfn> <dialog> <div>
<dl> <dt> <em> <embed>
<fieldset> <figcaption> <figure>
<footer> <form> <h1-h6> <head>
<header> <hgroup> <hr> <html>
<i> <iframe> <img> <input>
<ins> <kbd> <label> <legend>
<li> <link> <main> <map>
<mark> <math> <menu> <meta>
<meter> <nav> <noscript>
<object> <ol> <optgroup>
<option> <output> <p> <picture>
<pre> <progress> <q> <rp>
<rt> <ruby> <s> <samp>
<script> <search> <section>
<select> <slot> <small> <source>
<span> <strong> <style> <sub>
<summary> <sup> <svg> <table>
<tbody> <td> <template>
<textarea> <tfoot> <th> <thead>
<time> <title> <tr> <track>
<u> <ul> <var> <video>
<wbr>
Elements
01. Семантичная вёрстка
Ориентиры (<header>, <main>, <aside>, <footer>, ...)
Дерево заголовков (<h1>-<h6>)
Группировка (<section>, <blockquote>, <table>, <pre>, ...)
Подписи (<table> + <caption>, <figure> + <figcaption>, <fieldset> + <legend>)
Семантика текста (<strong>, <i>, <code>, <dfn>, <kbd>, ...)
Зачем: скринридеры, режим чтения, браузерные расширения, улучшение поисковой выдачи, SEO
Семантика для циников, Вадим Макеев
02. lang
<html lang="ru"><!-- Основной язык контента — русский -->
<head><!-- ... --></head>
<body>
<p>Контент на русском языке. <i lang="en">English content</i>.</p>
<p lang="en">English content...</p>
<p lang="de">Deutscher Inhalt...</p>
</body>
</html>
Зачем: переводчики, скринридеры, региональная выдача.
03. translate
translate="" или translate="yes" — переводить, по умолчаниюtranslate="no" — не переводить
<p>Code sample:</p>
<pre translate="no">
<!-- code -->
</pre>
<p>Some <i translate="no">non-translatable term</i> in text.</p>
<p>Some foreign word "<i lang="de" translate="yes">Fremdwort</i>" in text.</p>
Зачем: контроль автоматического перевода.
04. hidden
<div class="notification" hidden>
<!-- ... -->
</div>
Зачем: не требуется пользовательский CSS, предотвращение сдвигов макета (CLS).
05. alt
<img src="cat.jpg" alt="Бело-рыжый кот сидит на подоконнике.">
<p>
<img src="phone.svg" alt="Телефон:"> +123 456 78 90
</p>
<a href="/">
<img src="logo.svg" alt="Главная">
</a>
<img src="decorative.png" alt="">
<figure>
<img src="chart.svg" alt="График популяции зубров в Беларуси.">
<figcaption>На графике показана динамика популяции ...</figcaption>
</figure>
Зачем: скринридеры, поиск по картинкам, fallback.
Images Tutorial | Web Accessibility Initiative
06. <source>
<picture>
<source srcset="img-1920.webp 1920w, img-1024.webp 1024w, img-768.webp 768w, img-576.webp 576w" sizes="(min-width: 900px) 50vw, 100wv" type="image/webp">
<img src="img.jpg" srcset="img-1920.jpg 1920w, img-1024.jpg 1024w, img-768.jpg 768w, img-576.jpg 576w" sizes="(min-width: 900px) 50vw, 100wv" alt="">
</picture>
<video controls width="600" height="400">
<source src="video.hevc.mp4" type="video/mp4; codecs=hevc,mp4a.40.2">
<source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08,opus">
<source src="video.h264.mp4" type="video/mp4; codecs=avc1.4D401E,mp4a.40.2">
</video>
Зачем: адаптивность, ретина, art direction, уменьшение трафика.
Audio and Video
Пример <picture> и <source>
07. width и height
<picture>
<source srcset="image-desktop.jpg" width="1920" height="1080" media="(min-width: 1200px)">
<source srcset="image-tablet.jpg" width="800" height="600" media="(min-width: 900px)">
<source srcset="image-mobile.jpg" width="320" height="640"> alt="Описание картинки">
</picture>
<video src="movie.mp4" controls width="1920" height="1080"></video>
<iframe src="https://youtube.com/embed/video_id" width="560" height="315" frameborder="0" allowfullscreen></iframe>
Зачем: предотвращение сдвигов макета (CLS).
Cumulative Layout Shift (CLS)
08. Субтитры
<video src="video.mp4" controls width="1920" height="1080">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>
WEBVTT
00:00:00.000 -> 00:00:05.000
Welcome to our video tutorial on HTML5 video!
00:00:05.000 -> 00:00:10.000
In this tutorial, we will show you how to use the HTML5 video tag.
Зачем: текстовая альтернатива.
Web Video Text Tracks Format (WebVTT)
Пример субтитров
09. loading
<picture>
<source srcset="image-desktop.jpg" width="1920" height="1080" media="(min-width: 1200px)">
<source srcset="image-tablet.jpg" width="800" height="600" media="(min-width: 900px)">
<source srcset="image-mobile.jpg" width="320" height="640">
<img src="image-desktop.jpg" loading="lazy" width="1920" height="1080" alt="Описание картинки">
</picture>
<iframe src="https://youtube.com/embed/video_id" loading="lazy" width="560" height="315" frameborder="0" allowfullscreen></iframe>
Зачем: уменьшение трафика.
Audio and Video
Пример работы loading="lazy"
10. Используйте ссылки!
<nav>
<a href="/">Главная</a>
<a href="/catalog">Каталог</a>
<a href="/about">О компании</a>
</nav>
<nav>
<p>Содержание:</p>
<a href="#section1">Раздел 1</a>
<a href="#section2">Раздел 2</a>
</nav>
Зачем: режимы открытия, копирование, сохранение, доступность, состояния
Тег a, Никита Дубко
11. download
<a href="cat.jpg" download>
<img src="cat.jpg" alt="Бело-рыжый кот сидит на подоконнике.">
</a>
<a href="https://cdn.com/pricelist_april.pdf" download>Скачать прайслист</a>
<a href="https://cdn.com/aQBdyAE6TgxgAt.pdf" download="Прайслист за апрель">
Скачать прайслист
</a>
Зачем: человекочитаемое название, не требуется JS.
12. Внешние ссылки
<a href="https://example.com/" target="_blank" rel="noreferrer noopener">
Сайт партнёра
<span class="visually-hidden"> откроется в новой вкладке</span>
</a>
<a href="https://twitter.com/" target="_blank" rel="noreferrer noopener">
<span class="visually-hidden">Мы в Twitter, откроется в новой вкладке</span>
<svg aria-hidden="true"><!— ... —></svg>
</a>
Зачем: сохранение вкладки, повышение безопасности.
13. Схемы
<p>Контакты:</p>
Email: <a href="mailto:example@email.com">example@email.com</a>
Телефон: <a href="tel:+1234567890">+123 456-78-90</a>
Запись по СМС: <a href="sms:+1234567891">+123 456-78-91</a>
Факс: <a href="fax:+1234567892">+123 456-78-92</a>
Адрес: <a href="geo:53.902284,27.561831">Минск, ул. Уличная, д. 1</a>
<a href="sms:+1234567890?body=Добрый день! Хочу записаться на приём во вторник.&subject=Запись на приём">Записаться на вторник по СМС</a>
<a href="mailto:example@email.com?to=example2@email.com&subject=Отзыв&body=Добрый день! Хочу оставить отзыв:">Оставить отзыв</a>
Зачем: нативные приложения, быстрые действия.
14. Deep links
<a href="tg://msg?user_id=alexnozer">Мой Telegram</a>
<a href="tg://join?invite=<invite_link>">Наш чат в Telegram</a>
Забирай наш крутой <a href="tg://addstickers?set=<stickers>">стикерпак</a>!
Также есть для других соц сетей.
Зачем: нативные приложения, PWA, быстрые действия.
Telegram Deep links
15. Используйте <form>!
<form action="https://example.com/add_to_cart" method="post">
<!-- поля формы -->
</form>
Зачем: автодополнение, встроенная валидация, сохранение данных, прогрессивное улучшение.
16. <label> и placeholder
<form action="https://example.com/profile_edit" method="post">
<label for="name">Имя</label>
<input type="text" name="name" id="name" placeholder="Алексей">
<label for="email">Email</label>
<input type="text" name="email" id="email" placeholder="example@email.com">
<label for="phone">Телефон</label>
<input type="text" name="phone" id="phone" placeholder="+375441234567">
<!-- остальные поля -->
<button type="submit">Сохранить</button>
</form>
Зачем: скринридеры, переход к полю, понятность, автодополнение.
17. autocomplete
<form action="https://example.com/profile_edit" method="post">
<label for="name">Имя</label>
<input type="text" name="name" id="name" autocomplete="name">
<label for="email">Email</label>
<input type="text" name="email" id="email" autocomplete="email">
<label for="phone">Телефон</label>
<input type="text" name="phone" id="phone" autocomplete="tel mobile">
<!-- остальные поля -->
<button type="submit">Сохранить</button>
</form>
Зачем: автодополнение, сохранение данных.
001. Как работает автозаполнение в браузерах
18. Валидация и novalidate
<form action="https://example.com/profile_edit" method="post" novalidate>
<label for="name">Имя</label>
<input type="text" name="name" id="name" pattern="[а-яА-Я'\-.]+">
<label for="email">Email</label>
<input type="text" name="email" id="email" minlenght="5" required>
<label for="phone">Телефон</label>
<input type="text" name="phone" id="phone" pattern="\+375(29|44|25)\d{7}">
<!-- остальные поля -->
<button type="submit">Сохранить</button>
</form>
Зачем: прогрессивное улучшение.
19. inputmode
<form action="https://example.com/profile_edit" method="post">
<label for="name">Имя</label>
<input type="text" name="name" id="name" inputmode="text">
<label for="email">Email</label>
<input type="text" name="email" id="email" inputmode="email">
<label for="phone">Телефон</label>
<input type="text" name="phone" id="phone" inputmode="tel">
<!-- остальные поля -->
<button type="submit">Сохранить</button>
</form>
Зачем: виртуальные клавиатуры.
20. autocapitalize
off или none— стандартное поведениеon или sentences — Lorem ipsum. Dolor sit words — Lorem Ipsum Dolor Sit characters — LOREM IPSUM DOLOR SIT
<input type="text" name="name" id="name" autocapitalize="words">
Зачем: удобство ввода.
21. spellcheck
<form action="https://example.com/login" method="post">
<label for="username">Логин</label>
<input type="text" name="username" id="username" spellcheck="false">
<label for="password">Пароль</label>
<input type="password" name="password" id="password">
<button type="submit">Войти</button>
</form>
Зачем: предотвращение автокоррекции.
Пример spellcheck
spellcheck="false":
spellcheck="true":
22. viewport
<head>
<!-- ... -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ... -->
</head>
Зачем: адаптивность, зум на мобильных устройствах.
Viewport meta tag
23. Цветовые схемы
<head>
<!-- ... -->
<meta name="color-scheme" content="dark light">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1c1c1e" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
<!-- ... -->
</head>
Зачем: адаптивность, пользовательские предпочтения.
Пример theme-color
24. Open Graph
<meta property="og:title" content="Заголовок статьи">
<meta property="og:description" content="Описание статьи">
<meta property="og:type" content="article">
<meta property="og:url" content="http://example.com/article">
<meta property="og:image" content="http://example.com/cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="article:published_time" content="2022-03-01T08:00:00+08:00">
<meta property="article:modified_time" content="2022-03-02T08:00:00+08:00">
<meta property="article:author" content="http://example.com/author">
<meta property="article:tag" content="Тег">
<meta property="article:section" content="Раздел блога">
Зачем: шаринг, улучшение сниппета в поиске.
The Open Graph protocol
25. Микроразметка
<article itemscope itemtype="http://schema.org/Article">
<img src="https://example.com/cover.jpg" itemprop="image" alt="">
<h2 itemprop="headline">Заголовок статьи</h2>
<p itemprop="description">Короткое описание</p>
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
<p itemprop="givenName">Имя</p>
<link rel="author" itemprop="url" href="https://example.com/author">
</div>
<time itemprop="datePublished" datetime="2023-04-07">7 апреля 2023</p>
<meta itemprop="dateModified" content="2023-04-09">
<a href="https://example.com/article" itemprop="url">Читать</a>
</article>
Schema.org
25. Микроразметка
<script type="application/json+ld">
{
"@context": "https://schema.org",
"@type": "Article",
"image": "https://example.com/cover.jpg",
"headline": "Заголовок статьи",
"description": "Короткое описание",
"datePublished": "2023-04-07",
"url": "https://example.com/article",
"author": { ... }
}
</script>
Зачем: улучшение сниппета в поиске, другие устройства, SEO.
JSON for Linking Data
Вопросы
Introduction to Web Components
Hyperlink
