Оборудование        17.07.2019   

HTML элементы. Теги и синтаксис HTML

Здравствуйте, уважаемые читатели блога ! Продолжаем рубрику «Создаем сайт с нуля», а в частности тему тегов... И сегодня мы рассмотрим теги, которые присутствуют в любой интернет-страничке - , и . Есть еще один тег, который должен находиться в каждом HTML-документе и про который я уже писал в одной из предыдущих статей — , поэтому затрагивать его мы не будем.

В прошлых статьях рубрики я писал про создание пустого файла в формате html. Фактически, он был использован в статье про (именно в нем были применены теги заголовков). Теперь мы напрямую будем редактировать этот файл с полными описаниями.

И начнем статью именно с редактирования созданного файла. Лично я назвал его index.html, но имя может быть любым. Открываем его с помощью любого текстового редактора (лучше использовать Notepad++, так как в нем есть подсветка кода и другие полезные примочки). И сразу добавим в него теги , и ровно в таком порядке, в каком они написаны. Не забудьте их закрыть, как показано на скриншоте. Документ примет следующий вид:

А теперь рассмотрим значение каждого тега в отдельности. Не зря же они есть в каждом HTML-документе.

Функции тега Итак, тег является контейнерным (). Внутри него заключается все видимое и невидимое содержимое веб-страницы (включая теги и ). Открывающий тег идет сразу после декларации Doctype, а закрывающий стоит в конце документа. Тем самым, он дает понять браузеру, откуда начинать обработку документа и где ее заканчивать.

Теоретически, он и сам может понять что и как. Ведь ? Это переводчик языка HTML и вряд ли он начнет обработку с середины документа и закончит ее, не дойдя до конца. Вопрос, конечно, спорный, но я всегда думал (и сейчас не отказываюсь от своего мнения) о том, что написание данного тега обязательно.

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

Единственное, что точно могу сказать — большинство атрибутов не поддерживаются HTML 4.01 или нежелательны. Хотя один пример все же приведу. — всплывающая подсказка в любом месте документа. Например, при наведении мыши на изображение вы можете увидеть всплывающий текст. Также и в случае с этим тегом:

А вот что вы увидите, наведя курсор на документ с данным содержимым:

Предпочтительнее использовать атрибут title не в теге , а в любых других конкретных участках страницы. Во-первых — удобно, во-вторых — поисковые системы лучше отнесутся к вашему сайту. Непосредственно на оптимизацию ресурса этот тег не оказывает. Идем далее.

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

Какую же информацию можно увидеть в ? А никакую. Все, что находится в пределах этого тега доступно для глаза человека только с помощью просмотра исходного кода страницы. Все содержимое этого тега предназначено для поисковых систем и браузеров . Единственное, что вы хоть как-то можете увидеть это тег , который отвечает за заголовок окна веб-страницы. Вот пример:

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

Это мета-тег отвечающий за тип содержимого страницы (Content-Type). В данном случае, это html код в кодировке UTF-8 (content="text/html; charset=UTF-8"). Далее идет тег title, описанный выше. Затем идут строки, начинающиеся с тега . Он указывает на связь с внешним документом. Например, строка

указывает на то, что подключен (rel="stylesheet") файл с (type="text/css"), который находится по такому-то адресу (для уменьшения длины строки, я заменил половин адреса на точки). После обработки данной строки браузером он определит, откуда брать каскадные таблицы стилей .

Вообще, в теге head много информации,о которой можно рассказывать бесконечно долго. Последнее, что стоит отметить (конкретно в случае с ) — наличие тегов описания, ключевых слов и canonical. Я использую плагин All in One SEO Pack , поэтому они и присутствуют в пределах .

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

Какими бывают теги?

Большинство HTML-тегов являются парными: есть открывающий (например, ) и закрывающий тег, который от открывающего отличает слеш (/ ) после первой угловой скобки (например, ). Всё, что находится внутри пары тегов, называется их содержимым .

Содержимое Помещённый внутри этих тегов текст становится жирным

Бывают и непарные (одиночные) теги, которые называются метками . Их, в отличие от парных тегов, не нужно закрывать, потому что они не работают с содержимым, а выполняют какую-то функцию сами по себе. Пример одиночного тега -
. Он устанавливает перенос текста на следующую строку.

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

Любой тег состоит из:

  • Открывающей угловой скобки (< ).
  • Специального слова (имени тега). Например, hr , iframe , b .
  • Закрывающей угловой скобки (> ).
Основные HTML-теги

Так как теги - основа языка разметки, не удивительно, что их довольно много. Рассмотрим основные, самые важные теги.