m0rtyn/html.md

## html.md

      
    Raw
  

              html.md
            
          
    Введение в HTML

Теги

С помощью тегов мы описываем содержательные сущности нашей страницы
Тег:
<имя_тега>
Примеры тегов:

<html> <body> <section> <article> <div> <h1> <nav> <ul> <ol> <li> <p> <a> <strong> <em> <time> <mark> 
<img> <video> <audio> <form> <input> <button> <label>

<!-- Комментарий! -->
Теги могут быть парными...
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <!-- параграф -->
<а> 10 способов научиться верстать за час! </а> <!-- ссылка -->

<!-- Вложенност тегов -->
<p>
 Текст абзаца с <em>выделением</em>
</p>

<ul>
 <li>элемент списка</li>
 <li>элемент списка</li>
</ul> 

<!-- Ошибки вложенности -->

<!-- Неверный порядок закрытия -->
<strong><em>жирный</strong> курсив</em>

<!-- Правила для отдельных тегов -->
<ul>
 <p>название списка</p>
 <li>элемент списка</li>
</ul>
...и одиночными
<!-- Одиночные -->
<hr> <!-- разделитель -->
<br> <!-- перенос строки --> 
<input type="text"> <!-- поле ввода -->
<img src="logo.png"> <!-- изображение -->
Атрибуты тегов

<!-- Атрибутов может быть несколько. -->
<!-- Некоторые теги не могут использоваться без атрибутов. -->
<img src="image.jpg">
<input type="text" name="email">
<p class="important">...</p>
<input type="submit" class="btn">
<div class="logo">...</div>
<span class="date">...</span> 
Простейшая HTML страница

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Заголовок окна</title>
    </head>
    <body>
    <!-- Содержимое -->
    </body>
</html> 
Страница сложнее
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовок окна</title>
    <link rel="stylesheet" href="style.css"> <!-- Подключение внешнего ресурса -->
  </head>
  <body>
    <h1>Барбершоп</h1>
    <p>Всё для бритья и стрижки в нашем
    магазине</p>
    <script src="scripts.js"></script>
  </body>
</html>
Спецификация HTML

Текущий стандарт языка HTML 5.2 рекомендован к использованию 14 декабря 2017 года.
Ссылка:
https://www.w3.org/TR/html52/
Отличия от предыдущей мажорной версии HTML 5.1:
https://www.w3.org/TR/html/changes.html#changes
Важные для верстальщиков разделы спецификации:

#3 Semantics, structure, and APIs of HTML documents
https://www.w3.org/TR/html52/dom.html#dom
#4 The elements of HTML
https://www.w3.org/TR/html52/semantics.html#semantics
Эти разделы описывают:

Как теги можно вкладывать друг в друга
Что обозначает каждый тег

Важнейшие поля в описании элементов в спецификации


Categories (Категория тега). Куда можно вкладывать тег
Content model (Модел содержания). Что можно вкладыват в тег
Content attributes (Возможные аттрибуты тега).

Categories (Категории содержания)


Metadata content — метаданные для браузеров, поисковиков и так далее (всё, что в ).
Flow content — потоковый контент (всё, что в ).
Sectioning content — крупные смысловые разделы документа.
Heading content – заголовки.
Phrasing content — фразовый контент, сам текст документа и мелкие текстовые элементы, которые мельче абзаца.
Embedded content — встраиваемый контент (изображения, видео, аудио и так далее).
Interactive content — интерактивные элементы, то, с чем взаимодействует пользователь

Metadata content

Теги входящие в <head>
<base>, <command>, <link>, <meta>, <noscript>, <script>, <style> and <title>
Flow content

Все теги входящие в <body>. Сюда входят и некоторые теги из Metadata content.
<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and Text.
Heading content

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Sectioning content

<article>, <aside>, <nav> and <section>
Phrasing content

 <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).
Старые «блочные» и «строчные»


«Строчные» элементы из HTML4 примерно соответствуют элементам с категорией Phrasing.
«Блочные» элементы из HTML4 примерно соответствуют элементам с категорией Flow, но без категории Phrasing.

Embedded content

<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>
Interactive content

 <a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, and <textarea>
Алгоритм работы


Проверяем модел содержания тега, в который вкладываем.
Проверяем категории тега, который вкладываем.
Если категория подходит и ограничения не запрещают, то вкладывать можно, иначе нельзя.

Transparent content model

Прозрачная модель — когда модель содержания элемента такая же, как у родительского тега.
Пример:
если первый <a> вложен в <section>, а второй <a> вложен в
<p>, то у них разные модели содержания. У первого <a> – это потоковый
контент, у второго <a> – фразовый.
Валидация кода

Проверка кода на синтаксическую верност
Валидатор верстки
Markup Validation Service
http://validator.w3.org/nu/
Валидация зависит от того, какой указан тип документа .
Семантика

Крупные смысловые разделы


<article>
<section>
<nav>

<article>

Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.
Особенности: желателен заголовок внутри.
Ошибки: путают с тегами <section> и <div>
https://www.w3.org/TR/html52/sections.html#the-article-element
<section>

