Чем отличается тег от атрибута html

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

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

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

Открывающий тег указывает на то, где начинается элемент, закрывающий — где заканчивается. Закрывающий тег образуется путем добавления слэша ( / ) перед именем тега. Между открывающим и закрывающим тегами находится содержимое тега — контент.

Комментарии​

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

Атрибуты​

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

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

Рассмотрим некоторые атрибуты тега <a> .

• href — адрес страницы, на которую перейдёт пользователь при нажатии на текст ссылки.
• target — указывает то, в какой вкладке откроется страница при клике по ссылке.
• title — добавляет всплывающую подсказку к тексту ссылки.

Рассмотрим некоторые атрибуты тега <img> .

• src — адрес изображения.
• alt — альтернативный текст, который будет показан если картинка не загрузилась.

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

Парные теги​

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

Одиночные теги​

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

В предыдущих стандартах HTML одиночные теги обязательно записывались с обратным символом / перед закрывающей скобкой. Например <img /> или <input /> . В современном стандарте это необязательно и ни на что не влияет.

Вложенность тегов​

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

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

А в этой версии есть проблемы (строки подсвечены).

Спецификация HTML​

Спецификация HTML Living Standard — главный документ, описывающий стандарты, возможности и будущее развитие языка HTML.

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

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

Вложенность тегов​

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

• Идем в спецификацию и находим нужный элемент.
• Проверяем контентную модель элемента (Content model), в который вкладываем.
• Проверяем категории элемента (Categories), который вкладываем.
• Если категория подходит и ограничения не запрещают, то вкладывать можно, иначе нельзя.

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

Справочники​

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

Чем отличается тег от атрибута html

HTML Tags: Tags are the starting and ending parts of an HTML element. They begin with < symbol and end with > symbol. Whatever written inside < and > are called tags.
Example:

HTML elements: Elements enclose the contents in between the tags. They consist of some kind of structure or expression. It generally consists of a start tag, content and an end tag.
Example:

Where, <b> is the starting tag and </b> is the ending tag.
HTML Attributes: It is used to define the character of an HTML element. It always placed in the opening tag of an element. It generally provides additional styling (attribute) to the element.
Example:

HTML Tags	HTML Elements	HTML Attributes
HTML tags are used to hold the HTML element.	HTML element holds the content.	HTML attributes are used to describe the characteristic of an HTML element in detail.
HTML tag starts with < and ends with >	Whatever written within a HTML tag are HTML elements.	HTML attributes are found only in the starting tag.
HTML tags are almost like keywords where every single tag has unique meaning.	HTML elements specifies the general content.	HTML attributes specify various additional properties to the existing HTML element.

What are Tags and Attributes?

Tags and attributes are the basis of HTML.

They work together but perform different functions – it is worth investing 2 minutes in differentiating the two.

What Are HTML Tags?

Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1>.

Most tags must be opened <h1> and closed </h1> in order to function.

What are HTML Attributes?

Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.

• An example of an attribute is:

In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.

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

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

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

В примере из предыдущего урока есть элемент 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> .

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

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

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

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

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

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

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

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

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

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

Теги для разметки текста и атрибуты

Вячеслав Крысин Нетология

Вячеслав Крысин

Front-end developer в Нетология-групп

План занятия

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

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

Где можно встретить браузер

• Приложение на вашем ноутбуке (Chrome, Firefox, Safari, Opera).
• Приложение на вашем смартфоне (ChromeApp, SafariApp).
• Браузер может быть встроен в другое приложение (например, в почтовый клиент).
• Браузер также может быть встроен в часы, телевизор, платежный терминал, банкомат, автомобиль, холодильник.

Поэтому веб-технологии так популярны. Они везде.

Что такое URL

Вы сообщаете браузеру, что отобразить, указав адрес документа в формате URL.

URL (Uniform Resource Locator) — единый указатель ресурса, в общем виде выглядит так: :// /

• Протокол — «язык», на котором общаются браузер и сервер.
• Хост — адрес или имя сервера, у которого мы запрашиваем документ.
• Путь — адрес расположения документа на сервере.

Пример ссылки: http://netology.ru/programs/html-css-base

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

1. Формирует и отправляет запрос на сервер — HTTP.
2. Получает ответ сервера — HTTP.
3. Разбирает полученный документ — HTML.
4. Рисует и отображает полученный документ в окне — HTML и CSS.
5. Реагирует на действия пользователя — CSS и .

На каком этапе участвует верстальщик

1. Как сервер отвечает на запросы, определяет backend-программист.
2. На этапе разбора и отрисовки документа верстальщик сообщает браузеру, что, где и как отобразить на странице.
3. На этапе обработки действий пользователя участвует frontend-программист.

Какую информацию содержит документ

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

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

Cемантика или структура документа

Веб-страница — это информация

Веб-страницы, в первую очередь, должны представлять информацию в удобном виде.

Давайте подумаем, из чего она состоит?

Что мы видим в книгах, журналах, газетах

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

Все это — хорошо известные вам элементы. И они существовали задолго до появления интернета.

И это не про оформление

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

Задача браузера

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

Разметка

Изобретаем браузер

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

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

Без сложного программного обеспечения

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

Стоит отметить что текстовый редактор — блокнот. Текстовый процессор — MS Word.

Обычный текст

Обозначать элементы

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

Текст с метками

Простота создания

Ограничим количество возможных меток, оставив только самое необходимое.

Оставим только метки для:

• заголовка;
• абзаца;
• цитаты;
• важного текста;
• выделенного текста;
• иллюстрации.

