HTML 1

SGML -> HTML (Tim Berners Lee)
После 4 спеки W3C стала пропихивать XHTML -> WHATWG

tag != element
perfectionkills
w3scholls whatwg spec
can i use

Минимально валидный документ

<!DOCTYPE html>
<html lang=en> // не входит в понятие минимальный
<title>Kottans</title>
<meta charset=utf-8>

implicit tags (html, body, head) - их можно не открывать (стандарт не требует)

Types of elements:

validator new

Caracter references

&amp; &copy;
&mdash; - длинное тире
&ndash; - тире между временными отрезками

Deprecated tags
В том числе presentational
tt, center, big, font

Теги, атрибуты, классы о своем контенте должны кричать.
Классы float-left, float-right - плохо.

Можно (не стоит линтить):

Семантика - элементы, которые определены в спецификации имеют свое внутреннее значение

main, header, footer...

<header>
<div class=header> - не соответствует
<div role=header> - соответствует

element of html
content models

main - главное в документе (whatwg - где угодно, w3c - только один раз), то, что отличается от странице к странице
hgroup - групировка h (whatwg - deprecated)
section - не имеет особого смысла сам по себе (куски сайта)
article - имеет смысл сам по себе (widget, tweet)
nav - навигация главная сайта
b - keywords, выделение
strong - важность, привлечь внимание
i - альтернативное произношение
em - повышение тона (голосовое ударение)

Если внутри p инлайновый контент, то она закроется перед следующим блочным элементом

Категории атрибутов:

aria-hidden=true для svg

Links

<link rel=stylesheet media=> - стили
<link rel=author href=> - с которым можно связаться
<link rel=next href=> - поиск показываем постраничный
<link rel=previous href=> -
<link rel=prefetch href=> - погрузить картинки после странички
<link rel=canonical href=> - главная ссылка, если много ссылок на страницу

<base href=/ target=_blank> - дефолтные атрибуты для открытия ссылок

noscript - работает только когда юзер отключил скрипты (если просто не получил - не сработает)

template - для шаблонов (скрипт не надо использовать с другим типом)

script src="" defer async - чтобы скрипты были не блокирующими и работали, когда DOM ready (если type=module, то по умолчанию defer стоит)
Если подключаем shim - то им async, нашим же скриптам defer

picture tag

Разметка заголовков:

<section>
  <header>
    <h1>heading
    <p>subheading
    <p>subsubheading
  </header>
</section>

no outline

Слайдеры можно делать с помощью css target
Формы можно делить на section или fieldset
small - копирайты, пояснения
address - где найти человека (не только адрес, но и fb, tw, gh)
aside - рекламка, список ссылок похожие статьи, gh-twitter (контент, который так себе относится к главному контенту)
figure - картинки, графики, куски кода, которые можно переместить по статье и они не потяреют смысла, потому что подписаны и имеют отношение к контенту

ins - добавлено
del - удалено
s - что утратило правдивость (устаревшая цена)

10 вопросов по html

При подключении шрифтов через font-face, оперировать font-weight, а не названием шрифта

mark - выделение результатов поиска, немедленный интерес пользователя

Как ставить кавычки, чтобы разботали с разными языками

<q></q>
::before, ::after {
  content: quotes
}

Time

<time datetime="2016-05-21">21</time>&ndash;
<time datetime="2016-05-23">23 мая</time>

Download

<a href=cv.pdf download=NAME_SURNAME_CEO_GOOGLE.pdg>my CV</a>

Dialog

<dialog>
</dialog>

.showModal()
.close()
есть backdrop
можно открыться с каким-то якорем автоматом (например окно при клике на товар)

alt - обязательный атрибут, но может быть пустым - только для оформления.

Defenition list (или содержание делать можно)

<dl>
  <dt>Firefox</dt>
  <dd>Browser</dd>
</dl>

избегаем популярных ошибок html5