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

HTML (язык разметки гипертекста) — это язык разметки , который сообщает веб-браузерам, как структурировать посещаемые вами веб-страницы. Это может быть настолько сложно или просто, насколько того хочет веб-разработчик. HTML состоит из ряда элементов, которые вы используете для включения, переноса или разметки различных частей контента, чтобы он выглядел или действовал определенным образом. Заключающие теги могут превращать контент в гиперссылку для перехода на другую страницу, выделять слова курсивом и т. д. Например, рассмотрим следующую строку текста:

Если бы мы хотели, чтобы текст оставался отдельным, мы могли бы указать, что это абзац, заключив его в <p> элемент абзаца ( ):

HTML

<p>My cat is very grumpy</p>

Давайте подробнее изучим наш элемент абзаца из предыдущего раздела:

Анатомия нашей элемента такова:

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

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

Отредактируйте строку ниже в области «Редактора кода», обернув ее тегами <em> и </em>.Чтобы открыть элемент, поместите открывающий тег <em> в начало строки. Чтобы закрыть элемент, поместите закрывающий тег </em> в конце строки. Это должно привести к форматированию текста курсивом! Просматривайте обновления изменений в режиме реального времени в области «Вывод (правая область редактора). Если вы допустили ошибку, вы можете очистить свою работу с помощью кнопки «Reset».

Элементы можно размещать внутри других элементов. Это называется вложением. Если бы мы хотели указать, что наш кот очень сварливый, мы могли бы обернуть слово «очень» в <strong> элемент, что означает, что слово должно иметь строгое форматирование текста:

HTML

<p>Мой кот <strong>очень</strong> сварливый.</p>

Пример:

Мой кот очень сварливый.

Есть правильный и неправильный способ вложения. В приведенном выше примере мы сначала открыли элемент тегом <p>, а затем открыли тег <strong>. Для правильной вложенности мы должны сначала закрыть элемент тегом </strong>, а затем закрыть весь элемент </p>.

Ниже приведен пример неправильного способа вложения:

HTML

<p>Мой кот <strong>очень сварливый.</p></strong>

Пример:

Мой кот очень сварливый.

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

Не все элементы следуют шаблону открывающего тега, содержимого и закрывающего тега. Некоторые элементы состоят из одного тега, который обычно используется для вставки/внедрения чего-либо в документ. Такие элементы называются пустыми элементами. Например, <img> элемент встраивает файл изображения на страницу:

HTML

<img
  src="images/firefox-icon.png"
  alt="Firefox icon" />

Это выведет следующее:

Элементы также могут иметь атрибуты. Атрибуты выглядят следующим образом:

Атрибуты содержат дополнительную информацию об элементе, которая не будет отображаться в содержимом. В этом примере 'class' атрибут представляет собой идентифицирующее имя, используемое для указания элемента с информацией о стиле. Атрибут должен иметь:

• Пробел между ним и именем элемента. (Для элемента с более чем одним атрибутом атрибуты также должны быть разделены пробелами.)
• Имя атрибута, за которым следует знак равенства.
• Значение атрибута, заключенное в открывающие и закрывающие кавычки.

Другой пример элемента: <a>. Это означает якорь . Якорь может превратить заключенный в него текст в гиперссылку. Якоря могут принимать ряд атрибутов, вот некоторые из них:

Отредактируйте строку ниже в области ввода , чтобы превратить ее в ссылку на ваш любимый веб-сайт.

1. Добавьте открывающий <a> и закрывающий </a> теги в элемент.
2. Добавьте href атрибут и через знак = в кавычках ссылку на любой сайт и атрибут title с присвоением через знак = информации о сайте заключенной в кавычки.
3. Укажите target атрибут, чтобы ссылка открывалась в новой вкладке (target=«_blank»).

Отредактируйте строку ниже в области «Редактора кода», и вы должны увидеть ссылку, которая при наведении курсора мыши отображает значение атрибута title, а при нажатии открывает новую вкладку и переходит к веб-адресу href атрибута. Помните, что вам необходимо включать пробел между именем элемента и между каждым атрибутом. Просматривайте обновления изменений в режиме реального времени в области «Вывод (правая область редактора).

Если вы допустили ошибку, вы можете очистить свою работу с помощью кнопки «Reset». Смотрите пример ниже:

HTML

<a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">Ссылка на сайт</a>

