HTML:
The Good Parts
Вадим Макеев
HTML
<html>
<head>
<title>
<base>
<link>
<meta>
<style>
<body>
<article>
<section>
<nav>
<aside>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<header>
<footer>
<p>
<address>
<hr>
<pre>
<blockquote>
<ol>
<ul>
<li>
<dl>
<dt>
<dd>
<figure>
<figcaption>
<main>
<div>
<a href>
<em>
<strong>
<small>
<s>
<cite>
<q>
<dfn>
<abbr>
<ruby>
<rb>
<rt>
<rtc>
<rp>
<data>
<time>
<code>
<var>
<samp>
<kbd>
<sub>
<sup>
<i>
<b>
<u>
<mark>
<bdi>
<bdo>
<span>
<br>
<wbr>
<ins>
<del>
<picture>
<source>
<img>
<iframe>
<embed>
<object>
<param>
<video>
<audio>
<track>
<map>
<area>
<table>
<caption>
<colgroup>
<col>
<tbody>
<thead>
<tfoot>
<tr>
<td>
<th>
<form>
<label>
<input>
<button>
<select>
<datalist>
<optgroup>
<option>
<textarea>
<output>
<progress>
<meter>
<fieldset>
<legend>
<details>
<summary>
<dialog>
<script>
<noscript>
<template>
<canvas>
<slot>
p > ul
<p>
<ul></ul>
</p>
ul
- Categories: Flow
- Content: Zero or more li
p
- Categories: Flow
- Content: Phrasing
Нельзя
ul > p
<ul>
<p></p>
</ul>
p
- Categories: Flow
- Content: Phrasing
ul
- Categories: Flow
- Content: Zero or more li
Нельзя
a > video
<a>
<video>
</a>
a
- Categories: Flow, phrasing
- Content: No interactive
video
- Categories: Interactive
- Content: Zero or more source
Можно
a > video
<a>
<video controls>
</a>
a
- Categories: Flow, phrasing
- Content: No interactive
video
- Categories: Interactive
- Content: Zero or more source
Нельзя
a > h1
<a href>
<h1>Заголовок</h1>
</a>
h1
- Categories: Flow, heading
- Content: Phrasing
a
- Categories: Flow
- Content: Transparent
Зависит…
section > a > h1
<section>
<a href>
<h1>Да</h1>
</a>
</section>
p > a > h1
<p>
<a href>
<h1>Нет</h1>
</a>
</p>
p > a > h1
<p>
<a href>
<h1>Нет</h1>
</a>
</p>
p > a > h1
<p>
<a href>
<h1>Нет</h1>
</a>
</p>
ой, всё
<p>
<a href="">
</a></p>
<h1><h1>Нет</h1>
</h1><a href=""></a>
<p></p>
html
<!DOCTYPE html>
<html lang="ru">
<body>
<p>Инструкция по эксплуатации</p>
<p lang="en">Operating Instructions</p>
<p lang="fr">Manuel d’utilisation</p>
<p lang="zh-cn">使用说明书</p>
title
<title>Мой ❤️ тег <i></title>
link
<link rel="preload" as="" href="">
<link rel="dns-prefetch" href="">
<link rel="preconnect" href="">
<link rel="prefetch" href="">
<link rel="prerender" href="">
Preload и
Resource Hints
main, aside
<body>
<main>
<p>Главное полезное</p>
</main>
<aside>
<p>Дополнительное</p>
</aside>
header + footer
<header>
<p>Опять: логотип, навигация, поиск</p>
</header>
<main>
<p>О, главное полезное!</p>
</main>
<footer>
<p>Опять: копирайт, соцсети, контакты</p>
</footer>
section — секция содержимого
<main>
<section>
<h2>Товары</h2>
</section>
<section>
<h2>Преимущества</h2>
</section>
article — единица информации
<main>
<h1>Магазин</h1>
<section>
<h2>Товары</h2>
<article>
<h3>Грелка для ушей</h2>
Сколько заголовков на DevParty?
document.querySelectorAll('h1, h2, h3').length
> 0
h1—h6
<main>
<h1>Магазин</h1>
<section>
<h2>Товары</h2>
<article>
<h3>Грелка для ушей</h3>
h1—h1
<main>
<h1>Магазин</h1>
<section>
<h1>Товары</h1>
<article>
<h1>Грелка для ушей</h1>
Не надо так
h1—h1
<main>
<h1>Магазин</h1>
<section>
<h1>Товары</h1>
<article>
<h1>Грелка для ушей</h1>
Не надо так
h1 + p
<h1>Магазин</h1>
<p>Механика и электроника<p>
<hgroup>
<h1>Магазин</h1>
<h2>Механика и электроника<h2>
</hgroup>
hgroup
Элемент <hgroup> был удалён
из спецификации HTML5, но всё ещё есть в версии
WHATWG. Главная роль <hgroup> в том,
чтобы влиять на отображение заголовков в алгоритме
аутлайна, который пока не внедрён ни в одном
из браузеров, а значит семантика <hgroup>
на практике — чисто теоретическая.
MDN
A decade of heading backwards
, Стив Фолкнер
figure + figcaption
<figure>
<img src alt="Серебристая микроволновая печь">
<figcaption>Электроника П1</figcaption>
</figure>
figure + figcaption
<figure>
<figcaption>Код, полный сомнений</figcaption>
<pre><code>
const elvis = blue?.suede?.shoes;
</code></pre>
</figure>
input
<input type="tel">
<input type="url">
<input type="email">
<input type="number">
- required
- pattern
- multiple
<input type="email" multiple value="a@b, a@b">
input
<input type="text" inputmode="tel" pattern=".*">
<input type="text" inputmode="url" pattern=".*">
<input type="text" inputmode="email" pattern=".*">
<input type="text" inputmode="numeric" pattern=".*">
<input type="text" inputmode="decimal" pattern=".*">
<input type="text" inputmode="search" pattern=".*">
ul
<ul>
<li>Фрай</li>
<li>Лила</li>
<li>Бендер</li>
</ul>
ol
<ol>
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>
- Первый
- Второй
- Третий
ol — type
<ol type="lower-alpha">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>
- Первый
- Второй
- Третий
ol — reversed
<ol reversed>
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>
- Первый
- Второй
- Третий
ol — start
<ol start="5">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>
- Первый
- Второй
- Третий
menu
Элемент <menu> это альтернатива <ul> для вывода списка команд.
<menu>
<li><button onclick="cut()">⌘X</button></li>
<li><button onclick="copy()">⌘C</button></li>
<li><button onclick="paste()">⌘V</button></li>
</menu>
ul, ol
table
<table>
<caption>Таблица с данными.</caption>
<colgroup>
<col style="background-color: tomato">
<col span="2">
</colgroup>
</table>
dl, dt, dd
<dl>
<dt>Вес</dt>
<dd>70 кг</dd>
<dt>Рост</dt>
<dd>167 см</dd>
</dl>
<dl>
<div>
<dt>Вес</dt>
<dd>70 кг</dd>
</div>
<div>
<dt>Рост</dt>
<dd>167 см</dd>
</div>
</dl>
details, summary
<details open>
<summary>
Сколько дивов на DevDays?
</summary>
<p>1014 штук</p>
</details>
script
<script defer src></script>
<script async src></script>
<script type="module" src></script>
<script nomodule src></script>
<script integrity="sha384-…" src></script>
Уберите уже type="text/javascript", а?
template
<table>
<tr>
<th>Раз</th>
<th>Два</th>
</tr>
</table>
<template id="row">
<tr>
<td></td>
<td></td>
</tr>
</template>
document.getElementById('row').content
slot
<template id="paragraph">
<p>
<slot name="item">
</slot>
</p>
</template>
Лишние теги
<!DOCTYPE html>
<html lang=ru>
<title>Заголовок</title>
<meta charset=utf-8>
<p>Контент
Не надо так
Array
fill()pop()push()reverse()shift()sort()splice()
unshift()concat()filter()includes()indexOf()join()slice()
- SVG
- MathML
- ARIA
- Веб-компоненты
name: HTML
on:
pull_request:
push:
branches:
- master
jobs:
validate:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [13.x]
java: [8.x]
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- uses: actions/setup-java@v1
with:
java-version: ${{ matrix.java }}
architecture: x64
- run: npm ci
- run: npm run build
- run: npm run html
