Что такое тег в html

HTML :: Понятие тега и его синтаксис

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

(от англ. tag ) – специальная метка, используемая в HTML для разметки веб-страницы в соответствии с установленными правилами.

Синтаксис тегов HTML

символ слеша, если он есть;
имя тега;
атрибуты тега, если они есть;
значения атрибутов, если они есть.

В качестве примера рассмотрим два тега: <p id=»textIndent» title=»Описание города»> и </p> . Эта пара тегов образует элемент «Абзац» разметки документа. Первый из них является и обозначает начало элемента «Абзац» . Второй же является . Он сообщает браузеру о том, что элемент «Абзац» закончился и все, что будет написано далее, следует отнести к другому элементу разметки.

Как легко догадаться, у закрывающего тега после символа < должен стоять символ слеша / . Далее следует имя тега (в нашем примере это идентификатор p ) и символ > . Других составляющих закрывающие теги не имеют.

В открывающих тегах слеш не пишется. Тоже самое касается и , т.е. тегов, для которых закрывающего тега не существует. Зато в них может присутствовать дополнительная информация в виде (от англ. attribute ), определяющих какие-нибудь дополнительные свойства, и значений атрибутов, которые обычно записываются в формате имя_атрибута=»значение_атрибута» и отделяются друг от друга пробелами. Так в теге <p title=»Описание города»> имеется два атрибута и два соответствующих им значения. Следует отметить, что существуют атрибуты и без значений. В таком случае вторая часть пары и символ = отсутствуют, а вместо этого через пробел указывается только сам атрибут. Кроме того, строковые значения атрибутов должны указываться в кавычках. Мы для этих целей будем использовать двойные кавычки. Числа разрешается в кавычки не брать, но желательно так не поступать во избежание путаницы.

Регистр символов HTML

Что касается регистра символов имен тегов и имен атрибутов, то он значения не имеет. Так обе записи <p title=»Описание города»> и <P TITLE=»Описание города»> равносильны. Однако мы, за редким исключением, как в случае с тегом <!DOCTYPE html>, будем писать их в нижнем регистре.

Совсем по другому обстоит дело со значениями атрибутов, которые могут быть регистрозависимыми. Например, при указании путевых имен файлов регистр символов должен соответствовать первоисточнику, иначе наверняка возникнет ошибка. Так записи <img src=»https://html.okpython.net/pic_1.jpg»> и <img src=»https://html.okpython.net/PIC_1.JPG»> не эквиваленты, поскольку ссылаются на два разных файла изображения.

Обобщенный синтаксис записи тегов HTML

Таким образом, в общем случае для записи открывающего или одиночного тега мы будем использовать следующий синтаксис:
<имя_тега имя_атр_1=»знач_атр_1″ . имя_атр_n=»знач_атр_n»> , где имя_тега , а также имя_атрибута мы будем писать строчными буквами, а «значение_атрибута» записывать в двойных кавычках в независимости от того, является значение числом или строкой.

Теги в HTML

В основе разметки HTML-документов лежат теги. Что же такое тег?

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

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

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

Пример текста с тегом:

В данном примере мы видим текст, тег «a», а также служебную информацию – атрибуты тега. Ниже вы узнаете о них подробнее.

2.2 Виды тегов: открывающий, закрывающие, пустой тег

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

Открывающий тег – это просто ключевое слово в треугольных скобках. Пример:

Закрывающий тег похож на открывающий, но перед ключевым словом стоит косая черта. Пример:

Открывающий тег может содержать служебную информацию – атрибуты, закрывающий – нет . Открывающий тег всегда первый в паре. НЕ может сначала в тексте идти закрывающий тег, а затем – открывающий. Такой HTML-документ будет не валидный.

Одиночные теги не имеют закрывающего тега. Список таких тегов определяется HTML-стандартом . Примеры таких тегов:

<br> – перенос строки;
<img> – картинка.

Кстати, парный тег, если он не содержит информации внутри, можно записать в сокращенном виде. Пример:

Это не одиночный тэг, а пустой парный тег. Это как бы и закрытый и открытый теги одновременно. От закрытого тега он отличается тем, что косая черта стоит в конце (перед второй треугольной скобочкой).