Значение: смысловой раздел документа. Неотделяемый, в отличие от <article>.
Особенности: желателен заголовок внутри.
Ошибки: путают с тегами <article> и <div>.
https://www.w3.org/TR/html52/sections.html#the-section-element
<nav>

Значение: Навигационный раздел со ссылками на другие страницы или другие части страниц.
Особенности: лучше использовать для основной навигации, а не для всех групп ссылок. Основной является навигация или нет – на усмотрение верстальщика. Например, меню в футере можно не оборачивать в <nav>.
https://www.w3.org/TR/html52/sections.html#the-nav-element
Заголовки

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Значение: заголовки смысловых разделов.
Особенности: желателен один <h1> на странице. Не желательны пропуски в уровнях заголовков на странице. Внутри <article> заголовков можно начинать с <h1>. На главных страницах не всегда рисуют заголовок первого уровня.
Ошибки: определение уровня заголовка по размеру текста на макете. Не весь крупный текст – заголовки.
https://www.w3.org/TR/html52/sections.html#the-h1-h2-h3-h4-h5-andh6-elements
Поточные элементы


<header>
<main>
<ul>, <ol>
<p>
<table>
<div>

<header>

Значение: вводная часть смыслового раздела или всего сайта, обычно содержит подсказки и навигацию
Особенности: Этих элементов может быть несколько на странице.
Ошибки: Использовать только как шапку сайта
https://www.w3.org/TR/html52/sections.html#the-header-element
<main>

Значение: основное, не повторяющееся на других страницах, содержание страницы.
Особенности: должен быть один на странице, исходя из определения.
Ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее).
https://www.w3.org/TR/html52/sections.html#the-main-element
<footer>

Значение: заключительная часть смыслового раздела или всего сайта, обычно содержит информацию об авторах, список литературы, копирайт и так далее.
Особенности: этих элементов может быть несколько на странице. Тег <footer> не обязан находиться в конце раздела.
Ошибки: использовать только как подвал сайта.
https://www.w3.org/TR/html52/sections.html#the-footer-element
<ul>, <ol>

Значение: неупорядоченный и упорядоченный списки.
Особенности: если существует набор однородных элементов, порядок которых не важен (пункты меню), то используем <ul>. Если порядок элементов важен (топ популярных товаров, последовательные шаги в рецепте), то используем <ol>.
Ошибки: использовать что-то, кроме <li> в качестве дочерних элементов списка. Неправильная разметка вложенных списков.
https://www.w3.org/TR/html52/grouping-content.html#the-ul-element
https://www.w3.org/TR/html52/grouping-content.html#the-ol-element
Параграф

Последовательность фразового содержания, как обычный параграф, только универсальнее.
https://www.w3.org/TR/html52/dom.html#paragraphs

Параграф в HTML – это структурный элемент, а не
смысловой.
Параграфы можно явно выделять с помощью тега <p>. Если не выделите явно, они всё равно будут существовать неявно.
<p> — универсальный контейнер для группировки мелких фразовых элементов, отделения их друг от друга, особенно, когда нужна стилизация.

Тег <p>
Значение: неупорядоченный и упорядоченный списки.
Особенности: параграф (как структурный элемент, а не как смысловой).
Ошибки: использовать внутри параграфов не фразовые элементы, например, списки
https://www.w3.org/TR/html52/grouping-content.html#the-p-element
<table>

Значение: многомерные связанные данные (табличные данные).
Особенности: простейший, двумерный, вид связанных данных – «параметр-значение». Его можно описать как таблицей, так и списком определений (тег <dl>). Когда измерений больше (параметр-значение1-значение2-…), подходят только таблицы.
Пример: тарифы сотового оператора, расписание поездов.
Ошибки: использовать таблицы для сеток (так уже не делают). Не использовать таблицы там, где они нужны.
https://www.w3.org/TR/html52/tabular-data.html#the-table-element
<div>

Значение: универсальный контейнер без собственного значения.
Особенности: смысл этому элементу придаётся с помощью атрибута class.
Ошибки: «Дивянка» – когда в разметке используется слишком много дивов.
https://www.w3.org/TR/html52/grouping-content.html#the-div-element
Что выбрат?

Можете дать имя разделу и вынести этот раздел на
другой сайт? <article>
Можете дать имя разделу, но вынести на другой сайт не
можете? <section>
Не можете дать имя?
Вменяемое имя, а не «новости и фотогалерея» или «правая колонка». <div>

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


<img>
<a>
<button>
<b>
<br>
<span>

<img>

Значение: контентное изображение.
Особенности: есть обязательные атрибуты (src). Хороший тон — задавать атрибут alt, который описывает содержание картинки.
Ошибки: использовать контентные изображения вместо фоновых. Использовать фоновые изображения вместо контентных.
https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element
<a>

Значение: Ссылка.
Особенности: Если атрибута href нет, то это заглушка («здесь будет ссылка при других обстоятельствах»). Ссылка без href используется, чтобы не делать ссылку на саму себя.
Ошибки: Использовать вместо ссылок другие элементы, например, кнопки.
https://www.w3.org/TR/html52/textlevel-semantics.html%23the-a-element
<button>

