Разметка текста. Встроенные элементы

	Акцентированный текст
<em>...</em>	Этот тег используется для придания акцента определённому слову или фразе. По умолчанию такой текст выделяется курсивом. Под акцентом подразумевается ударение на слове или фразе, которое обычно придаёт окрас речи. Для курсивного начертания декоративного текста используйте CSS.
	Важный текст
<strong>...</strong>	Этим тегом выделяются важные слова или фразы в тексте. По умолчанию такой текст выделяется полужирным. Под важным текстом подразумевается тот текст, на который необходимо обратить внимание, и игнорирование которого, возможно, приведёт к неприятным последствиям или к непониманию сути текста. Для полужирного начертания декоративного текста используйте CSS.
	Альтернативная речь
<i>...</i>	Данный тег указывает на текст, который отличается по стилю речи, настроению, либо фразы на иностранном (разговорном/сленговом) языке. По умолчанию выделяется курсивом. Не путайте с тегом <em>. Для курсивного начертания декоративного текста используйте CSS.
	Ключевые слова
<b>...</b>	Используется для выделения ключевых слов или названий без придания какого-либо акцента. По умолчанию выделяется полужирным. Не путайте с тегом <strong>. Для полужирного начертания декоративного текста используйте CSS.
	Неточный текст
<s>...</s>	Используется для выделения текста, который является неточным или неактуальным. По умолчанию такой текст отображается перечёркнутым.
	Аннотированный текст
<u>...</u>	Используется для выделения имён собственных, иностранных слов либо ошибок в тексте. По умолчанию такой текст отображается подчёркнутым.
	Удалённый текст
<del>...</del>	Используется для выделения текста, который был удален из новой версии документа. По умолчанию такой текст отображается перечёркнутым. Не путайте с тегом <s>.
	Вставленный текст
<ins>...</ins>	Используется для выделения текста, добавленного в новой версии документа. По умолчанию такой текст отображается подчёркнутым. Не путайте с тегом <u>.
	Источники
<cite>...</cite>	Используется для выделения названия произведения (книги, фильмы и другие источники), которые так или иначе упоминаются в тексте. По умолчанию выделяется курсивом. Не используется для разметки авторов произведения.
	Короткие цитаты
<q>...</q>	Используется для выделения коротких цитат. По умолчанию такой текст выделяется кавычками. Стиль кавычек можно изменить с помощью CSS.
	Аббревиатуры
<abbrtitle="...">...</abbr>	Используется для выделения последовательности символов, являющихся аббревиатурой. Имеет необязательный (но крайне желательный) атрибут title, в котором пишется расшифровка аббревиатуры. В браузере, при наведении на аббревиатуру мышкой, появляется всплывающая подсказка с расшифровкой аббревиатуры. Поисковики индексируют не только аббревиатуру, но и её расшифровку.
	Новые термины
<dfn>...</dfn>	Используется для выделения новых терминов (их первое употребление и определение). По умолчанию выделяется курсивом. Имеет необязательный атрибут title, в котором пишется определение термина.
	Программный код
<code>...</code>	Используется для выделения программного кода. По умолчанию отображается как моноширинный текст уменьшенного размера. Поскольку символы табуляции, пробелы и переносы в данном теге не учитываются, то используется в связке с тегом <pre>: <pre> <code> //Программный код </code> </pre>
	Названия клавиш
<kbd>...</kbd>	Используется для названия клавиш. По умолчанию отображается как моноширинный текст. Обычно им выделяют комбинации клавиш, вводимых на клавиатуре: <p> Введите на клавиатуре комбинацию клавиш <kbd>Alt</kbd> + <kbd>Shift</kbd> </p>
	Выделенный текст
<mark>...</mark>	Используется для привлечения внимания к тексту. Обычно им выделяют что-то важное для читателя, либо используется разработчиками для выделения слова из поиска на их сайтах. По умолчанию выделяется фоном жёлтого цвета (как выделенный текст цветным маркером).
	Юридический текст
<small>...</small>	Используется для выделения юридического текста, информации о лицензии, авторских правах и т.д. Уменьшает текст на одну условную единицу.
	Нижний индекс
<sub>...</sub>	Используется для расположения текста в нижнем индексе (например для математических или химических формул). Такой текст располагается ниже базовой линии текста и уменьшается в размерах.
	Верхний индекс
<sup>...</sup>	Используется для расположения текста в верхнем индексе (например для математических или химических формул). Такой текст располагается выше базовой линии текста и уменьшается в размерах.
	Дата и время