2.3 Дерево тегов

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

Грубо говоря, в html-тексте может встретиться последовательность тегов:

Но не может быть:

Если открывающие тег <h2> находится внутри пару <h1> -тегов, то и его парный закрывающий тег </h2> тоже должен находиться внутри пары <h1> -тегов.

Таким образом все теги документа образуют некое дерево тегов. Сначала идет тег верхнего уровня, который обрамляет весь документ, обычно он называется <html> , у него есть дочерние пары тегов, у них свои и т.д.

Собственно программа, которая обрабатывает документ с тегами, именно так его видит – как дерево тегов с каким-то текстом внутри.

2.4 Атрибуты

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

Тег может содержать несколько атрибутов, и они имеют такой общий вид:

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

Но опытный программист сразу задаст вопрос: что делать если в качестве значения атрибута нужно использовать текст, содержащий символы «<» , «>» или кавычки?

Элементы, теги и атрибуты — Основы HTML, CSS и веб-дизайна

Мало кто любит терминологию и формальности, но, к счастью, в мире HTML всё довольно просто.

Страница состоит из элементов.
Элемент — это набор из тегов и содержания.
Теги чаще всего идут парами: открывающий ( <tag> ) и закрывающий ( </tag> ). Между ними находится то, что попадает под действие этого тега.
Открывающий тег может содержать дополнительную информацию — атрибуты и значения атрибутов. Атрибуты позволяют «настроить» тег.

В примере из предыдущего урока есть элемент a (anchor — якорь), состоящий из открывающего и закрывающего тегов <a></a> .

Это ссылка, и у неё есть атрибут href со значением https://ru.hexlet.io . Между открывающим и закрывающим тегами находится содержание — слово «Хекслет». Именно оно становится ссылкой.

А ниже есть картинка. Это пример одиночного тега, элемента, в котором не нужен закрывающий тег. Их ещё называют self-closing element — «самозакрывающиеся элементы».

Как видите, мы указали атрибут src (от английского "source" — источник) со значением https://i.imgur.com/789p0uP.png . Это адрес файла изображения.

А некоторые элементы состоят из нескольких вложенных элементов. Например, списки:

Это — пронумерованный список (ordered list), поэтому тег называется <ol> . А каждая строчка списка — это элемент списка (list item) — <li> .

На странице это будет выглядеть примерно так:

Код. Тайный язык информатики (Чарльз Петцольд)
Не заставляйте меня думать (Steve Krug)
Дизайн привычных вещей (Donald Norman)

А непронумерованный список (unordered list) создаётся с помощью <ul> . Заметьте, что достаточно лишь изменить открывающий и закрывающий тег всего списка, а сами элементы списка изменять не нужно.

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

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Об обучении на Хекслете

Статья «Как учиться и справляться с негативными мыслями»
Статья «Ловушки обучения»
Статья «Сложные простые задачи по программированию»
Урок «Как эффективно учиться на Хекслете»
Вебинар «Как самостоятельно учиться»

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

Name already in use

html-foxford-materials / lessons / html-base.md

Go to file T
Go to line L
Copy path
Copy permalink

Open with Desktop
View raw
Copy raw contents Copy raw contents

Copy raw contents

1.1 Теги и атрибуты

Что такое браузер

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

Браузер может быть:

Клиентским приложение на вашем компьютере
Приложением на смартфоне
Другим приложением, в которое встроен браузер
Браузер может быть доступен и на других устройствах (Smart TV, часы, компьютер автомобиля, холодильник) Вы сообщаете браузеру что отобразить, для этого указываете ему адрес документа, или URL (Uniform Resource Locator) — единый указатель ресурса

протокол — схема обращения к ресурсу, для веб-страниц, это http или https.

хост — полностью прописанное доменное имя сервера.

путь — уточняющая информация о месте нахождения ресурса, очень похожа на путь в файловой системе.

якорь — идентификатор «якоря», ссылающегося на некоторую часть (раздел) открываемого документа.

