1.1. Основы HTML
Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ — это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот), так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.). HTML-документ имеет расширение .html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).
Начальный тег показывает, где начинается элемент, конечный — где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем элемента: … . Между начальным и закрывающим тегами находится содержимое элемента — контент.
Элементы, представленные одиночными тегами, не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, элемент создаст кнопку с текстом Кнопка внутри.
Элементы могут вкладываться друг в друга, например,
Текст
. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки»), например, следующая запись будет неверной:
Текст
.
HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута=»значение» . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы — заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.
HTML-документ состоит из двух разделов — заголовка — содержимое элемента и содержательной части — содержимое .
Структура веб-страницы
- Содержание:
- 1. Структура HTML-документа
- 1.1. Элемент
- 1.2. Элемент
- 1.2.1. Элемент
- 1.2.2. Элемент
- 1.2.3. Элемент
- 1.2.4. Элемент
- 1.2.5. Элемент
- 1.3. Элемент
1. Структура HTML-документа
Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие элементы, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
Элементы, находящиеся внутри элемента , образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент является корневым элементом.
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
- Предок — элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем элементов: ,
, , и т.д.
- Потомок — элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент
является потомком одновременно для и .
- Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 является родительским только для и . Элемент
является родительским только для .
- Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,
и являются дочерними по отношению к .
- Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и
являются между собой сестринскими.
1.1. Элемент
Является корневым элементом документа. Все остальные элементы содержатся внутри . . Все, что находится за пределами элемента, не воспринимается браузером как HTML-код и никак им не обрабатывается.
Для элемента доступен атрибут, описанный в таблице ниже, а также глобальные атрибуты.
| Атрибут | Описание, принимаемое значение |
|---|---|
| manifest | С помощью значения атрибута указывается путь к документу кэша манифеста, например: |
1.2. Элемент
Раздел
. содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.1.2.1. Элемент
Обязательным элементом раздела является . Текст, размещенный внутри элемента , отображается в строке заголовка веб-браузера.
Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
1.2.2. Элемент
Необязательным элементом раздела является элемент . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных.
Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
С помощью элемента можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Индексация и переход по ссылкам разрешены:
Индексация разрешена, переход по ссылкам запрещен:
Индексация и переход по ссылкам запрещены:
Для автоматической перезагрузки страницы через заданный промежуток времени (например, через 30 секунд) нужно воспользоваться значением refresh :
Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url :
Для элемента доступны атрибуты, описанные в таблице ниже, а также глобальные атрибуты.
| Атрибут | Описание, принимаемое значение |
|---|---|
| charset | Указывает кодировку символов для текущего HTML-документа: |
| content | Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name , в зависимости от их значения. |
| http-equiv | Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента , который ссылается на таблицу стилей CSS, или идентификатор элемента , содержащего таблицу стилей. refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка «url=адрес_страницы» . Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд: Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url : |
| name | Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop . application-name указывает название веб-приложения, используемого на странице. author указывает имя автора документа в свободном формате. description определяет краткое описание к содержимому страницы, например: generator указывает один из пакетов программного обеспечения, используемого для создания документа, например: |
1.2.3. Элемент
Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Для элемента доступны атрибуты, приведенные в таблице ниже, а также глобальные атрибуты.
| Атрибут | Описание, принимаемое значение |
|---|---|
| media | Определяет, для какого типа устройства предназначены те или иные каскадные таблицы стилей. Внутри таблицы стилей CSS специфичные правила для определенных устройств прописываются с помощью media query. |
| nonce | Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста. |
| type | Определяет MIME-тип подключаемого файла со стилями, в данном случае type=»text/css» . |
Элемент может содержать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
.paper Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id ) присвоить элементу соответствующее название:
CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:
1.2.4. Элемент
Задать стили для документа можно также при помощи другого способа — записать их в отдельный файл с расширением .css , например, style.css .
Подключить файл со стилями к веб-странице можно двумя способами:
- через директиву @import url
- с использованием элемента . Данный способ является предпочтительным.
Элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько.
Для элемента доступны атрибуты, приведенные в таблице ниже, а также глобальные атрибуты.
| Атрибут | Описание, принимаемое значение |
|---|---|
| crossorigin | Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта. anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована. use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true , то загрузка изображения будет заблокирована. |
| href | Основной атрибут элемента, в качестве значения выступает путь к файлу со стилями. |
| hreflang | Определяет язык текста в документе, на который идет ссылка. |
| media | Определяет тип устройства, к которым должен быть применен ресурс ссылки. |
| nonce | Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста. |
| rel | Атрибут определяет отношения между текущим документом и документом, на который идет ссылка. alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom), . archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов. nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер. search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов. |
| sizes | Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel=»icon» , и может принимать следующий значения: ширина х высота — определяет список размеров, разделенных пробелами, каждый размер должен быть в формате — ширина х высота (размеры иконки задаются в пикселях), например: ; any — иконка может масштабироваться до любого размера. |
| title | Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст. |
| type | Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение «text/css» . |
1.2.5. Элемент
Элемент позволяет присоединять к документу различные сценарии. Текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента.
Для элемента доступны атрибуты, приведенные в таблице ниже, а также глобальные атрибуты.
| Атрибут | Описание, принимаемое значение |
|---|---|
| async | Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы). |
| charset | Определяет кодировку символов |
| crossorigin | Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src). anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена , скрипт не будет загружен. use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true , скрипт не будет загружен. |
| defer | Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя. |
| nonce | Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется. |
| src | Указывает на месторасположение файла со сценарием, значение атрибута — это url файла, содержащего JavaScript-программу. |
| type | Используются для объявления языка сценария, использованного при составлении содержимого элемента. |
1.3. Элемент
В разделе располагается все содержимое документа.
Для элемента доступны атрибуты, приведенные в таблице ниже, а также глобальные атрибуты.
| Атрибут | Описание, принимаемое значение |
|---|---|
| onafterprint | Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати. |
| onbeforeprint | Событие, срабатывающее перед отправкой страницы на печать. |
| onbeforeunload | Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу. |
| onhashchange | Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2 . |
| onmessage | Событие происходит, когда сообщение получено через источник события. |
| onoffline | Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало. |
| ononline | Событие вызывается браузером в том случае, когда соединение с интернет возобновилось. |
| onpagehide | Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д. |
| onpageshow | Событие происходит, когда пользователь переходит на веб-страницу, после события onload. |
| onunload | Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера. |
| Элемент | Схема кода | Назначение |
|---|---|---|
| H1 |
.
| Заголовок |
| HR | Горизонтальная линия | |
| P | . | Абзац |
Заголовки являются важной частью документа. Они разделяют информацию на отдельные логические части и поэтому существенно улучшают её восприятие.
Заголовки бывают разные по значению, или как говорят, по уровню. Учебник, например, имеет название — это заголовок первого уровня. Текст в учебнике разбит на главы; названия глав — это заголовки второго уровня. Главы содержат параграфы с заголовками третьего уровня, а параграфы — пункты, обозначенные заголовками четвёртого уровня.
HTML поддерживает заголовки шести уровней при помощи конструкции:
В качестве n следует использовать одну из цифр 16, обозначающую уровень заголовка.
При отображении страницы браузер выделяет заголовки размером шрифта и жирностью:
Это заголовок 1 уровня
Это заголовок 2 уровня
Это заголовок 3 уровня
Это заголовок 4 уровня
Это заголовок 5 уровня
Это заголовок 6 уровня
Элементом H1 задают, как правило, заголовок сайта, элементом H2 — заголовок страницы, элементом H3 — разделы на странице и так далее.
Например, страница “В лес за грибами” сайта “Лесные истории” может иметь следующий вид (справа от заголовков проставлен их уровень):
Уровни заголовков отражают структуру документа (показана на схеме справа). Однако, в HTML-коде иерархия документа закладывается только в номер уровня Hn , и не означает вложенность соответствующих фрагментов кода.
Код вышеприведённой страницы имеет вид:
Замечаем, что вложенность элементов в коде не совпадает с вложенностью фрагментов содержания страницы.
В коде все элементы Hn и P являются прямыми потомками элемента BODY .
Использовать заголовки нужно очень аккуратно в соответствии с их иерархическими уровнями в структуре документа. Не следует использовать теги для выделения обычного текста. Они применяются только для заголовков.
Существуют специальные программы, которые автоматически составляют оглавление гипертекстового документа. Делают они это при помощи сбора информации из тегов . Если заголовочные теги обрамляют обычные тексты или не отражают иерархическую структуру документа, оглавление будет построено неверно.
Заголовок (сайта, страницы, разделов) нужно выбирать таким, чтобы он точно соответствовал содержанию. Красивая абстракция малопригодна для заголовка.
Погрешность Описание Неудачные заголовки Точки в коротких заголовках
Горизонтальная линия
Линия — простейший графический элемент, который умеет строить браузер. Горизонтальная линия задаётся тегом , и этот тег не имеет парного закрывающего.
Горизонтальные линии удобно использовать для дополнительного выделения (или разделения) элементов документа на экране. Посмотрите еще раз, как линия отделяет заголовок в примере от основного текста:
Абзац
Человеку в отличие от компьютера трудно воспринимать однородную информацию, поэтому в книгах буквы не покрывают сплошь всю страницу, хотя это здорово сэкономило бы бумагу. Страница в угоду человеческой природе содержит много пустоты, а текст делится на порции — абзацы.
Абзацы отделяются друг от друга “красными” или пустыми строками. Красная строка — это первая строка абзаца с текстом, сдвинутым вправо.
Конечно, разделять текст на абзацы стараются не как попало, а так, чтобы каждый фрагмент содержал законченную мысль.
Вот сейчас начат новый абзац, потому что закончено вступление, и разговор пойдет о том, как кодируются абзацы на HTML.
Задаётся абзац тегами
и
, между которыми помещается текст. Парный тег является необязательным.По умолчанию браузер использует не красную, а пустую строку (отступ) для отделения одного абзаца от другого.
Браузер отображает элемент P следующим образом:
- Абзац выводится с новой строки и перед ним формируется отступ размером в пустую строку.
- Абзац выравнивается по левому краю для языков с написанием слева направо и по правому для языков с написанием справа налево.
- Между словами помещается ровно по одному пробелу независимо от того, сколько пробелов проставлено в HTML-коде.
- Перенос текста на новую строку выполняется, если очередное слово не помещается в экранной строке, а не тогда, когда в HTML-коде начинается новая строка.
- Завершая абзац, браузер выполняет переход на новую строку и формирует после абзаца отступ размером в пустую строку.
Посмотрите, как браузер перестраивает абзац в разных по ширине окнах (откройте документ и измените несколько раз ширину его окна):
Парный тег
является необязательным — браузер определяет конец текущего абзаца по началу следующего или началу другого элемента уровня блока (о делении элементов на строчные и блочные рассказано в следующем пункте). Однако на практике лучше использовать следующее правило: в цепочке элементов P последний элемент лучше записывать с закрывающим тегом. А можно все элементы P записывать парными тегами, тогда уж браузеру точно не к чему будет придраться!Блочные и строчные элементы
Элементы HTML разделяются на два класса — и .
Блочные элементы браузер выводит на экран в прямоугольные области, следующие друг за другом сверху вниз:
Блочный элемент занимает всю доступную ширину. Высота блочного элемента определяется его содержимым.
Приведённый выше рисунок соответствует, например, такому коду:
Цветной фон у блоков, правда, отсутствует, но его можно задать, используя свойства CSS (материал следующей темы учебника):
Строчные элементы содержатся внутри блочных и занимают место в строке, переходя на следующие строки, если в текущей не хватило места:
Элемент HTML является блочным. Внутри этого элемента расположен элемент — BODY , который тоже является блочным.
Прямые потомки BODY — всегда блоки: абзацы ( P ), горизонтальные линии ( HR ), заголовки ( Hn ) и другие. Даже если поместить в BODY строчные элементы, браузер автоматически “обернёт” их в специально созданные безымянные блоки.
К строчным относятся элементы, позволяющие выделять текст (например, курсивом или жирностью), а также обычный неразмеченный текст — он автоматически собирается браузером в безымянные строчные элементы.
Рассмотрим следующий пример:
Этот код содержит 6 блочных элементов. Элемент HTML является родителем BODY . Четыре блока в BODY браузер выводит в последовательные прямоугольные области, занимающие всю ширину BODY :
Каждый блочный элемент в BODY , кроме HR , содержит внутри себя строчные элементы.
Блочный элемент H1 содержит один строчный безымянный элемент (текст заголовка):
Если ширина окна уменьшается, соответственно уменьшается ширина H1 и строчный элемент занимает несколько строк:
Блочный элемент P в первом абзаце содержит три строчных элемента: безымянный, EM и ещё один безымянный:
Если ширина окна уменьшается, строчные элементы переносятся со строки на строку так, чтобы занять ширину содержащего их блока ( P ):
Внутри блочных элементов могут располагаться не только строчные, но и блочные элементы вперемежку со строчными:
Все строчные и неразмеченные элементы собираются в безымянные блоки (назовём их условно БЛОК ):
Размещение на экране выполняется прежним способом: блоки выводятся в прямоугольные области, следующие друг за другом сверху вниз.
Блочные элементы могут содержать блочные и строчные элементы. Однако блочный элемент P является исключением: внутрь него разрешается помещать только строчные элементы.
Следующий код является ошибочным:
Можно ли размещать внутри строчного элемента блочные? Стандарт языка запрещает это: “строчные элементы могут содержать только данные и другие строчные элементы”.
Стиль записи кода программы
Записывать код программы нужно так, чтобы смысл его был максимально понятен. Подробный разговор на эту тему предстоит в уроке 10, а сейчас несколько самых важных рекомендаций.
Лесенка
Лесенка (ступенчатые отступы) отражает вложенность элементов друг в друга и позволяет легко увидеть в тексте границы больших многострочных конструкций.
Структурная лесенка должна повторять иерархическую структуру блочных элементов: каждый потомок смещается вправо по отношению к телу своего родителя (точки имитируют пробелы-отступы):
Начало и конец каждого блока занимают отдельные строки и записываются с одной и той же позиции. Потомок записывается между этими строками со сдвигом вправо (рекомендуемый сдвиг — 2 позиции).
Исключением могут быть короткие конструкции, начало и конец которых записываются в одной строке (например, < H1 >Заголовок < /H1 >).
Структурную лесенку делайте только на теговом “каркасе” блочных элементов. Строчные элементы лучше начинать с первой позиции — так их легче записывать и редактировать.
Короткие строки
Для просмотра длинных строк приходится применять горизонтальную прокрутку, а это очень неудобно. Длина строки в коде не должна превышать 80 символов.
Теги большие, атрибуты маленькие
HTML позволяет записывать имена тегов, атрибутов и их значений в любом регистре. Для выделения тегового каркаса рекомендуется записывать названия тегов прописными буквами, а названия атрибутов и их значения — строчными.
Структура страницы — Основы HTML, CSS и веб-дизайна
До этого момента мы рассматривали отдельные элементы. Теперь давайте посмотрим на целую HTML-страницу.
Создайте у себя на компьютере файл index.html . Вы можете использовать любой текстовый редактор, например, встроенный в Windows блокнот. Но лучше использовать специальный редактор кода, например, VS Code .
Впишите в файл такое содержимое:
Теперь откройте файл в браузере. Вы увидите пустую страницу. Можете заглянуть в исходный код страницы — там будут те же строки кода.
Все эти элементы — обязательны.
HTML-документ должен начинаться с указания формата. Раньше там указывали версию HTML, но сегодня достаточно простого указания . Мы изучаем современный стандарт HTML и не будем заботиться о поддержке старых форматов и старых браузеров.
Всё содержимое документа обёрнуто в теги . У этого элемента могут быть атрибуты, например, такой: . Так мы можем явно предупредить браузер, что этот документ — на русском языке.
Внутри находятся два элемента: head и body . Голова и тело :). Содержание «головы» не видно на самой странице. А содержание «тела» видно.
Внутри head указываются так называемые метаданные и дополнительные файлы, необходимые для документа. «Мета» означает «над», «уровнем выше». Метаданные — это данные о данных. Например, здесь можно указать заголовок страницы. Он будет выведен в окне или вкладке браузера:
Моё резюме
А также информацию о кодировке страницы:
charset="UTF-8"> Всё, что мы делали в предыдущих уроках, помещается внутрь body . Это и есть то, что видно посетителю страницы.
Моё резюме Алексей Примадонин Веб-разработчик href="mailto:alprim@grail.com">alprim@grail.com , href="https://github.com/alprim">github.com/alprim
Супер! Мы сделали полноценную страницу. Но, честно говоря, она выглядит. не очень. Пока текста мало — все более-менее нормально, но с увеличением текста и других элементов страница будет выглядеть все более неопрятной.
Пора научиться задавать стили содержимому.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар « Как самостоятельно учиться »
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Какая метка открывает html документ
28 августа 2023
Скопировано
Тег (tag) — это метка у контента в интернете. Метки объясняют, что это за контент и о чем он. Теги бывают разных видов, например хештеги в соцсетях или HTML-теги для описания интернет-страницы.
Разные виды тегов могут быть совершенно не похожи друг на друга. Они различаются назначением и смыслом, форматами написания. Но идея одна: это способ отметить какой-то контент, выделить его тематику или назначение.
Английское слово tag так и переводится — метка. Еще так называют игру в салки. Тот, кого осалили, как бы оказывается помеченным: примерно как контент с тегами.
Освойте профессию «Frontend-разработчик»
Frontend-разработчик
Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.
Профессия / 9 месяцев
Frontend-разработчик
Создавайте интерфейсы сервисов, которыми пользуются все
Какими бывают теги
В интернете термин используют по отношению к нескольким разным, хоть и похожим сущностям. Вот в каких значениях можно встретить это слово.
Теги HTML
HTML — язык для разметки интернет-страницы. Он описывает, какое содержимое будет на странице: заголовки, абзацы, таблицы, картинки и многое другое. Фронтендеры и верстальщики с помощью HTML создают логичные и понятные страницы.
Когда пользователь загружает страницу, его браузер должен как-то отобразить содержимое. HTML-разметка объясняет браузеру, как интерпретировать тот или иной контент — и, соответственно, как его изобразить.
Например, заголовок по умолчанию должен быть большим, сноска в тексте — маленькой, а ссылка — выделенной другим цветом и подчеркнутой.
Теги языка HTML — это одна из главных его составляющих. Разметка состоит из набора тегов, внутри которых заключается контент. Вот так:
<название_тега>контент Первое упоминание тега открывает блок контента, второе — закрывает: об этом говорит слэш / перед названием тега. Между двумя конструкциями может быть разный контент и даже другие теги.
HTML-тегов очень много. Есть свои теги для логических частей контента, таких как абзац или статья. Есть и теги, которые выделяют контент визуально: например, делают текст жирным или подчеркнутым.
Обычный пользователь редко работает с HTML, хотя встречается с результатами его работы каждый день. HTML-теги есть практически на всех интернет-страницах.
В этом можно легко убедиться. Если нажать на F11, когда у вас открыта какая-то страница в браузере — откроется разметка этой страницы с тегами, стилями и скриптами.
Мета-теги
Мета-теги — это еще один способ описывать сведения на странице. У страниц в интернете есть метаданные, то есть информация об информации. Метаданные коротко рассказывают, что есть на странице и какой теме она посвящена.
Такую информацию записывают в специальных блоках в разметке — мета-тегах. Технически они тоже относятся к HTML-тегам, но не отображаются на странице. Зато мета-теги дают ценные сведения о странице браузерам и поисковым системам.
Чаще всего говорят о трех самых известных мета-тегах.
Title — название страницы, ее заголовок. Тайтл видно в браузере: именно он отображается как название вкладки. А если загуглить страницу, то ее названием в поисковике будет именно тег Title.
Description — описание. Дескрипшн более подробно описывает страницу, чем тайтл. Этот тег длиннее и может состоять из нескольких предложений. Иногда он отображается в поисковиках как описание найденной страницы.
Keywords — ключевые слова. Это набор слов, который описывает тематику страницы. Сейчас этот тег используют редко, но когда-то поисковики ориентировались на него, чтобы понять, о чем страница.
Существуют и другие теги, но эти три упоминаются чаще других. Ведь с ними работают не только айтишники: еще маркетологи, копирайтеры, SEO-специалисты и другие сотрудники диджитал-сферы. Мета-теги нужны для поисковой оптимизации страницы, на них ориентируются поисковики, когда подбирают ответ на запрос пользователя.
Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все
Хештеги
Хештег или хэштег — это тег, который можно поставить прямо в тексте поста в соцсети. Он начинается со знака решетки # и коротко описывает тематику публикации. Если нажать на такой тег, соцсеть покажет все записи с таким же хештегом.
Хештег пишется в одно слово и может состоять из букв и цифр на любом языке. К нему можно добавить знак подчеркивания _, но пробел, запятую или другой символ — нельзя.
Примеры хештегов — #картинки, #котики, #умныемысли, #30secondstomars и так далее.
Хештегами может пользоваться кто угодно, они простые и интуитивно понятные. В соцсетях хештеги нужны для навигации по записям и продвижения — зачастую пользователи находят посты на нужную тему именно с помощью тегов.
Теги записей
На сайтах и форумах бывают свои теги — тематические ключевые слова, с помощью которых пользователи ориентируются в контенте. На некоторых сайтах теги придумывают сами пользователи, на некоторых есть изначальный жестко заданный список тегов.
Смысл таких тегов примерно такой же, как у хештегов — поиск и навигация. Только устроены они иначе. Тег можно «прикрепить» к посту или теме, он не будет считаться частью основного контента и будет располагаться ниже или выше поста.
Требования к оформлению тегов, длина и набор допустимых символов зависят от площадки. Механизм тегов реализуют изнутри сайта: через административную панель или как-то еще.
Облака тегов
Еще один термин, связанный с тегами. Облако тегов — это блок, который раньше часто встречался на сайтах. Сейчас его добавляют реже, но термин остался, да и само явление еще не ушло в прошлое.
Этот блок — список тегов, которые используются на сайте. Список выглядит как облако из текста. Отсюда и название. Если навести курсор мыши на такое облако, теги начнут двигаться. А если нажать на какой-то тег, загрузится страница со списком записей по этому тегу.
По сути облако тегов — это способ показать пользователю теги записей, которые существуют на сайте.
Еще бывают облака-картинки: изображение, где красиво собраны часто используемые слова в какой-то теме или на сайте.
Теги в музыке
Концепцию тегов используют не только на сайтах, но и при оформлении файлов. Самый частый пример — музыка: у файла с треком есть теги, которые описывают исполнителя, название песни и альбом. Эти теги нужны, чтобы программа для прослушивания музыки корректно отображала информацию о песне.
Если тегов нет, то программа-плеер может распознать песню как неизвестный трек неизвестного исполнителя. Даже если название песни указано в имени файла. А если тег записан неправильно, например в незнакомой плееру кодировке, то вместо названия песни пользователь увидит в плеере нечитаемые символы.
Для чего нужны теги
Общий смысл у тегов один: размечать контент. Но используют их для разных целей в зависимости от того, что это за вид тега.
Пользовательские теги, такие как хештеги или теги записей, помогают людям ориентироваться в контенте. Человек смотрит на тег и сразу понимает, о чем пост. Или ищет по хештегу посты с определенной тематикой. Или, наоборот, ищет читателей, которые прочитают его публикацию, если начнут искать по хештегу.
Технические теги, то есть HTML-разметка и мета-теги, нужны для того чтобы сайты работали как надо. Разметка помогает делить содержимое страницы на крупные и мелкие блоки, и в зависимости от тега браузер отображает разную информацию по-разному. А мета-теги объясняют браузерам и поисковикам, что находится на сайте.
Кто работает с тегами
- С HTML-тегами работают верстальщики, фронтенд-разработчики и иногда контент-менеджеры. Это люди, которые отвечают за «внешнюю» часть сайта — именно в ней находится HTML-разметка.
- С мета-тегами работают маркетологи, SEO-специалисты, копирайтеры и контент-менеджеры. То есть люди, которые занимаются продвижением страницы и следят, чтобы ее нормально воспринимали поисковики.
- С другими тегами работают разные люди, в том числе обычные пользователи. Кто угодно может поставить хештег к посту в соцсети или добавить тег к своей публикации в сервисе онлайн-дневников.
Какие есть теги в HTML
Простые теги HTML можно иногда встретить на форумах, где с их помощью оформляют сообщения. Но фактически они могут использоваться в верстке любого сайта. Приведем несколько примеров HTML-тегов:
- — жирный текст;
- — курсив;
- — подчеркнутый текст;
- — заголовок первого уровня. Может быть только один на странице. Так размечают название страницы;
- — заголовок второго уровня. С его помощью размечают названия разных блоков контента, например, подзаголовки статьи;
- — контейнер, блок с контентом, не имеющий логического смысла. Обычно используют для выравнивания контента и его красивого размещения на странице;
- — блок с контентом, который в отличие от div имеет логический смысл. Так размечают секции: большие «разделы» страницы. Например, в интернет-магазине — секция со списком товаров, секция с фильтрами и так далее.
А еще есть теги, которые можно встретить на любой интернет-странице. Без них верстка HTML становится невозможной. В первую очередь это тег , который указывает браузеру, что перед ним — HTML-документ. Все остальные теги находятся внутри него.
Внутри тега html есть еще два, которые тоже есть практически на любой странице:
- — в этот тег заворачивают контент, который не отображается на странице. Например, мета-теги. Или JavaScript-скрипты. Здесь же оставляют ссылки на технические файлы и указывают, на каком языке написана страница. Вся эта информация нужна в первую очередь не человеку, а браузеру, чтобы корректно отобразить страницу;
- — внутри этого тега находится весь основной контент, который видит пользователь. Заголовки, текст, картинки и ссылки — это содержимое body.
Перечисленные теги далеко не единственные. Их сотни, и даже профессиональные верстальщики могут помнить не все. Специалисты, которые работают с HTML, регулярно пользуются официальной документацией. Например, исчерпывающая информация про теги HTML есть на сайте MDN Web Docs.
А еще HTML постоянно развивается, появляются новые теги, а старые порой устаревают. Поэтому специалисту нужно обновлять и актуализировать знания.
Что такое семантические теги
В разговоре об HTML-тегах можно услышать про семантическую верстку и теги. Семантическая верстка — это подход, когда элементы размечают согласно их смыслу, а не внешнему виду. А семантический тег — такой, который указывает браузеру, что именно за контент в нем содержится.
Например, тег div не семантический. Это просто контейнер, который никак не говорит браузеру, что внутри. Поэтому его не советуют использовать, чтобы создавать кнопки, ссылки и секции.
А вот тег section семантический. Для больших разделов страницы рекомендуют использовать именно его.
Примеры других семантических тегов:
- — ссылка;
- — кнопка;
- — статья.
Пользоваться семантической версткой — хороший тон по нескольким причинам.
Это удобно разработчикам. Если все блоки вместо семантических тегов размечены с помощью div’ов, то другой разработчик может просто не разобраться в такой верстке. А над современными проектами работает обычно несколько людей.
Это помогает браузеру правильнее отображать контент. У семантических элементов есть заданные свойства по умолчанию, которые адаптированы под тип контента. Например, кнопку можно нажать не только мышкой, но и с помощью клавиатуры. А «кнопку», сделанную с помощью div, так нажать не выйдет. Более того: если отключить на странице JavaScript, такая «кнопка» может вообще не заработать.
Это делает сайты доступнее для пользователей. Есть люди, которые не пользуются мышью и перемещаются по страницам с помощью клавиатуры. Если верстка не семантическая, то таким людям сложнее пользоваться сайтом, а порой и вовсе невозможно.
Как пользоваться HTML-тегами
Обучаться верстке можно без каких-то специализированных инструментов. Отображать разметку может любой браузер, так что достаточно создать файл с расширением .html и тренироваться в нем.
- Сначала нужно разобраться в структуре HTML-страницы: какие теги обязательны и что где располагается.
- Стоит сразу запомнить основные теги, которые сейчас используют при верстке: заголовки, секции, теги для шапки и подвала сайта, списки и так далее.
- Тем не менее изучать все сразу не стоит. Тегов множество, и запомнить все в самом начале невозможно. Лучше понять основную логику: где какая семантика уместна. Тогда будет проще выбирать теги для разных элементов — а с их написанием и особенностями поможет разобраться документация.
- Нужно много практиковаться. HTML сложно изучать только в теории. Практика помогает разобраться, как использовать тот или иной тег, когда его уместно применять и что делать с часто встречающимися сложностями.