Основы гипертекстового представления интернет-контента
..pdf11
<!-- comment -->
Обычно комментарии оставляют для пояснения кода, но они могут использоваться и для специальных указаний браузеру:
<!--[if IE 8]><link rel="stylesheet" href="ie8.css"/> <![endif]-->
Благодаря такому комментарию, браузер Internet Explorer понимает, что файл со стилями оформления ie8.css нужно загрузить, только если версия браузера равна 8.
Текст в HTML разрешён только внутри элементов, значений атрибутов и комментариях. Между атрибутами его размещать нельзя.
Новая строка может быть обозначена как символом CR (carriage return) – возврат каретки, так и LF (line feed) – подача на строку, так и двумя сразу – CR LF.
Чтобы вставить особые символы, например ©, для удобства можно использовать символы-мнемоники (Entity Characters):
<p>©</p> <!-- © --> Указание & и ; – обязательно.
1.2 Типы разметки
По назначению разметку делят на четыре группы:
1)описательная (Descriptive Markup) – определяет метаинформацию документа. Например, ключевые слова, автора документа, заголовок и кодировку;
2)структурная (Structural Markup) – определяет структуру и назначение текста;
3)визуальная (Presentational Markup) – определяет то, как элемент будет выглядеть;
4)ссылочная (Hypertext Markup) – обозначает части документа как ссыл-
ки. В спецификации HTML5 такой элемент только один – <a>. Визуальная разметка появилась до широкого распространения стилей
CSS, но на сегодняшний день уже рекомендуется её не использовать. Вместо элементов
<p><center>centered text</center></p>
рекомендуется использовать стили
<p style="text-align: center">centered text</p>
12
1.3Основные теги
Воснове документа лежит корневой элемент html. Он определяет границы документа:
<html lang="ru"> </html>
Рекомендуется указывать у него атрибут языка lang="ru". Атрибут языка помогает инструментам синтеза речи для невидящих людей правильно выбирать произношение.
Для того чтобы отделить описательную разметку от структурной, метаинформацию для роботов, браузеров и поисковых систем от содержимого для пользователей есть два элемента – body и head.
Элемент head хранит в себе набор элементов, определяющих метаинформацию документа для роботов, браузеров и поисковых систем (например, ключевые слова, автора документа, заголовок). Этот элемент не является обязательным и его можно пропустить.
<html lang="en">
<head>
<title>Example</title>
</head>
</html>
Элемент body хранит в себе набор элементов, определяющих содержимое документа для пользователей, и также как и head является необязательным.
<html lang="en"> <body>
<p>CERN is a European research organization that operates the largest particle physics laboratory in the world.</p>
</body>
</html>
Хотя теги html, head и body являются необязательными, хорошим стилем считается их использование, чтобы обозначить структуру документа.
Так как элементов в HTML очень много, для удобства их можно разделить на несколько больших групп:
•метаэлементы;
•секционные элементы;
•заголовочные элементы;
13
•группирующие элементы;
•текстовые элементы;
•табличные элементы;
•ссылочные элементы;
•элементы форм;
•элементы встраиваемого содержимого.
За каждым элементом скрывается вполне определённая задача. Чем точнее будет подобран элемент под задачу, тем дружелюбнее будет разметка как для пользователей, так и для поисковых систем.
Метаэлементы
<title></title> – определяет заголовок документа. Не виден в тексте, но используется для отображения на вкладке браузера или в истории посещений. Это единственный обязательный тег, и он не должен быть пустым. Поэтому минимально возможный корректный HTML-документ выглядит так:
<!DOCTYPE html>
<title> </title> <!-- Название состоит из одного пробе-
ла -->
<link> – устанавливает связь с внешним документом, например с СSSфайлом (где хранятся стили). Атрибут href описывает путь к файлу стилей, rel (relationship) описывает тип связи «по ссылке файл со стилями», и без этих атрибутов использовать элемент нельзя.
<link rel="stylesheet" href="styles.css">
<script></script> – предназначен для описания скриптов, может содержать ссылку на скрипт или его текст на определённом языке. Атрибут type имеет значение text/javascript по умолчанию, и его можно не указывать. Ранее предполагалось, что JavaScript будет не единственный скриптовым языком для браузеров. Использовался VBScript (язык от Microsoft), его тип – text/vbscript. На сегодняшний день для использования в клиентской части сайта доступен только JavaScript.
<script src="path/to/my-jquery-plugin.js"
type="text/javascript"></script>
<style></style> – предназначен для определения стилей в коде.
<style>
p { color: red; }
</style>
14
<meta> – метатег – определяет метаинформацию документа. Например, ключевые слова, автора документа, заголовок, кодировку.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="keywords" content="CERN, European, phys-
ics">
</head>
</html>
Атрибут name задаёт название, content – значение. Наиболее известны:
•author – имя автора документа;
•description – описание текущего документа;
•keywords – список ключевых слов.
Особый метатег <meta charset="utf-8"> задаёт кодировку всего документа. Его рекомендуется располагать до любого текста на странице, включая <title>.
В исходной спецификации HTML5 не так много метатегов, поэтому компания Facebook расширила его спецификацией Open Graph. Результат использования OpenGraph можно встретить при размещении ссылок в социальных сетях: благодаря такой разметке рядом со ссылкой появляется изображение, краткое описание и другая полезная информация.
Помимо Facebook разметку Open Graph распознают также Яндекс, ВКонтакте, Google+, Twitter, LinkedIn, Pinterest и др.
Кроме информационных метатегов есть технические. Технические метатеги фактически копируют HTTP-заголовки и влияют на поведение документа. Вместо name в них просто используется атрибут http-equiv (HTTP Header Equivalent).
Секционные элементы
Секционные элементы необходимы для деления документа на смысловые части: основное содержимое, неосновное, навигация, шапка, подвал. К этим элементам относятся: article, section, aside, header, footer, nav, ad-
dress.
Элемент <article></article> обозначает законченную самодостаточную часть документа, которая вполне может существовать независимо: пост на форуме или в блоге, новостная статья или виджет (например, календарь),
15
комментарий. Элемент может содержать вложенные <article>. Так, пост в блоге может включать в себя комментарии посетителей, каждый из которых является <article>.
Элемент <section></section> определяет раздел в документе, такой как глава, шапка, подвал или любая другая часть документа. Блоки article и section предполагают наличие хотя бы одного заголовка.
Элемент <nav></nav> определяет блок с навигацией по связанным документам. Его рекомендуется использовать только для главной навигации. Например, для ссылок в подвале документа лучше использовать элемент <footer>, а не <nav>. Браузер может использовать ссылки в этом элементе, чтобы предсказывать дальнейшие действия посетителей и предзагружать страницы.
Элемент <aside></aside> определяет блок с сопутствующим содержимым. Например, для обозначения сносок или цитат. Также этот элемент может использоваться для группировки нескольких элементов <nav>.
Элемент <header></header> определяет шапку всего документа или шапку секции.
Элемент <footer></footer> определяет подвал всего документа или подвал секции.
Элемент <address></address> определяет блок с контактной информацией, относящейся к ближайшему <article> или <body>. <address> не должен содержать другой информации, кроме контактной: почтовый адрес, электронная почта, домашняя страницы в интернете.
Заголовочные элементы
Элементы <h1>, <h2>, <h3>, <h4>, <h5>, <h6> определяют заголовок для секционных элементов или <body>. Число определяет уровень: 1 – наивысший, 6 – наименьший.
<header>
<h1>Грамматика немецкого языка</h1>
</header>
<article>
<h2>Имя существительное (Substantiv)</h2>
<section>
<h3>Определенный и неопределенный артикли</h3>
16
<p>В немецком языке не бывает просто дерева. Может быть либо ein Baum [айн баум] - одно (какоелибо) дерево, либо der Baum [дэа баум] - то (самое) дерево.</p>
</section>
</article>
Группирующие элементы
Группирующие элементы объединяют логические блоки внутри секций – main, p.
Элемент <main></main> определяет главное содержимое страницы. Согласно спецификации W3C данный элемент может быть только один (в версии WHATWG такого ограничения нет).
Элемент <p></p> (paragraph) определяет параграф текста. Внутри <p> можно размещать только текстовые элементы:
·····························································
<!-- Хорошо --> <p>
<mark>Яндекс.Браузер</mark> предостерегает пользователей, когда они начинают вводить пароль на подозрительных страницах.
</p>
<!-- Плохо --> <p>
<h1>Заголовок первого уровня</h1> </p>
Последний пример браузер поймёт как: <p>Список покупок</p>
<h1>Заголовок первого уровня</h1> <p></p>
·····························································
Не рекомендуется использовать <p>, если есть более подходящий элемент. Например, для электронной почты лучше использовать <address>.
Элемент <hr> (horizontal rule) разделяет параграфы текста, например когда сменилась тема повествования. По умолчанию браузер рисует горизонтальную линию.
17
Элемент <pre></pre> (preformatted text) определяет блок предварительно форматированного текста. Такой текст отображается моноширинным шрифтом, сохраняя всё форматирование: пробелы, отступы.
Элемент используется когда необходимо вывести участок кода или ASCII графику:
<pre>
<code>function Panel(element, canClose) {
this.element = element;
this.canClose = canClose;
}</code>
</pre>
Элемент <blockquote></blockquote> предназначен для выделения длинных цитат внутри документа. Атрибут cite определяет ссылку на источник цитаты.
<blockquote cite="http://example.com">
Life is what happens to you while you’re busy making other plans. // Джон Леннон
</blockquote>
Элемент <ol> (ordered list) определяет упорядоченный список – при выводе на экран каждый элемент списка будет пронумерован. Элемент li (list item) определяет элемент списка.
Элемент <ul> (unordered list) определяет НЕупорядоченный список – при выводе на экран каждый элемент списка будет обозначен точкой или любым другим символом. Списки могут быть вложены друг в друга.
Элемент <dl></dl> (definition list) задаёт список «термин – описание». Внутри него задается термин элементом <dt></dt> (definition term) и описание термина – элементом <dd></dd> (definition description).
<dl>
<dt>GIF</dt>
<dd>Формат графических файлов, широко применяемый при создании сайтов.
GIF использует 8-битный цвет и эффективно сжимает сплошные цветные области,
при этом сохраняя детали изображения.</dd> </dl>
Каждому термину <dt> может соответствовать несколько описаний
<dd>.
18
·····························································
Этот элемент также может определять любые списки типа «ключ – значение», а не только «термин – описание».
<dl>
<dt>Дата</dt>
<dd>20 сентября 2015</dd>
<dt>Автор</dt>
<dd>Артур</dd>
</dl>
·····························································
Элемент <figure></figure> используется для группирования любых элементов и добавления подписи к ним с помощью элемента <figcaption></figcaption>. Чаще всего используется для добавления подписей к изображениям или коду.
Элемент <div></div> (division, раздел) – универсальный группирующий элемент с целью изменения вида содержимого через стили.
<div style="color: red;">
<p>Как только пользователь устанавливает курсор мыши в поле для ввода пароля на любом сайте, которого нет в списке, активируется система защиты.</p>
</div>
Элемент <div> не несёт смысловой нагрузки, поэтому его не рекомендуется использовать, если есть более подходящий.
Табличные элементы
Элемент <table></table> предназначен для разметки табличных дан-
ных.
<thead></thead> обозначает шапку таблицы. <tr></tr> обозначает строку данных. <th></th> обозначает ячейку шапки. <tbody></tbody> обозначает данные таблицы. <td></td> обозначает ячейку таблицы.
<table>
<thead>
<tr>
<th>Game name</th>
<th>Game publisher</th>
19
</tr>
</thead>
<tbody>
<tr>
<td>Diablo</td>
<td>Blizzard</td>
</tr>
<tr>
<td>Portal</td>
<td>Valve</td>
</tr>
</tbody>
</table>
В результате работы кода будет выведена таблица из двух столбцов и трех строк (рис. 1.2). Вообще элемент <tbody></tbody> является необязательным, однако при выводе в браузере, если открыть «Панель разработчика», можно заметить, что этот элемент присутствует. Такова особенность вывода таблиц, поэтому хоть этот элемент и является необязательным, во избежание недоразумений его лучше использовать.
Game name |
Game publisher |
|
|
Diablo |
Blizzard |
|
|
Portal |
Valve |
|
|
Рис. 1.2 – Результат выполнения кода
Текстовые элементы
Элемент <em></em> (emphasis, акцент) предназначен для акцентирования текста.
<p><em>Cats</em> are cute animals.</p>
<em> обозначает ключевую часть предложения (не обязательно важного), в то время как <strong> обозначает именно важную информацию.
Элемент <strong></strong> предназначен для обозначения важной информацию.
<p><strong>Внимание! Идут учения!</strong></p>
20
Элемент <ins></ins> (inserted text) предназначен для выделения текста, который был добавлен к текущему. Атрибут datetime указывает на время добавления текста. По умолчанию браузер выделяет его подчёркиванием.
Элемент <del></del> (deleted text) предназначен для выделения текста, который был удалён. Атрибут datetime указывает на время удаления текста. По умолчанию браузер выделяет его зачёркиванием.
Элементы <del> и <ins> чаще всего используются для того, чтобы показать, что изменилось в документе с момента последней его редакции.
Элемент <mark></mark> (marked text) помечает текст как выделенный. По умолчанию браузер выделяет его жёлтым маркером. Удобно использовать этот элемент и для выделения участка кода:
<pre>
<code>function <mark>Panel</mark>(element, canClose) {
this.element = element;
this.canClose = canClose;
}</code>
</pre>
Элемент <small></small> предназначен для различных оговорок. Например, для условий и правовых ограничений в рекламе. По умолчанию браузер выделяет его мелким шрифтом.
Элемент <cite></cite> (отсылки) предназначен для выделения названий книг, песен, фильмов; имён авторов (то есть отсылок к ним).
<p>Роман Замятина <cite>Мы</cite> – одна из лучших книг-
антиутопий</p>
Элемент <q></q> (quote, цитата) предназначен для выделения цитат или обозначения прямой речи.
<p><q>Le général Koutouzoff,</q> – сказал Болконский,
ударяя на последнем слоге zoff, как француз</p>
Элемент <dfn></dfn> (definition, определение) предназначен для выделения определений, терминов.
<p><dfn>Гипотенуза</dfn> – сторона прямоугольного тре-
угольника, лежащая против прямого угла.</p>
Элемент <abbr></abbr> (abbreviation) предназначен для выделения аббревиатур. Браузер при наведении покажет подсказку с расшифровкой.
<abbr |
title="Conseil |
Européen |
pour |
la |
Recherche |
Nucléaire">CERN</abbr>