Основы

HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста):

  • язык означает, что он может быть прочитан как человеком, так и компьютером;
  • разметка означает, что написанный вами код помечается с помощью ключевых слов;
  • гипертекст означает, что он использует HTTP как часть Интернета.

Блочные и строчные элементы

В HTML вам, в основном, будут попадаться два типа элементов HTML:

Блочные элементы, вроде:

  • абзацы <р>;
  • списки: неупорядоченные (с маркером) <ul> или упорядоченные списки (с числами) <ol>;
  • заголовки: от первого уровня <h1> до шестого уровня <h6>;
  • статьи <article>;
  • разделы <section>;
  • длинные цитаты <blockquote>.

Строчные элементы, вроде:

  • ссылки <a>;
  • выделенные слова <em>;
  • важные слова <strong>;
  • короткие цитаты <q>;
  • аббревиатуры <abbr>.

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

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

<p>Вы уже видели это <a href="http://www.youtube.com">замечательное видео</a> на YouTube?</p>

Все блочные элементы содержат открывающие и закрывающие теги.

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

Иерархия в HTML

HTML-документ - это как большое семейное древо, с родителями, братьями, детьми, предками и потомками. Всё это происходит из возможности вкладывать одни элементы HTML внутрь других.

Давайте напишем простой абзац и улучшим его путём разделения частей текста, вставив два строчных элемента:

<p>
    Сэр <strong>Алекс Фергюсон</strong> однажды сказал о Филиппо Индзаги: 
    <q>Этот парень должен был родиться в положении вне игры</q>.
</p>

В этой структуре:

  • элемент <strong> задаёт слова «Алекс Фергюсон» более важными;
  • <q> отмечает его цитату об Индзаги.

Тот факт, что <strong> отображается жирным шрифтом, является только поведением браузера по умолчанию. Помните, что вы должны выбирать элементы HTML в соответствии с их значением, а не как они выглядят.

В данном случае:

  • <p> - родительский элемент для <strong> и <q>;
  • <strong> и <q> - дочерние элементы для <р>;
  • <strong> и <q> - братские элементы.

Семантика в HTML

Целью тегов HTML является передача смысла документу. Не беспокойтесь о том, как ваша веб-страница выглядит. Сосредоточьтесь на значении каждого тега, который вы будете использовать.

Диапазон элементов достаточно широк, чтобы он подходил и для материалов общего назначения (например, абзацы или списки) и для более конкретного содержимого, вроде <output> (для отображения результата вычисления) или <progress> (для отображения хода выполнения задачи).

Структурные элементы: организация страницы

Структурные элементы позволяют организовать основные части вашей страницы. Они обычно содержат другие элементы HTML.

Вот что типичная веб-страница может в себя включать:

  • <header> в качестве первого элемента страницы, который может включать в себя логотип и слоган;
  • <nav> в качестве списка ссылок, которые ведут на разные страницы сайта;
  • <h1> в качестве заголовка страницы;
  • <article> в качестве основного содержимого страницы, вроде статьи блога;
  • <footer> в качестве последнего элемента страницы, расположенного внизу.

Текстовые элементы: определение контента

Внутри структурных элементов вы обычно находите текстовые элементы, призванные определить цель вашего содержимого.

Вы, в основном, будете использовать:

  • <p> для абзацев;
  • <ul> для (неупорядоченных) списков;
  • <ol> для (упорядоченных) списков;
  • <li> для отдельных пунктов списка;
  • <blockquote> для цитат.

Строчные элементы: различный текст

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

Есть много строчных элементов, но вы обычно столкнётесь со следующими:

  • <strong> для важных слов;
  • <em> для выделенных слов;
  • <a> для ссылок;
  • <small> для менее важных слов;
  • <abbr> для аббревиатур, вроде W3C.

Общие элементы

Когда ни один семантический элемент не подходит для вашего содержимого, но вы всё ещё хотите вставить элемент HTML (в целях группирования или стилизации), то можете остановиться на одном из двух общих элементов:

  • <div> для блочных элементов;
  • <span> для строчных элементов.

Хотя эти элементы HTML на самом деле не несут какого-либо смысла, они пригодятся когда мы начнём использовать CSS.

Форматирование HTML

Существует разница между тем, что написано в вашем коде HTML и что отображается в браузере.

Как мы уже видели, теги HTML, такие как <р>, только читаются браузером (чтобы знать, какой тип содержимого написан), но не отображаются в нём. Мы также видели, как можно писать комментарии в коде HTML, чтобы помочь человеку с чтением кода, без необходимости отображать эти комментарии в браузере.

Другим видом написанного кода, который игнорируется браузером, является пробел, он включает в себя:

  • переносы строк;
  • пустые строки;
  • табуляция (или отступы).

Переносы строк и пустые строки (которые представляют собой последовательность переносов строк) в коде HTML игнорируются браузером. Они составляют лишь единое пространство. Чтобы реально вставить перенос строки вам нужно использовать элемент <br>.

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

Валидный HTML-документ

До сих пор мы рассматривали отдельные фрагменты кода HTML. Но HTML-документ (или веб-страница, что означает то же самое) требует определённой структуры для того, чтобы стать валидным.

Доктайп

Первой информацией которую мы пишем, является тип HTML-документа - доктайп. Подумайте о доктайпе как о версии автомобиля на протяжении многих лет: Ford Fiesta, купленный в 1986 году, был Fiesta 2. Если вы покупаете его сегодня, то это Fiesta 7. Раньше сосуществовало несколько версий HTML (XHTML и HTML 4.01 были конкурирующими стандартами). В настоящее время нормой является HTML5.

Чтобы сообщить браузеру, что HTML-документ представляет собой HTML5, просто начните свой документ со следующей строки:

<!DOCTYPE html>

Элемент <html>

Помимо строки с доктайпом, весь ваш HTML-документ должен располагаться внутри элемента <html>:

<!DOCTYPE html>
<html>
    <!-- Здесь остальная часть вашего кода HTML -->
</html>

<html> технически является предком всех элементов HTML.

<head>

Как атрибуты несут дополнительную информацию для элемента HTML, так и элемент <head> несёт дополнительную информацию для всей веб-страницы.

Например, заголовок страницы (отображается на вкладке) находится в <head>:

<head>
    <title>Мой сказочный блог</title>
</head>

Следующие элементы HTML могут появляться в <head> и только в <head>:

  • <link>
  • <meta>
  • <style>

<body>

В то время как <head> содержит только метаданные, не предназначенные для отображения вообще (за исключением <title>), то элемент <body> это место, где мы пишем всё наше содержимое. Всё внутри <body> будет отображаться в окне браузера.

Полностью валидный HTML-документ:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>MarkSheet</title>
        <meta name="description" content="Простое руководство по HTML">
    </head>
    <body>
        <p>Привет, мир!</p>
    </body>
</html>

W3C предлагает Markup Validation Service для проверки любого HTML-документа на наличие ошибок и предупреждений.