HTML Разметка

От AndrewWeb

Введение в HTML

HTML-теги

Тег:  <имя_тега>

Примеры тегов: <html> <body> <section> <article> <div> <h1> <nav> <ul> <ol> <li> <p> <a> <strong> <em> <time> <mark> <img> <video> <audio> <form> <input> <button> <label>

<!— А я комментарий! —>

Парные теги

<h1>Три главных слова</h1>

<p> Инкапсуляция, наследование, полиморфизм! </p>

Одиночные теги

<hr> <!— разделитель —>
<br> <!— перенос строки —>
<input type=»text»> <!— поле ввода —>
<img src=»logo.png»> <!— изображение —>

Вложенные теги

<p> Текст абзаца с <em>выделением</em> </p>

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

Ошибки вложенности

<!— Неверный порядок закрытия —> <strong><em>жирный</strong> курсив</em>
<!— Правила для отдельных тегов —>

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

Атрибуты тегов

Атрибутов может быть несколько.

Некоторые теги не могут использоваться без атрибутов.

<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>

Простейшая страница

<!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>Заголовок 1</h1>
 <p>Абзац - это лучшее, что у нас есть!</p>
 <script src="scripts.js"></script>
</body>
</html>

Спецификация HTML

https://www.w3.org/TR/html/

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

  1. Metadata content — метаданные для браузеров, поисковиков и так далее (всё, что в <head>).
  2. Flow content — потоковый контент (всё, что в <body>).
  3. Sectioning content — крупные смысловые разделы документа.
  4. Heading content – заголовки.
  5. Phrasing content — фразовый контент, сам текст документа и мелкие текстовые элементы, которые мельче абзаца.
  6. Embedded content — встраиваемый контент (изображения, видео, аудио и так далее).
  7. Interactive content — интерактивные элементы, то, с чем взаимодействует пользователь.

Валидатор

Markup Validation Service http://validator.w3.org/nu/

Обзор тегов

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

<article>

  • Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.
  • Особенности: желателен заголовок внутри. – Типовые ошибки: путают с тегами <section> и <div>.

<section>

  • Значение: смысловой раздел документа. Неотделяемый, в отличие от <article>.
  • Особенности: желателен заголовок внутри. – Типовые ошибки: путают с тегами <article> и <div>.

<nav>

  • Значение: смысловой раздел документа. Неотделяемый, в отличие от <article>.
  • Особенности: желателен заголовок внутри. – Типовые ошибки: путают с тегами <article> и <div>.

Заголовки

<h1>…<h6>

  • Значение: заголовки смысловых разделов.
  • Особенности: 
    Желателен один <h1> на странице.
    Не желательны пропуски в уровнях заголовков на странице. Внутри <article> заголовков можно начинать с <h1>.
    На главных страницах не всегда рисуют заголовок первого уровня.
  • Типовые ошибки:
    Определение уровня заголовка по размеру текста на макете.
    Не весь крупный текст – заголовки

Поток

<header>

  • Значение: вводная часть смыслового раздела или всего сайта, обычно содержит подсказки и навигацию.
  • Особенности: этих элементов может быть несколько на странице.
  • Типовые ошибки: использовать только как шапку сайта.

<main>

  • Значение: основное, не повторяющееся на других страницах, содержание страницы.
  • Особенности: должен быть один на странице, исходя из определения.
  • Типовые ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее).

<footer>

  • Значение: заключительная часть смыслового раздела или всего сайта, обычно содержит информацию об авторах, список литературы, копирайт и так далее.
  • Особенности: этих элементов может быть несколько на странице. Тег <footer> не обязан находиться в конце раздела.
  • Типовые ошибки: использовать только как подвал сайта

<ul>/<ol>

  • Значение: неупорядоченный и упорядоченный списки.
  • Особенности:
    Если существует набор однородных элементов, порядок которых не важен (пункты меню), то используем <ul>.
    Если порядок элементов важен (топ популярных товаров, последовательные шаги в рецепте), то используем <ol>.
  • Типовые ошибки
    Объединять в список неоднородные элементы.
    Использовать что-то, кроме <li> в качестве дочерних элементов списка.
    Неправильная разметка вложенных списков.

<p>

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

<table>

  • Значение: многомерные связанные данные (табличные данные).
  • Особенности:
    Простейший, двумерный, вид связанных данных – «параметр-значение». Его можно описать как таблицей, так и списком определений (тег <dl>).
    Когда измерений больше (параметр-значение1-значение2-…), подходят только таблицы. Пример: тарифы сотового оператора, расписание поездов.
  • Типовые ошибки:
    Использовать таблицы для сеток (так уже не делают).
    Не использовать таблицы там, где они нужны.

<div>

  • Значение: многомерные связанные данные (табличные данные).
  • Особенности:
    Простейший, двумерный, вид связанных данных – «параметр-значение». Его можно описать как таблицей, так и списком определений (тег <dl>).
    Когда измерений больше (параметр-значение1-значение2-…), подходят только таблицы. Пример: тарифы сотового оператора, расписание поездов.
  • Типовые ошибки:
    Использовать таблицы для сеток (так уже не делают).
    Не использовать таблицы там, где они нужны.

Различия <article>, <section>, <div>

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

Фразовые

<img>

  • Значение: контентное изображение.
  • Особенности: есть обязательные атрибуты (src). Хороший тон — задавать атрибут alt, который описывает содержание картинки.
  • Типовые ошибки:
    Использовать контентные изображения вместо фоновых.
    Использовать фоновые изображения вместо контентных.

<a>

  • Значение: ссылка.
  • Особенности: если атрибута href нет, то это заглушка («здесь будет ссылка при других обстоятельствах»). Ссылка без href используется, чтобы не делать ссылку на саму себя.
  • Типовые ошибки: использовать вместо ссылок другие элементы, например, кнопки.

<button>

  • Значение: кнопка.
  • Особенности:
    Лучше явно указывать атрибут type. Его значение по умолчанию — submit, но часто нужно значение button.
    Кнопка не обязательно должна находиться в пределах формы. Часто это просто интерактивный элемент, который «оживляется» с помощью JavaScript. Например, кнопка закрытия всплывающего окна.
  • Типовые ошибки: использовать вместо кнопок другие элементы, например, ссылки или спаны.

<b>

  • Значение: текст, который выделяется для привлечения внимания, но без придания значимости.
  • Типовые ошибки: слишком частое неуместное использование.
    Подробнее про теги <b>, <i>, <em>, <strong>:
    http://html5doctor.com/i-b-em-strong-element

<br>

  •  Значение: перенос строки.
  • Типовые ошибки:
    Слишком частое использование.
    Использование вместо параграфов.

<span>

  • Значение: универсальный фразовый элемент без собственного значения.
  • Особенности: смысл этому элементу придаётся с помощью атрибута class.

Глобальные атрибуты

Атрибуты, которые могут быть у любого тега. – class – accesskey – contenteditable – contextmenu – dir – draggable – dropzone – hidden – id – lang – spellcheck – style – tabindex – title – translate – атрибуты для обработки событий – data-атрибуты

Атрибут class

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

Как делать разметку

Что такое разметка

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

Подходы к разметке

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

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

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

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

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

Как называть классы?

  • Имя класса должно отражать назначение элемента, а не рассказывать о его внешнем виде.
  • Воздержитесь от транслита.

Типовые имена классов

https://github.com/yoksel/common-words

Пространства имён

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

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

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

Полезные ссылки

О разметке

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

Кодгайды