<time>...</time>	Используется для выделения в тексте даты или времени. Есть необязательный атрибут datetime, в котором указывается дата и время в формате ISO 8601. Более подробно узнать об этом атрибуте советую на сайте http://webref.ru/. Этот атрибут создан для однозначной трактовки содержимого данного тега, которое может быть написано в свободном формате, роботами поисковиков при индексации страниц.

 

Разметка текста. Переносы

	Перевод строки
<br>	Используется для перевода текста на следующую строку. Поскольку язык HTML игнорирует перевод строки в своём коде и заменяет их на пробел, то для явного указания перевода строки используется этот тег. Не злоупотребляйте его использованием и вставляйте его только при крайней необходимости. Обычно, если нужно перенести текст на следующую строку, его заключают в блочный тег (например абзац, заголовок и т.д.), либо пользуются средствами CSS. Является встроенным элементом ("display: inline;"). Одинарный тег.
	Перенос слова
<wbr>	Используется для чёткого указания позиции в слове, в котором допустим перенос на следующую строку. Обычно этот тег добавляют в очень длинные слова, которые могут не уместиться на одной строке. Если же слово уместилось, то оно отображается как обычно. Если же нет, то часть слова переносится согласно указанным разрешенным позициям. При переносе слова браузеры не добавляют символ дефиса, поэтому если вам необходим символ переноса, то рекомендую не пользоваться данным тегом и заменить его спецсимволом &shy;. Его поведение аналогично тегу <wbr>. <p> Ма&shy;ма мы&shy;ла ра&shy;му </p>

 

Cсылки

В разделе 1.3 мы уже рассматривали пример ссылки. Ссылка добавляется двойным тегом <a>. Содержимое этого тега — текст ссылки, а в атрибуте href хранится адрес, на который ссылается ссылка. Пример использования:

1. <p>Текст... <ahref="http://google.com/">Ссылка</a>... текст.</p>

По умолчанию ссылка в браузере отображается синим цветом с нижним подчёркиванием текста ссылки. При переходе по ссылке, она меняет цвет на фиолетовый (посещённая ссылка). Тип отображения inline (встроенный элемент). По умолчанию ссылка открывается в текущей вкладке браузера. Это поведение можно изменить, но я крайне не рекомендую этим пользоваться. Изменять поведение перехода по ссылке стоит только в особенных случаях, когда это действительно необходимо. Нужно уважать пользователя и предоставлять ему выбор, открыть ссылку в текущей вкладке, в новой вкладке или в новом окне.

Чтобы сделать ссылкой изображение, необходимо лишь поместить это изображение внутрь ссылки. Пример:

1. <ahref="http://google.com/">
2. <imgsrc="image.jpg">
3. </a>

Более подробно об изображениях мы поговорим в следующем разделе.

Внешние ссылки

Под внешними ссылками понимаются ссылки, которые ведут на сторонние сайты. Такие ссылки ещё называют абсолютными.

Абсолютные ссылки всегда начинаются с названия протокола передачи данных. Обычно это http или https. И соответственно ссылка на корневой каталог внешнего сайта записывается как "http://example.com/" или "https://example.com/". Обычно сервера настроены так, что при обращении к корневому каталогу сайта пользователю отправляется файл index.html, лежащем в корневом каталоге. Но название этого файла может отличаться от приведённого, т.к. его можно изменить в настройках веб-сервера.

Всё, что расположено после адреса сайта, является путём в дереве каталогов сайта. Однако далеко не всегда то, что написано после доменного имени сайта является реальными каталогами или файлами. Веб-сервер может быть настроен как угодно. Например вы переходите по ссылке "http://example.com/news/", что означает, вы просите посмотреть содержимое каталога news, который лежит в корне сайта, однако по факту, сервер получает GET запрос "/news/", и у него прописано, что по этому запросу нужно выдать, допустим, страницу page.html (а не содержимое каталога), которая лежит в папке pages, которая лежит в папке site. То, что я сейчас описал, возможно покажется непонятным, но для front-end разработчика такие подробности, в принципе, не обязательны. Если же вы в будущем планируете заняться разработкой серверной части, то потом вы поймёте, как работает сервер. А пока вам лишь нужно знать, что в абсолютных ссылках пишется полный адрес страницы, который вы обычно видите в адресной строке браузера.

Внутренние ссылки