Например, адрес страницы программы на которой вы все регистрировались на этот курс http://netology.ru/programs/html-css-base

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

Что делает браузер:

Формирует и отправляет запрос на сервер (HTTP)
Получает ответ сервера (HTTP)
Разбирает ответ сервера, документ (HTML)
Рисует и отображает полученную страницу в окне (HTML и CSS)
Реагирует на действия пользователя (CSS и JavaScript)

HTML документ, полученный с сервера содержит:

Текстовая информация;
Структура документа (заголовки, абзацы и т.д.);
Ссылки на другие ресурсы (изображения, видео, аудио, стили).

book

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

текст разбитый на абзацы
заголовки разных уровней
иллюстрации
цитаты
акценты по тексту

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

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

Для создания не должно требоваться сложное программное обеспечение.
Дать возможность указать браузеру что является заголовком, абзацем, иллюстрацией.
Процесс создания документа должен быть простым.
Сам подход должен быть легок в изучении.

Для создания не должно требоваться сложное программное обеспечение — пусть документ будет обычным текстом, тогда для создания потребуется обычный текстовый редактор. Текстовый редактор — блокнот. Текстовый процессор — MS Word.

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

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

Сам подход должен быть легок в изучении — а это мы проверим по итогам курса К меткам есть дополнительные требования:

Метка должна быть уникальной и не используются в обычной письменной речи. Поэтому Заголовок — плохой вариант метки, как и символ *.
Они должны состоять из небольшого числа символов, иначе их набор будет утомителен. Поэтому ТутНачинаетсяЗаголовокОтнынеИВоВекиВеков — плохой вариант метки, хоть и вряд ли встретится в самом тексте.
По ним должна быть понятна их суть. Поэтому ТНЗ29 — тоже плохой вариант метки, хоть короткий и уникальный

Язык разметки — набор символов или последовательностей, вставляемых в текст для передачи информации о его выводе или строении.

HTML — HyperText Markup Language — «язык гипертекстовой разметки» Cтандартизированный язык разметки документов во Всемирной паутине. HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения.

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

Стандарт поддерживается Консорциумом Всемирной паутины W3C. В стандарт как раз входит допустимый набор тегов, их роль, и прочие особенности их использования. Текущая версия стандарта HTML 5.1

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

tag

Теги в HTML заключены в угловые скобки < > Нам привычнее их называть символами меньше и больше. Так как нам нужно обозначать начало и конец элемента, например абзаца, то существует понятие открывающего и закрывающего тега. Тег p — позволяет выделить абзац текста (Paragraph по английски).

Для разметки заголовков предусмотрено 6 тегов, что позволяет нам различать заголовки разного уровня h1-h6 (Heading)

Для разметки блоков цитат, врезок и просто выделенных блоков текста предусмотрен тег blockquote .

Если не закрыть один из тегов, это может привести к ошибке отображения

Цитата может состоять из нескольких абзацев текста. Нам потребуется обозначить их внутри тега цитаты. В HTML можно помещать одни теги внутрь других. Поэтому мы можем текст внутри цитаты так же разметить тегами абзацев:

При этом теги p внутри цитаты будут дочерними для blockquote . А тег blockquote будет родительским для вложенных тегов p Вспомним ошибку которую мы разбирали ранее

Теперь думаю понятно что браузер посчитал что первый тег p и blockquote вложены в h1 . А второй тег p в свою очередь вложен в blockquote Не все теги можно вкладывать в другие теги. Например логика подсказывает что нет смысла вкладывать абзацы или цитаты в заголовок. Но например то что тег blockquote нельзя вкладывать в абзац, уже не так очевидно. Какие теги в какие можно вкладывать, тоже регулируется стандартом. И там все подчинено очень простой логике. Например, блок цитаты может состоять из нескольких абзацев. А абзац не может состоять из нескольких блоков цитат. Для вставки цитаты по тексту есть тег q .

Теги должны быть вложены только целиком. Т.е. нельзя вложить один тег в два других:

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

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

Если теги вложены в один и тот же тег и идут друг за другом, то такие теги называются соседями.

При этом соседи которые следую раньше — предшественники. А позже — последователи. Ближайший предшественник — предыдущий тег. Ближайший последователь — следующий.

Все теги вложенные в тег, и вложенные во вложенные теги — потомки.

Теги для расстановки акцентов по тексту:

q — цитата по тексту.
strong — сделать акцент на слове или фразе, обозначить их важность.
em — выделить слово.

В эти теги нельзя вкладывать никакие другие

Стандарт не регламентирует как форматировать код. Переносы строк преобразуются в пробелы, несколько пробелов подряд преобразуются в один. Но опыт разработчиков привел к тому, что форматирование кода стало не регламентированным стандартом индустрии. И все это для увеличения скорости работы верстальщика:

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

Чтобы сообщить браузеру дополнительную информацию о содержимом тегов или задать специальные свойства используются атрибуты. Атрибуты задаются в открывающем теги

Значение атрибута задается в двойных кавычках “ » после символа = .

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

Есть универсальные атрибуты, которые можно указать в любом теге. Например:

id — позволяет задать тегу универсальный идентификатор, чтобы в дальнейшем ссылаться на него
class — позволяет задать один или несколько через пробел определенных пользователем классов для дальнейшего управления внешним видом элемента через стили. Так же, у некоторых тегов есть специальные атрибуты, доступные только им. Например у тега blockquote и q есть атрибут cite , который позволяет указать автора или источник цитаты:

С остальными мы познакомимся при изучении тегов.

Гипертекст — текст, «который разветвляется как бы сам по себе или выполняет действия по запросу».

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

Чтобы сообщить браузеру куда перенаправить пользователя, укажем информацию об этом в специальном атрибуте href (hyper reference – гиперссылка):

Самый простой способ задать ссылку, использовать так называемый якорь внутри страницы. Мы можем задать уникальный идентификатор любому тегу с помощью атрибута id , и потом сослаться на него из этого же документа добавив к идентификатору символ решетки # в начале. Браузер прокрутит страницу так, чтобы содержимого этого тега оказалась видно в окне. Это удобно для больших документов или для создания оглавлений. Для того чтобы ссылаться на другие документы, нам нужно изучить что такое URL.

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

http://netology.ru/programs/html-css-base Адрес без указания протокала и хоста, является абсолютным относительно сервера. При переходе по такой ссылке будет использован протокол и хост открытой страницы: /programs/html-css-base Если эта ссылка на странице http://netology.ru/development/programs то при переходе мы попадем на страницу http://netology.ru/programs/html-css-base А если на странице http://www.ruscircus.ru/study/pc.shtml то при переходе мы попадем на страницу http://www.ruscircus.ru/programs/html-css-base Адрес без протокола, хоста и ведущего слеша / называется относительным. И при его расчете учитывается не только протокол и хост страницы но и ее адрес. Принцип тот же что и при перемещении по файлам и папка на компьютере: programs/html-css-base Если открыть на странице http://netology.ru/ то перейдем на страницу http://netology.ru/programs/html-css-base Если на странице http://netology.ru/development/programs то перейдем на страницу http://netology.ru/development/programs/html-css-base А если на странице http://netology.ru/development/programs/ то перейдем на страницу http://netology.ru/development/programs/programs/html-css-base Особый случай пути . и .. . — текущая папка .. — родительская папка

Добавим ссылку на курс в тексте

В тег a так же как и в теги q , strong и em нельзя вкладывать другие теги. Если вы хотите сделать заголовок ссылкой, вложите в него тег а

Для ссылки можно задать подсказку в атрибуте title , которая покажется при наведении указателя мыши на ссылку:

Для вставки картинки в документ используется тег img . Этот тег не имеет содержимого и закрывающего тега. Это так называемый одиночный тег. URL файла с изображением указывается в специальном атрибуте src :

После загрузки картинки браузер определит её размер в пикселях и отобразит в полный размер в указанном месте.

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

Если картинка не загрузится по каким-либо причинам, можно указать альтернативный текст, который браузер отобразит вместо картинки в этом случае. Там можно написать о том что изображено на картинке. Для этого есть специальный атрибут alt :

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