Иногда вы увидите атрибуты, написанные без значений. Это вполне приемлемо. Они называются логическими атрибутами. Логические атрибуты могут иметь только одно значение, которое обычно совпадает с именем атрибута. Например, рассмотрим disabled атрибут, который можно назначить элементам ввода формы. (Это используется для отключения элементов ввода формы, чтобы пользователь не мог вводить данные. Отключенные элементы обычно отображаются серым цветом.) Например:

HTML

<!-- использование отключенного атрибута не позволяет конечному пользователю вводить текст в поле ввода -->
<input type="text" disabled="disabled" />

Для краткости допустимо записать это следующим образом:

HTML

<!-- использование отключенного атрибута не позволяет конечному пользователю вводить текст в поле ввода -->
<input type="text" disabled />
 
 
<!-- ввод текста разрешен, так как он не содержит атрибута отключен -->
<input type="text" />

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

Если вы посмотрите на код многих других сайтов, вы можете встретить ряд странных стилей разметки, включая значения атрибутов без кавычек. Это разрешено при определенных обстоятельствах, но также может привести к нарушению вашей разметки при других обстоятельствах. Например, если мы вернемся к нашему предыдущему примеру со ссылкой, мы могли бы написать базовую версию только с атрибутом href, вот так:

HTML

<!-- правильный синтаксис (с кавычками) -->
<a href="https://www.mozilla.org/">Ссылка на сайт</a>
 
<!-- не желательный синтаксис без кавычек (разрешено при определенных обстоятельствах) -->
<a href=https://www.mozilla.org/>Ссылка на сайт</a>

Однако как только мы добавляем атрибут titleтаким образом, возникают проблемы:

HTML

<!-- не правильный синтаксис (без кавычек) при атрибуте title со значением The (вместо The Mozilla homepage) -->
<a href=https://www.mozilla.org/ title=The Mozilla homepage>Ссылка на сайт</a>

Как написано выше, браузер неправильно интерпретирует разметку, принимая title атрибут за три атрибута: атрибут title со значением The и два логических атрибута Mozilla и homepage. Очевидно, это не предназначено! Это приведет к ошибкам или неожиданному поведению, как вы можете видеть на живом примере ниже. Попробуйте навести курсор на ссылку, чтобы просмотреть текст заголовка!

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

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

HTML

<!-- правильный синтаксис (с двойными кавычками) -->
<a href="https://www.mozilla.org/" title="The Mozilla homepage">Ссылка на сайт </a>
 
<!-- правильный синтаксис (с одинарными кавычками) -->
<a href='https://www.mozilla.org/' title='The Mozilla homepage'>Ссылка на сайт#1 </a>
 
<!-- правильный синтаксис (с двойными для атрибута href="" и и одиночными для атрибута title='') -->
<a href="https://www.mozilla.org/" title='The Mozilla homepage'>Ссылка на сайт#2 </a>

Убедитесь, что вы не смешиваете одинарные и двойные кавычки для одного атрибута. Этот пример (ниже) показывает своего рода смешение кавычек, которое может пойти не так (вместо ссылки https://www.mozilla.org/ получим <color #ed1c24>https://www.mozilla.org/'title=</color>):

HTML

<!-- не правильный синтаксис (с разными кавычками) -->
<a href="https://www.mozilla.org/' title="The Mozilla homepage">Ссылка на сайт#3 </a>

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

HTML

<!-- одинарная кавычка внутри двойной -->
<a href="https://www.mozilla.org/" title="Isn't no the Mozilla homepage">Ссылка на сайт#4 </a>

Чтобы использовать кавычки внутри других кавычек того же типа (одинарной или двойной кавычки), используйте сущности HTML (например " может быть интерпретирован как обрамляющая значение атрибута кавычка):

HTML

<!-- использование сущности html &quot;  -->
<a href="https://www.mozilla.org/" title="Isn't &quot;no the&quot; Mozilla homepage">Ссылка на сайт#5 </a>

Пример неправильного использования кавычек внутри других кавычек значения атрибута (отредактируйте строку ниже в области ввода в окне редактора «no the» на &quot;no the&quot; и вы сможете увидеть свои изменения в режиме реального времени в области «Вывод»). Если вы допустили ошибку, вы всегда можете сбросить ее с помощью кнопки Reset:

HTML

<!-- использование сущности html &quot;  -->
<a href="https://www.mozilla.org/" title="Isn't "no the" Mozilla homepage">Ссылка на сайт#6 </a>