Значение: Кнопка.
Особенности: Лучше явно указывать атрибут type. Его значение по умолчанию — submit, но часто нужно значение button. Кнопка не обязательно должна находиться в пределах формы. Часто это просто интерактивный элемент, который «оживляется» с помощью JavaScript. Например, кнопка закрытия всплывающего окна.
Ошибки: Использовать вместо кнопок другие элементы, например, ссылки или спаны.
https://www.w3.org/TR/html52/sec-forms.html#the-button-element
<b>

Значение: Текст, который выделяется для привлечения внимания, но без придания значимости
Ошибки: Слишком частое неуместное использование.
Подробнее про теги <b>, <i>, <em>, <strong>: http://html5doctor.com/i-b-em-strong-element
https://www.w3.org/TR/html52/textlevel-semantics.html%23the-b-element
<br>

Значение: Перенос строки.
Ошибки: Слишком частое использование. Использование вместо параграфов.
https://www.w3.org/TR/html52/textlevel-semantics.html#the-br-element
<span>

Значение: Универсальный фразовый элемент без собственного значения.
Ошибки: Смысл этому элементу придаётся с помощью атрибута class.
https://www.w3.org/TR/html52/textlevel-semantics.html#the-span-element
Глобальные аттрибуты

Атрибуты, которые могут быть у любого тега.

class
accesskey
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate
атрибуты для обработки событий
data-атрибуты

Атрибут class


Описывает один или несколько классов (группа предметов или явлений, обладающих общими признаками), к которым принадлежит элемент.
Помогает уточнить смысл и предназначение каждого тега.
Множественные классы перечисляются через пробел.
Наш лучший друг при разметке!

<a class="social-btn social-btn-vk">
 Мы ВКонтакте
</a> 
Как делат разметку

Когда все содержательные сущности документа размечены подходящими по смыслу тегами.
Декоративные (не содержательные) сущности в разметку входить не должны. Кроме тех случаев, когда без них никак.
Подходы к разметке

Страница как документ
Страница как интерфейс
Дивянка

Страница как документ


Задача — восстановить из макета первоначальную
логическую структуру документа.
Можно добавлять то, чего не видно на макете.
В разметку попадает не всё, что есть на макете.

Алгоритм разметки


Выделяем повторяющиеся на каждой странице блоки (шапка и подвал) и основное содержание.
В этих блоках размечаем крупные смысловые разделы.
В документе, и в каждом смысловом разделе выделяем заголовки (если их нет в макете, то позже прячем с помощью стилей).
Размечаем оставшиеся мелкие элементы в каждом смысловом разделе методом исключения:
Получилось найти самый подходящий тег – используем его.
Нужно разметить потоковый контейнер – div>.
Нужно сгруппировать мелкие фразовые элементы – <p>.
Нужно выделить сам мелкий фразовый элемент (слово или фразу) – <span>.

При разметке добавляем всем тегам понятные имена классов. Теги без классов допустимы, если из контекста понятно их назначение.
При дальнейшей вёрстке разметка может меняться, если это необходимо для стилизации. Чаще всего добавляются обёртки с помощью <div>.
Как называт классы?

Имя класса должно отражать назначение элемента, а не рассказывать о его внешнем виде.
Воздержитесь от транслита.
Типовые имена классов
https://github.com/yoksel/common-words
Пространства имен


Упрощают именование классов.
Разбивают код на относительно независимые блоки.
Предотвращают нежелательное перемешивание стилей.
Ускоряют разработку и упрощают поддержку.

Признаки хорошей разметки


Простота
Соблюдение стиля кодирования
Отсутствие лишних элементов
Работоспособность

Простота


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

Стиль кодирования

Кодгайды

Кодгайд от HTML Academy http://html-academy.ru/codeguide
Кодгайд от MDO http://mdo.github.io/code-guide
Кодгайд от GOOGLE https://google.github.io/styleguide/htmlcssguide.xml

Отсутствие лишних элементов


Декоративные элементы отсутствуют в разметке.

Работоспособность


Доступность всего контента
Содержательный текст (вспомните шапку Седоны, где есть декоративный текст) должен быть в HTML-разметке, содержательные изображения должны быть размечены с помощью <img>.
Корректный сбор данных от пользователей
Формы работоспособны, у полей форм есть подходящие имена и значения.
Связность документов
Всё, что должно быть ссылками сделано ссылками.

Материалы


Спецификация HTML и её вольный перевод пятой версии на русский язык.
Зачем нужны заголовки.
Секции в футере.
Ссылки вокруг блоков.
W3C или WHATWG.
Обсуждения о правильном использовании тегов в комментариях.
Видеозапись доклада «Семантика или смерть».
Слова, часто используемые в CSS-классах.
Как отличить контентное изображение от декоративного.

<meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link rel="manifest" href="site.webmanifest">
        <link rel="apple-touch-icon" href="icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">