Теги HTML

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

Важно! Элементы гипертекста, в которых отсутствует контент, именуются пустыми. У таких элементов ко всему прочему отсутствует и закрывающий тег. К числу таких элементов относится тег, обозначающий переход на новую строку – </br>.

Вложение элементов HTML один в другой

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

Тег <html> является контейнером для всей гипертекстовой разметки. У него есть как открывающий тег <html>, так и закрывающий – </html>. У абсолютно любой веб-страницы есть как минимум два элемента, которые в любом случае имеют у себя внутри какой-то контент: <header> и <body>. Первый тег несет в себе данные о странице, которые используют поисковики при индексации. В нем разработчики прописывают такие теги как <meta> и <title>. Конечный пользователь из видеть информацию, прописанную в них не может. Контент, видимый посетителю веб-сайта, помещается в элемент <body>.

Этот HTML-тег содержит так называемое «тело» страницы. Он также имеет открывающий тег <body> и закрывающий – </body>. Внутри body также содержится элемент <h1>, оборачивающий заголовок основного содержимого и <p> – статья.

Тег <h1> содержит заголовок. У него, как и у предыдущих элементов есть открывающий и закрывающий теги.

Элементом <p> обозначается основное содержимое страницы – тот контент, за которым пользователь, собственно и переходит на страницу.

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

Элементы разметки, не содержащие контента

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

В спецификациях HTML пятой версии не прописано, что пустой тег обязательно нужно закрывать. Однако в том случае, когда разработчик стремится добиться более строгой проверки, или добиться, чтобы парсерам XML было его легче анализировать, все теги гипертекстовой разметки должны быть правильно закрыты.

В каком регистре нужно прописывать теги в HTML пятой версии?

Весь код гипертекстовой разметки можно писать в том регистре, в котором это удобно разработчикам. К примеру, тег <p> будет читаться браузером точно также, как и <P>. Спецификации HTML пятой версии не обязывает разработчиков писать строчные буквы, однако справочник W3C советует писать все же строчные теги, и требует, чтобы в более строгих стандартах (например, XHTML) использовались лишь строчные буквы.

Важно! W3C СОВЕТУЕТ прописывать теги в нижнем регистре (строчными буквами).

Параметры HTML5

Параметры содержат дополнительные сведения об элементах гипертекстовой разметки:

  • абсолютно любой элемент разметки может иметь те или иные параметры;
  • эти параметры дают браузеру дополнительные сведения о теге;
  • параметры абсолютно всегда прописываются в начале открывающего тега элемента;
  • как правило, параметры представляют собой пару имя/значение, к примеру parameter_name=”value”.

Параметр href

Гиперссылки в разметки задаются тегом <а>, сам url прописывается как значение параметра href.

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

<body>
  <p><a href="#1">Абзац 1</a></p>
  <p><a href="#2">Абзац 2</a></p>
  <a name="1"></a>
  <h3>Параметр href</h3>
  Применение параметра href для навигации по странице
  <a name="2"></a>
  <h3>Параметр scr</h3>
  Текст абзаца
  <p><a href="https://domhtml.ru/">Гиперссылка</a></p>
</body>
Атрибут href: гиперссылки и навигация по станице, задающиеся параметром a

Параметр src

Картинки в разметке HTML оборачиваются в элемент <img>. Что касается названия файла, из которого браузер возьмет изображение, то оно прописывается, как значение параметра src.

Параметры, задающие ширину (width) и высоту (height): как правило, картинки в HTML-разметке обладают параметрами, определяющими размер, а именно высоту и ширину этой картинки:

<img src=" image.png " width="480" height="240">
Атрибут scr: название изображения в теге img

Эти параметры картинки задаются в пикселях. width=»480″ значит, что ширина изображения будет 480 пикселей. Соответственно height=»240″ задает высоту 240 пикселей.

Параметр alt

Этот атрибут задает какой-то текст, который посетитель сайта увидит в том случае, если нет возможности показать картинку (например, если ее нет). Значение параметра alt можно считать как текст. К примеру, люди с проблемным зрением или вообще незрячие «слушают» HTML-документ, используя для этого синтезатор речи. Если у картинки прописан параметр alt, то он сможет понять, что было изображено на данной иллюстрации.