Данный тип ссылок используется для навигации по вашему сайту. Такие ссылки ещё называют относительными, потому что они ссылаются на ваши каталоги или файлы относительно вашего же сайта. Причем домен вашего сайта и его расположение роли не играет. Используя относительные ссылки в вашем коде вы можете спокойно изменить домен и ваши ссылки продолжат работать. Поэтому не стоит делать навигацию по вашему сайту с помощью абсолютных ссылок, т.к. при смене домена вам придётся переделывать все ссылки вашего сайта, что весьма затруднительно, особенно когда сайт крупный.

Есть три приёма навигации по вашему сайту. Первый из них, это сослаться на корень вашего сайта. Такие ссылки начинаются со знака "/". После этого знака располагается путь от корня сайта. Например запись "/index.html" ссылается на файл index.html лежащий в корне вашего сайта. Запись "/pages/page.html" ссылается на файл page.html, который лежит в папке pages, которая расположена в корне вашего сайта. Стоит отметить, что не стоит использовать ссылки на корень сайта, когда ваш сайт ещё лежит на вашем компьютере. Для операционной системы Windows такая запись будет бессмысленной и он выдаст ошибку, а на Unix подобных системах вы сошлётесь на корневой каталог вашей системы, и скорее всего, этот файл не будет найдет (если конечно по этому адресу у вас действительно не лежит эта страница). Поэтому, пока ваш сайт не будет расположен на сервере, пользуйтесь следующими двумя приёмами.

Второй приём навигации по сайту, это ссылка относительно текущего документа, в котором эта ссылка расположена. Допустим страница расположена по адресу "/pages/page.html" и вторая страница по адресу "/pages/contacts.html". Чтобы со страницы page.html сослаться на страницу contacts.html нужно написать ссылку вида "contacts.html" (обратите внимание на отсутствие "/" в начале ссылки). В этом случае в том каталоге, в котором лежит файл page.html будет искаться файл по указанному пути. В данном случае это файл contacts.html. Аналогичным способом можно сослаться на каталоги, расположенные в данной папке. Например чтобы сослаться из файла "/pages/page.html" на файл "/pages/old/error.html", в первом файле необходимо указать ссылку вида "old/error.html".

И третий приём, это ссылка на вышестоящие каталоги в дереве каталогов. Допустим вам нужно сослаться со страницы "/pages/page.html" на страницу "/index.html". Для этого нужно выйти из каталога pages и найти там страницу index.html. Для выхода из каталога используется запись "../" и итоговая ссылка, которая должна быть размещена на странице page.html будет выглядеть так: "../index.html". Аналогично делается, если вам нужно выйти из нескольких каталогов. Например вам нужно сослаться со страницы "/pages/old/error.html" на "index.html". Ссылка для этого будет выглядеть так: "../../index.html".

Подведём итоги. Чтобы сослаться на корень сайта и искать файл относительно него, в начале ссылки размещают "/". Далее переход по каталогам осуществляется перечислением необходимых каталогов с указанием после каждого из них знака "/". Необходимый файл указывается в конце. Если не ссылаться на корень, то навигация осуществляется относительно текущего каталога, и знак "/" в начале не указывается. Если необходимо выйти из каталога то в ссылке прописывается "../".

Сводка рассмотренных тегов

 

	Ссылка
<a href="...">...</a>	Используется для форматирования ссылок. Тип отображения inline. Текст ссылки помещается как содержимое тега. В атрибуте href указывается адрес ссылки. По умолчанию текст ссылки подчёркивается и выделяется синим цветом. После посещения цвет ссылки меняется на фиолетовый.

 

Изображения

Для добавления изображений в HTMLиспользуется тег <img>. Данный тег мы уже рассматривали при создании и анализе своей первой страницы. У этого тега есть обязательный атрибут src, в котором указывается ссылка на изображение. Убедитесь в том, что расширение вашего изображения jpeg, gifили png. Другие типы изображений данный тег не поддерживает. Также крайне желательно указывать атрибут alt, в котором будет написано краткое описание изображения. Оно будет выведено пользователю, если по какой-то причине картинка не загрузилась. Тип отображения по умолчанию - inline. Пример использования данного тега:

1. <p>Текст...
2. <imgsrc="http://example.com/image.jpg"alt="Example image">
3.... текст.
4. </p>

	Изображение
<imgsrc="..."alt="...">	Используется для добавления изображений. Тип отображения inline. В атрибуте href указывается адрес изображения. В атрибуте altпишется краткое описание картинки. Оно будет выведено, если изображение не удалось загрузить.

 

Списки