Что такое html разметка на сайте
HTML разметка текста
Основные термины и понятия в HTML разметке:
В этой статье мы поговорим с вами о том, как создать каркас страницы, а также о том, в каких блоках располагать те или иные элементы.
Блочная верстка стала довольно популярной и используется практически везде. Раньше, в HTML 4, блочные конструкции создавались с помощью блоков div. Если открыть любой сайт 2012-2014 года, а затем открыть его исходный код, то вы увидите длинный и сложный код нагроможденный блоками div >.
Такая конструкция не была плохой для пользователя, так как на отображение это никак не влияло. Проблемы были у разработчиков и у технической поддержки сайта.
Основная проблема — большое количество блоков div >, их могло быть и до 50,100 и даже 200. Такое нагромождение могло вызвать путаницу в коде — многие разработчики очень часто путались в своем коде. Это делало разработку медленной.
HTML 5 изменил эту проблему, добавив несколько семантических блоков. Каждый блок был настроен под определенную информацию, как «nav» для навигационной панели, или «footer» для подвала.
Кроме этого, новая версия HTML уделила большое внимание семантическому ядру сайта. Поисковики имели лучшее понимание информации, которая расположена в определенном блоке.
Семантические элементы. HTML 5
Перед тем как говорить о разметке веб-страницы, давайте рассмотрим основные теги-контейнеры:
Основы HTML
Что такое HTML на самом деле?
HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:
Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:
Анатомия HTML элемента
Давайте рассмотрим элемент абзаца более подробно.
Главными частями нашего элемента являются:
Элементы также могут иметь атрибуты, которые выглядят так:
Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
Атрибут всегда должен иметь:
Вложенные элементы
Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент
. Приведённое ниже неверно:
Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!
Пустые элементы
Анатомия HTML документа
Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):
Начало работы с HTML
В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы, возможно, слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!
| Необходимые знания: | Умение работать с компьютером, наличие необходимого ПО, базовые знания о работе с файлами. |
|---|---|
| Цель: | Познакомиться с языком HTML и научиться описывать некоторые его элементы. |
Что такое HTML?
Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как «параграф», заключив её в теги элемента «параграф» (
Структура HTML-элементов
Давайте рассмотрим элемент «параграф» чуть подробнее:
Основными частями элемента являются:
Активное изучение: создание вашего первого HTML-элемента
Отредактируйте строку текста ниже в поле Ввод, обернув её тегами и (вставьте перед строкой, чтобы указать начало элемента, и после неё, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.
Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.
Вложенные элементы
Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!
Блочные и строчные элементы
Существует две важных категории элементов в HTML, которые вам стоит знать — элементы блочного уровня и строчные элементы.
Посмотрите на следующий пример:
— это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется CSS-оформлением по умолчанию, которое браузеры применяют к абзацам).
Примечание: HTML5 переопределил категории элементов в HTML: смотрите Категории типов содержимого элементов. Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.
Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.
Примечание: вам могут пригодиться справочники, включающие списки блочных и строчных элементов — смотри Элементы блочного уровня и Строчные элементы.
Пустые элементы
Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег. Некоторые элементы состоят из одного тега и обычно используются для вставки чего-либо в то место документа, где размещены. Например, элемент вставляет картинку на страницу в том самом месте, где он расположен:
Это выведет на вашу страницу следующее:
Примечание: Пустые элементы иногда называют void-элементами.
Атрибуты
У элементов также могут быть атрибуты, которые выглядят так:
My cat is very grumpy</p>» src=»https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-attribute-small.png» style=»display: block; margin: 0px auto;» width=»1287″ height=»156″ loading=»lazy»>
Атрибуты содержат дополнительную информацию об элементе, которая, по вашему мнению, не должна отображаться в содержимом элемента. В данном случае атрибут class позволяет вам дать элементу идентификационное имя, которое в дальнейшем может быть использовано для обращения к элементу с информацией о стиле и прочими вещами.
Атрибут должен иметь:
Активное изучение: Добавление атрибутов в элемент
Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.
Булевые атрибуты
Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):
На выходе оба варианта будут выглядеть следующим образом:
Опускание кавычек вокруг значений атрибутов
Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом href так:
Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:
Наш совет: всегда используйте кавычки в атрибутах — это позволит избежать подобных проблем, и, следовательно, код будет более читабельным.
Одинарные или двойные кавычки?
В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса, и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:
Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!
Если вы используете один тип кавычек в своём HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:
Если вы хотите вставить кавычки того же типа, то вы должны использовать объекты HTML. Например, это работать не будет:
Поэтому вам нужно сделать так:
Структура HTML документа
Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:
Структура документа и веб-сайта
В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), HTML также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка основного содержимого»). В этой статье рассматривается, как планировать базовую структуру сайта и писать HTML для представления этой структуры.
| Необходимые знания: | Базовое знакомство с HTML, описано в разделе Начало работы с HTML. Форматирование текста в HTML, описано в разделе Основы текста в HTML. Как работают гиперссылки, описано в разделе Создание гиперссылок. |
|---|---|
| Задача: | Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта. |
Основные составляющие документа
Веб-страницы могут и будут отличаться друг от друга, но все они, преимущественно, состоят из аналогичных стандартных компонентов, если только страница не отображает полноэкранное видео или игру, не является частью какого-либо художественного проекта или просто плохо структурирована:
Заголовок (колонтитул) Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице. Навигационное меню Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остаётся неизменной на всех страницах сайта — наличие непоследовательной навигации на вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана. Основное содержимое Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определённо будет меняться от страницы к странице! Боковая панель Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьёй, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему. Нижний колонтитул (футер) Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для SEO целей, предоставляя ссылки для быстрого доступа к популярному контенту.
«Типичный веб-сайт» может быть структурирован примерно так:
HTML для структурирования содержимого
Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею вы поняли. С правильным CSS вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и использовать правильный элемент для правильной работы.
Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчёт людей со слабым зрением, к примеру, для которых концепция «розового» и «большого шрифта» не будет полезной?
Примечание: Люди с дальтонизмом составляют около 8% мирового населения. Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было 285 миллионов таких людей, а общая численность населения составляла около 7 миллиардов).
В своём HTML-коде вы можете размечать разделы содержимого сайта на основе их функциональности — использовать элементы, которые представляют разделы контента, описанные выше, а вспомогательные технологии, такие как программы чтения с экрана, смогут распознавать эти элементы и помогать в таких задачах, как «найти основную навигацию» или «найти основное содержимое». Как мы упоминали ранее в ходе курса, существует ряд последствий неиспользования правильной структуры элементов и семантики для правильной работы.
Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:
Теги разметки страницы
Данная статья учебника посвящена такой теме как разметка страницы, рекомендую Вам максимально внимательно, а лучше несколько раз перечитать ее. Это связано с тем, что если вы поймете эту тему, то вы сможете без проблем создать каркас будущего сайта, что по большому счету и является главной целью этого учебника и языка гипертекстовой разметки.
Обращаю Ваше внимание на то, что элементы
Этот элемент является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину. Не так давно, этот элемент занимал абсолютный топ, посвященный делению страницы на логические составляющие, но с приходом HTML 5 было добавлено достаточно семантических элементов, которые позволяют в некоторых ситуациях заменить тег
В отличии от блочного элемента
Тег вы можете использовать для таких задач как:
Результат нашего примера:
Рис. 42 Использование тегов разметки в HTML.
Теги разметки страницы в HTML 5
.»> Рис. 43 Человек, который использует только тег
HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега
Тег 
Тег 
(верхний колонтитул) является признаком верхнего колонтитула или баннера верхней части страницы, которая обычно содержит логотип (иконка), навигацию, относящуюся ко всему сайту, форму поиска по сайту, заголовок страницы с подзаголовком, авторскую информацию и так далее. Допускается размещать несколько элементов в одном документе.
на странице.»> Рис. 43а Пример размещения тега на странице.
Обращаю Ваше внимание, что запрещается помещать элемент внутрь таких элементов, как (нижний колонтитул), (определяет контактную информацию) или внутрь другого элемента .
Тег
Тег (навигация) используется для обозначения содержимого в виде основных навигационных ссылок. Документ может иметь несколько элементов , например, один для навигации по сайту, а второй для навигации по странице.
на странице.»> Рис. 43б Пример размещения тега на странице.
Обратите внимание, что не все ссылки в документе следует помещать внутрь тега , элемент предназначен только для крупных навигационных блоков. Не используйте элемент внутри тега (нижний колонтитул). Программы чтения с экрана для пользователей с ограниченными возможностями, могут использовать этот элемент, чтобы определить, нужно ли опустить начальную визуализацию этого содержимого.
Тег
Тег (отступление) предназначен для обозначения содержимого, относящегося к окружающему этот тег содержимому. Элемент представляет собой раздел страницы с контентом, который может рассматриваться отдельно от основного содержания. В этих разделах часто размещаются боковые колонки, рекламный контент, биографические данные, веб-приложения, информация о профиле пользователя, пометки на полях в печатном журнале и так далее.
Рис. 43в Пример размещения тега на странице.
Тег
Тег (статья) применяется для обозначения раздела страницы, содержащего завершенную, независимую композицию. Данный элемент может содержать в себе такую информацию как запись блога, товар в интернет-магазине, пост на форуме, газетная статья, любой другой независимый элемент содержимого или просто основной текст страницы.
Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от
Рис. 43г Пример размещения тега на странице.
Тег
Тег (раздел) служит для группировки взаимосвязанного содержимого.
Не используйте элемент в качестве универсального контейнера, для этих целей подходит элемент
Данный тег часто используется при верстке целевых страниц (англ. landing page, «посадочная страница») для логического разделения страницы на разделы.
Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от
на странице.»> Рис. 43д Пример размещения тега на странице.
Совместное использование тегов и
Обратите внимание, что допускается в качестве дочернего (вложенного) элемента тега использовать тег (раздел), как бы разбивая по смыслу содержимое. При этом необходимо, чтобы элемент и вложенные элементы имели в качестве дочернего (вложенного) элемента заголовок от
По аналогии с вышерассмотренным примером допускается помещать элементы внутрь элементов , формируя при этом разделы с тематической информацией. При этом на элементы действуют те же правила по размещению заголовков:
Допускается помещать элементы (раздел) в другие элементы , но при этом рекомендуется учитывать следующую структуру документа:
Тег
Тег (нижний колонтитул) содержит информацию, которая обычно помещается в нижнем колонтитуле страницы, например сведения об авторских правах, другую правовую информацию, некоторые ссылки для навигации по сайту и тому подобное.
Обращаю Ваше внимание, что на количество тегов на одной странице ограничений не накладывается, вы можете, допустим, поместить нижний колонтитул внутри тега , чтобы хранить в нем информацию, относящуюся к статье, например сноски, ссылки или выписки.
на странице.»> Рис. 43з Пример размещения тега на странице.
Тег
Тег предназначен для основного содержимого документа (основной контент). Контент внутри элемента должен быть уникальным для всего документа и не должен содержать элементы, которые повторяются в различных документах (боковые панели, навигационные ссылки, информация об авторских правах, логотип сайта, формы поиска и тому подобное). Допускается использование элемента только один раз в одном документе.
на странице.»> Рис. 43и Пример размещения тега на странице.
Обращаю Ваше внимание, что тег не должен быть потомком таких блоков как (не должен быть вложен в них):
Разметка для сайта на HTML 5
Давайте закрепим полученные знания на примере, и сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки HTML 5.
Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.
И так по порядку, что мы сделали в этом документе:
Результат нашего примера:
Рис. 44 Разметка страницы на HTML 5.
Разметка иллюстраций в HTML 5
Тег применяется для обозначения контента, иллюстрирующего или поддерживающего определенную идею текста. Тег может содержать изображение, видеоролик, схему, фрагмент кода, диаграмму или даже таблицу — почти все, что может встретиться в потоке веб-контента и должно восприниматься как автономная единица.
Благодаря тегу вы можете вывести пояснение к содержимому, которое находится внутри тега . Тег должен размещаться как первый, или последний элемент внутри тега .
Давайте рассмотрим пример использования:
Результат нашего примера:
Рис. 45 Разметка изображений в HTML 5.
Обратите внимание, что если вы разместите элемент первым вложенным элементом тега , то пояснение будет отображаться сверху изображения:
Результат нашего примера:
.»> Рис. 46 Пример использования тега
Скрытие содержимого в HTML 5
В заключение статьи, для расширения вашего кругозора хочу познакомить Вас с двумя последними элементами, добавленными в HTML 5. В настоящее время эти элементы поддерживаются всеми браузерами за исключением Internet Explorer и Edge.
Тег определяет дополнительные детали, которые пользователь может отобразить или скрыть. Данный тег может быть использован для создания интерактивных виджетов в будущем, которые пользователь может открывать и закрывать, т.к. внутри тега можно разместить любой контент. Содержание в отображается для пользователя только если логический атрибут open установлен.
Тег определяет видимый заголовок для тега . Если элемент не используется, то устанавливается значение браузера по умолчанию (как правило, заголовок «Подробнее»).
В этом примере мы использовали два элемента , один из которых мы поместили внутрь первого, каждый их них скрывает изображение (тег ). Кроме того, они имеют различные заголовки, которые заданы с использованием тега .
Результат нашего примера:
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Практическое задание № 25.
Перед тем как приступать, внимательно изучите страницу, которую Вам необходимо будет повторить, открыв пример в отдельном окне.
Подсказка: в примере используются цвета coral и aliceblue.
После того, как вы выполните упражнение, пройдите валидацию документа на сайте W3C, при необходимости исправьте ошибки, а затем проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что результат вашего примера соответствует готовому примеру.