Если мы скопируем и вставим этот HTML-код в валидатор W3C, он покажет, что наша HTML-страница действительна. Но давайте посмотрим, что произойдет, если мы возьмем один из элементов ненумерованного списка и просто удалим теги li вокруг него.

Если мы проверим этот код снова в валидаторе W3C, мы увидим, что HTML код теперь недействителен, и причина в том, что внутри тега ul не разрешен текст.

Единственное, что разрешено внутри элемента ul, – это элемент li. Все остальное не допускается.

Для создания упорядоченного списка тег ul заменяется тегом ol, но элементы li при этом точно такие же.

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

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

Если мы хотим, чтобы браузер интерпретировал специальные символы HTML как обычный контент, нам нужен способ указать браузеру не интерпретировать их как HTML код.

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

Это символы <, > и &. И эти символы зарезервированы в HTML. Например, если вы используете в тексте знаки меньше (<) или больше (>), браузер может перепутать их с тегами.

И для отображения зарезервированных символов в HTML используются сущности символов.

Вместо использования символа меньше <, вы должны использовать объект HTML, который начинается с амперсанда &, а затем следует lt;. и браузер интерпретирует это как символ меньше <.

Аналогично, для символа больше > нужно использовать >.

А для символа амперсанда & нужно использовать &.

На самом деле HTML содержит целую массу сущностей символов HTML.

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

Поэтому мы можем использовать вместо символа авторского права – ©.

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

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

Теперь, давайте поговорим о ссылках на другие документы и способы их создания на HTML-странице.

Итак, первый тип ссылок, который мы собираемся рассмотреть, – это внутренние ссылки.

И мы создаем ссылки с помощью элемента <а> с атрибутом href.

Атрибут href указывает гипертекстовую ссылку. И значение href может быть как относительным, так и абсолютным URL-адресом.

В нашем случае, так как мы обсуждаем внутренние ссылки, которые указывают на внутренние веб-страницы сайта, ссылки являются относительными URL-адресами.

Также полезно указывать атрибут title для тега a. Атрибут title используется программами чтения с экрана, которые помогают слабовидящим людям просматривать веб-страницу.

Далее, содержимое между открывающим и закрывающим тегами элемента <а> – это содержимое, по которому вы сможете щелкнуть, чтобы перейти к ссылке href.

Теперь, обратите внимание на второй пример тега a. В этом примере мы окружаем тег div тегом а. Другими словами, этот тег div будет контентом ссылки, по которому можно будет щелкнуть.

Таким образом, первая ссылка является встроенным тегом, так как она не инициирует переход на новую строку. Но во втором случае, мы окружаем блочный тег div тегом a.