<img src="image.png" alt="Машина">
Атрибут alt: альтернативный текст для изображения тега img

Кроме того параметр alt пригодится, если отсутствует файл, в котором хранится картинка — на его месте пользователь увидит текст, прописанный в параметра alt.

Параметр style

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

<p style="color:red">Этот контент красного цвета</p>
Атрибут, задающий стиль выделенного контента

Чтобы выделить зоны внимания рекомендуется прописывать параметр style.

Параметр lang

Язык, на котором написан контент веб-страницы, чаще всего объявляется в открывающем теге <html>. Для этого используется параметр lang. Прописывать язык нужно, если страницу будут «слушать» плохо видящие люди при помощи специальных программ. Также это упрощает работу поисковых алгоритмов, и, как следствие служит внутренней поисковой оптимизации.

<!DOCTYPE html>
<html lang="en-US">
 <body>Содержимое веб-документа</body>
</html>
Атрибут lang: указание языка, на котором написан контент страницы

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

Параметр title

Здесь имеется ввиду параметр, добавляющийся к тегу <p>. Если навести курсор на такой параграф, то появится подсказка со значением атрибута title.

Важно! Не надо путать этот параметр с тегом из раздела <head>, в котором прописывается название страницы.

Используя параметр tittle сделать всплывающую подсказку: поместите курсор на первый абзац, и появится текст из параметра tite в виде всплывающей подсказки. Однако, нужно помнить, что на сенсорных экранах этот параметра работать не будет.

<head>
  <title>Параметр title</title>
</head>
<body>
  <p title="Важная информация">Пример всплывающей подсказки</p>
</body>
Атрибут title: различие с тегом title, назначение для веб-документа

Правила заполнения параметров

Используйте строчные буквы при задании значений для параметров: в спецификациях языка HTML пятой версии не сказано, что нужно использовать исключительно строчные буквы. Любой атрибут может быть записан в том регистре, в котором вам удобно. Однако, W3C советует использовать нижний регистр и требует этого, если дело касается XHTML. Сами W3C всегда прописывают имена параметров строчными буквами.

Помещайте значение параметра в кавычки: как и со строчными буквами, в спецификациях HTML пятой версии нет требований, касательно кавычек. К примеру href вполне можно прописать так:

<a href=https://domhtml.ru/tag-a-v-html/>Тег а в HTML</a>
Пример использования атрибута href без кавычек

W3C относится к этому так же как и ко всему остальному: желательно в HTML и обязательно в XHTML. Это нужно, так как иногда кавычки все таки требуются, например, для параметра title:

<p title=Важная информация>Пример всплывающей подсказки</p>
Пример использования атрибута title без кавычек

Тут всплывающая подсказка отразится неправильно, так как в title записано значение с пробелом. При использовании такого кода пользователь увидит только «About» во всплывающей подсказке.

Важно! Чаще всего кавычки ставятся, так как без них могут возникать ошибки. W3C всегда помещает в кавычки значение параметров.

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

<p title="Джон Короткоствол Нельсон">

Противоположный пример.

<p title="Джон ‘Короткоствол’ Нельсон">

Итак, что мы узнали об атрибутах (параметрах)?

  • Любой тег в коде гипертекстовой разметки может обладать атрибутом;
  • title дает дополнительные данные о видимом объекте на странице;
  • в href прописывается адрес ссылки;
  • width и height задают размер картинки;
  • alt дает текст для чтения с экрана;
  • W3C всегда пишут имена параметров в нижнем регистре и помещают их значение в двойные кавычки.

Основные элементы в HTML5

Заголовки в HTML пятой версии

Эти элементы задаются тегами типа <hN>. При этом главный заголовок, которому будет присвоен самый крупный шрифт, задается тегом <h1>, тогда как наименее важный (и соответственно написанный самым мелким шрифтом) – <h6>.

