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
Зачем: переводчики, скринридеры, региональная выдача.
03. translate
translate="" или translate="yes" — переводить, по умолчаниюtranslate="no" — не переводить
Зачем: контроль автоматического перевода.
04. hidden
Зачем: не требуется пользовательский CSS, предотвращение сдвигов макета (CLS).
06. <source>
Зачем: адаптивность, ретина, art direction, уменьшение трафика.
Audio and Video
Пример <picture> и <source>
Пример субтитров
Пример работы loading="lazy"
10. Используйте ссылки!
Зачем: режимы открытия, копирование, сохранение, доступность, состояния
Тег a, Никита Дубко
11. download
Зачем: человекочитаемое название, не требуется JS.
12. Внешние ссылки
Зачем: сохранение вкладки, повышение безопасности.
13. Схемы
Зачем: нативные приложения, быстрые действия.
14. Deep links
Также есть для других соц сетей.
Зачем: нативные приложения, PWA, быстрые действия.
Telegram Deep links
15. Используйте <form>!
Зачем: автодополнение, встроенная валидация, сохранение данных, прогрессивное улучшение.
16. <label> и placeholder
Зачем: скринридеры, переход к полю, понятность, автодополнение.
18. Валидация и novalidate
Зачем: прогрессивное улучшение.
19. inputmode
Зачем: виртуальные клавиатуры.
20. autocapitalize
off или none— стандартное поведениеon или sentences — Lorem ipsum. Dolor sitwords — Lorem Ipsum Dolor Sitcharacters — LOREM IPSUM DOLOR SIT
Зачем: удобство ввода.
21. spellcheck
Зачем: предотвращение автокоррекции.
Пример spellcheck
23. Цветовые схемы
Зачем: адаптивность, пользовательские предпочтения.
Пример theme-color
Вопросы
Introduction to Web Components
Hyperlink