Легкость изучения

А это мы проверим по итогам курса.

Требования к меткам

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

Мы изобретаем не браузер, а язык разметки.

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

HyperText Markup Language — «язык гипертекстовой разметки».

Cтандартизированный язык разметки документов во Всемирной паутине.

Цели создания HTML

• Cоздавался как язык для обмена научной и технической документацией.
• Пригодный для использования людьми, не являющимися специалистами в области вёрстки.
• HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения.

Особенности HTML

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

Разметка нашего рецепта рагу

Так рецепт выглядит в браузере

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

Стандартизация

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

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

HTML-теги

• Теги в HTML заключены в угловые скобки < и > .
• Нам привычнее их называть символами «меньше» и «больше».
• Между угловыми скобками записывается название тега.

Открывающий и закрывающий тег

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

Абзац

Тег <p> — позволяет выделить абзац текста (paragraph по-английски).

Наш рецепт с разметкой абзацев в браузере

Морской черт — чертовски коварная рыбина, за что европейский удильщик и получил свое второе название. Ее также называют «лобстером для бедных» – за плотное мясо, по структуре действительно напоминающее лобстера. Зато в нем нет костей, кроме огромного хребта, поэтому при разделке нужно только снять кожу и разрезать рыбу вдоль на два филе.

Подавать это рагу, как и все остальные, нужно в глубоких тарелках, в каких обычно подают пасту.

Заголовок

Тег <h1> обозначает заголовок первого уровня (heading level 1 по-английски).

Для разметки заголовков предусмотрено 6 тегов <h1> — <h6> , что позволяет нам размечать заголовки разных уровней.

Заголовок рецепта

Наш рецепт с размеченным заголовком в браузере

Рагу из морского черта

Морской черт – чертовски коварная рыбина, за что европейский удильщик и получил свое второе название. Ее также называют «лобстером для бедных» – за плотное мясо, по структуре действительно напоминающее лобстера. Зато в нем нет костей, кроме огромного хребта, поэтому при разделке нужно только снять кожу и разрезать рыбу вдоль на два филе.

Подавать это рагу, как и все остальные, нужно в глубоких тарелках, в каких обычно подают пасту.

Цитата

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

Цитата в тексте

Наш рецепт с цитатой из Википедии в браузере

Рагу из морского черта

Морской черт – чертовски коварная рыбина, за что европейский удильщик и получил свое второе название. Ее также называют «лобстером для бедных» – за плотное мясо, по структуре действительно напоминающее лобстера. Зато в нем нет костей, кроме огромного хребта, поэтому при разделке нужно только снять кожу и разрезать рыбу вдоль на два филе.

Подавать это рагу, как и все остальные, нужно в глубоких тарелках, в каких обычно подают пасту.

Вложенность тегов

Цитата из нескольких абзацев

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

Цитата в браузере

Европейский удильщик, или европейский морской чёрт – хищная рыба отряда удильщикообразных.

Рыба съедобна. Мясо белое, плотное, без костей. Особенно популярен «морской чёрт» во Франции.

Подавать это рагу, как и все остальные, нужно в глубоких тарелках, в каких обычно подают пасту.

Особенности вложенности тегов

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

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

Важный текст

Тег <strong> — сделать акцент на слове или фразе, обозначить их важность.

Выделенный текст

Тег <em> — позволяет выделить слово.

Акценты в браузере

Европейский удильщик , или европейский морской чёрт – хищная рыба отряда удильщикообразных.

Атрибуты тегов

Дополнительная информация

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

• Атрибуты задаются в открывающем теге.
• Значение атрибута задается в двойных кавычках » .
• Значение записывается после символа =
• Атрибутов может быть несколько, тогда они перечисляются через пробел.

Источник цитаты

Универсальные атрибуты

Можно указать в любом теге:

• id — позволяет задать тегу универсальный идентификатор, чтобы в дальнейшем ссылаться на него.
• class — позволяет задать через пробел один или несколько определенных пользователем классов для дальнейшего управления внешним видом элемента через стили.

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

Гиперссылка

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

Тег a

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

Для того, чтобы слово или фразу сделать гиперссылкой, её нужно разметить тегом a :

Атрибут href

Чтобы сообщить браузеру, куда перенаправить пользователя при клике по ссылке, укажем адрес в формате URL в специальном атрибуте href ().

Ссылки с адресами

Полный адрес документа

В URL элементов немного больше:
:// / #

• Протокол — «язык», на котором общаются браузер и сервер.
• Хост — адрес или имя сервера, у которого мы запрашиваем документ.
• Путь — адрес расположения документа на сервере.
• Якорь — идентификатор тега внутри документа, к которому нужно перейти.

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

Относительные адреса

При определенных условиях для указания ресурсов в документе допускается опускать отдельные фрагменты адреса:

• Протокол: для указания, что ресурс должен быть получен по тому же протоколу, что и этот документ //en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax
• Хост: указывая, что документ расположен на том же сервере /wiki/Uniform_Resource_Locator#Syntax
• Использовать относительный адрес: указывая, где документ расположен на сервере относительно текущего документа Uniform_Resource_Locator#Syntax
• Путь: указывая, что перейти нужно к фрагменту этого же документа. #Syntax

Использование ссылок

Ограничения на вложенность в теге a

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

Всплывающие подсказки

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

Картинки

Тег img

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

Размер изображения

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

Картинка в тексте

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

Картинки в тексте в браузере

Кот по кличке Самсон официально признан самым большим котом в Нью-Йорке – возможно, не за горами и мировое признание.

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