<h1>Заголовок1</h1>
<h2>Заголовок2</h2>
<h3>Заголовок3</h3>
<h4>Заголовок4</h4>
<h5>Заголовок5</h5>
<h6>Заголовок6</h6>
Вид заголовков на странице от h1 до h6

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

Важность заголовков: алгоритмы поиска, такие как Google или Яндекс, ориентируются на заголовки, когда индексируют страницу. Посетители просматривают веб-документы по заголовкам. Заголовки позволяют структурировать текст и предоставлять поисковикам данные о структуре. Заголовок h1 используется для обозначения главного содержимого на странице, тогда как остальные помечают подразделы в порядке важности. Тегами заголовков следует оборачивать исключительно заголовки. Если нужно сделать текст большего шрифта или же жирным, то используются таблицы стилей.

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

<h1 style="font-size:50px;">Заголовок</h1>
Тег h1 с применением атрибута style

Разделители по горизонтали

Существует тег <hr> (horizontal rule – горизонтальный разделитель, полоса), который ставится для того, чтобы тематически отделить одну часть страницы от другой. Этот тег создатели сайтов также ставят, чтобы отделить измененную часть веб-документа, от исходной.

Элемент hr используется для тематического разрыва между элементами уровня абзаца.
<p>Текст над линией</p>
<hr>
<p>Текст под линией</p>
Разделение контента на странице при помощи тега hr

Параграфы или абзацы в HTML

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

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

<p> Этот абзац имеет

  много строк в исходном коде,

  но браузер не видит их.</p>
<p>Этот абзац
  имеет много пробелов
  в исходном коде,
  но браузер не видит их.</p>
Пример удаления строк и пробелов при отображении на экране

Переход на новую строку

Для этого используется тег br. Важно, что при этом новый абзац не создается.

<p>Этот<br>абзац<br>с переходом на новую строку, без вертикального отступа</p>
Применение тега br для перехода на новую стоку

Этот элемент – одиночный и не требует конечного тега.

Тег pre

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

<p>Семантическая разметка страниц сайта</p>
<p>Кроме логической структуры страниц сайта в спецификациях пятой версии HTML присутствует семантическая разметка.</p>
Вид текста, написанного в теге pre

Это самый легкий метод написать текст в стихотворной форме. Однако у него есть и подводные камни – такой текст не адаптируется по размеру, следовательно, при другом разрешении могут появиться ползунки прокрутки по горизонтали. Намного чаще стихи пишутся, ставя в конце каждой строки br.

<h3>Стих</h3>
<p>Первая строка<br>
  Вторая строка<br>
  Третья строка<br>
  Четвертая строка</p>
Пример написания стиха при помощи тега br

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

<!DOCTYPE HTML>
<html>
<head>
  <head>
    <meta charset="utf-8">
    <title>Теги HTML</title>
  </head>
<body>
  <header>Верхний колонтитул и логотип</header>
  <h1>Заголовок</h1>
  <main>Контент</main>
  <footer>Нижний колонтитул</footer>
</body>
</html>
Вид кода, написанного в теге pre

Смотрим исходный HTML-код веб-документа

Многие начинающие разработчики сайтов хотели бы знать: каким образом создатели того или иного ресурса добились тех или иных эффектов? Чтобы увидеть плод работ кодеров любимого сайта, щелкните ПКМ по странице в браузере и выпадающем меню выберете пункт «Посмотреть код страницы». Тут же появится новая вкладка с исходным кодом. Также во многих браузерах существует режим разработчика. Для этого нужно щелкнуть ПКМ по элементу или пустому пространству на сайте (элемент body, между прочим), и нажмите «Исследовать элемент». У вас тут же появится список элементов, в котором будет показан как код HTML, так и CSS. С помощью панели разработчика, можно сразу изменять этот код, и смотреть что получится.

Большая часть браузеров будет корректно воспринимать HTML код, в котором отсутствует 1-2 закрывающих тега. Однако нужно приучаться к порядку, так как результат такого кожа не всегда предсказуем. Не поставили закрывающий текст – готовьтесь к ошибкам и сюрреализму.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *