Какой тег используют для разметки раздела страницы
Перейти к содержимому

Какой тег используют для разметки раздела страницы

  • автор:

Простые правила разметки

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

На все эти случаи есть простые правила, следуя которым вы сможете писать легко писать чистый, хорошо структурированный HTML-код, который будет удобно читать и приятно поддерживать.

Используйте HTML-тэги по смыслу

Элементы для основной раскладки

  • header — шапка страницы или блока.
  • footer — подвал страницы или блока.
  • main — главная смысловая часть страницы.
  • section — разделы внутри основного контента.
  • article — отдельная статья, пост или комментарий.
  • nav — навигация, ссылки для перемещения по сайту.
  • aside — боковая колонка, дополнительный контент не входящий в main .

Элементы для содержимого

  • h1-h6 — заголовки. Обычно h1 — это название сайта. Заголовки нужно использовать в порядке иерархии, это важно для доступности.
  • ul и ol — списки, в них удобно размещать любые перечисляемые элементы.
  • button — кнопка, например, элемент управления или кнопка для отправки формы.

Для элементов без особой смысловой нагрузки можно использовать div или span .

Для разметки страницы нельзя использовать теги, предназначенные для оформления текста: например, b и i . У них есть собственные стили, которые со временем может понадобиться переопределить или сбросить — проще сразу выбрать элемент, у которого нет стилей по умолчанию. Тег p уместно использовать для блоков текста, но для других случаев лучше выбрать div .

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

Не знаете с какой стороны взяться за дело? Начните со статьи Первые шаги.

Вёрстка страницы сайта

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

Как создать структуру страницы с помощью блоков (блочная вёрстка)

  • Содержание:
  • 1. Как разбить макет страницы на секции
  • 2. Разметка шапки сайта и позиционирование её элементов
  • 3. Создание сетки для основной части страницы
  • 4. Разметка подвала страницы

1. Как разбить макет страницы на секции

Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье 1.11. HTML5 семантические элементы.

Стандартная веб-страница содержит следующие секции:

structure-main

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

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

container-main

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

.container < width: 100%; max-width: 1024px; /*максимальная ширина может иметь другое значение*/ padding: 0 15px; margin: 0 auto; >

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

2. Разметка шапки сайта и позиционирование её элементов

Приступим к разметке первой секции, так называемой шапки веб-страницы. Элемент предназначен для группировки вводной информации и навигационных средств по странице/сайту. Добавим внутрь тега логотип сайта и навигационные ссылки:

container-header

Разместим логотип слева, а ссылки навигации — с выравниванием по правому краю шапки (для наглядности я добавила элементам белую границу):

.logo < float: left; >nav < float: right; >nav ul < margin: 0; padding: 0; list-style: none; >nav li < display: inline-block; /*один из способов разместить элементы в строку*/ >

Существует несколько способов разместить блочные элементы в строку. Все они приведены в уроке Горизонтальное меню для сайта.

header-collapse

Обратите внимание, что после того, как мы применили обтекание, шапка исчезла. Это произошло потому, что плавающие элементы (для которых задано свойство float ) изымаются из нормального потока и родительский контейнер больше не видит их высоту, поэтому и элемент и элемент внутри него с классом .container схлопнулись. Чтобы исправить эту ситуацию, воспользуемся очисткой потока для элемента с классом .container :

.container:after

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

.container

header-clearfix

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

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

nav a

hyperlinks-header

3. Создание сетки для основной части страницы

Основная часть страницы чаще всего представляет собой сетку из блоков разной ширины. Позиционирование таких блоков осуществляется также с помощью свойства float :

layout-main

.container div < float: left; margin-bottom: 15px; >.col-1-2 < width: 50%; >.col-1-3 < width: 33.3333333333%; >.col-1-4 < width: 25%; >.col-2-3

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

different-height

Высоту блоков можно зафиксировать, указав её явно, например, .container div . Но в этом случае нужно быть уверенным, что при добавлении адаптивности макету содержимое блоков не будет выходить за край блока.

4. Разметка подвала страницы

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

Конспект «Разметка текста»

    (сокращение от «unordered list»). Используется, когда порядок элементов не важен. Например, для разметки перечня ссылок в меню, преимуществ товара, ингредиентов в составе продукта.

    могут находиться только теги
    (сокращение от «list item»), которые обозначают элементы или пункты списка:

  • Я пункт списка, могу быть на любом месте
  • И я пункт списка, и мне тоже не важен порядок

    отмечаются маркерами такого же цвета, как цвет текста.

  • Я пункт списка, могу быть на любом месте
  • И я пункт списка, и мне тоже не важен порядок

Упорядоченный список

    (сокращение от «ordered list»). В этом списке действительно важно, в каком порядке идут элементы. Упорядоченные списки подходят для разметки алгоритмов, инструкций, рецептов, результатов соревнований и так далее.

  1. Я первый и только первый пункт
  2. Я не я, если я не второй пункт
  3. Третий после стольких лет? Всегда!

    ставится их порядковый номер.

  1. Я первый и только первый пункт
  2. Я не я, если я не второй пункт
  3. Третий после стольких лет? Всегда!

    может быть несколько атрибутов: start , reversed и type .

Атрибут start меняет стартовое число нумерации пунктов. Может быть отрицательным.

Атрибут reversed меняет направление нумерации на противоположный. Этот атрибут не требует значения.

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

Список описаний

Тег (сокращение от «description list»). Список описаний используется для разметки вопросов-ответов, наименований и определений, категорий и тем. Он создаётся с помощью трёх тегов:

  • обозначает сам список описаний;
  • (сокращение от «description term») обозначает термин;
  • (сокращение от «description definition») обозначает описание или определение.

Теги и пишутся внутри . Каждый список может содержать один или несколько терминов и одно или несколько описаний для каждого термина. Пример кода:

 
HTML
 
Язык гипертекстовой разметки
 
CSS
 
Каскадные таблицы стилей
 
Язык для оформления HTML-документов

По умолчанию браузер добавляет небольшой отступ слева от определений.

HTML Язык гипертекстовой разметки CSS Каскадные таблицы стилей Язык для оформления HTML-документов

Преформатированный текст и код

Тег (сокращение от «preformatted text»). Используется для отображения примеров кода, также применяется для отображения картинок ASCII Art. Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега .

Пример преформатированного текста с сохранёнными пробелами и переносами строк




Пример преформатированного текста с сохранёнными пробелами и переносами строк


Тег . Используется для обозначения фрагментов кода.


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


Тег ul — это неупорядоченный список.


Тег ul — это неупорядоченный список.








Тег можно вкладывать внутрь тега .


Цитаты


Небольшие цитаты


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


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


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


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


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








Тег может быть самостоятельным и не привязываться к цитате:


Какой доктор ваш любимый (в сериале Доктор Кто)?


Длинные цитаты


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


 
Ум ценится дорого, когда дешевеет сила.
 Джейсон Стэтхэм 


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








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




Ум ценится дорого, когда дешевеет сила.


 Джейсон Стэтхэм


Разметка фрагментов текста


Символы-мнемоники


Это особые строки, которые начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Например, знак меньше на страницу можно вставить мнемоникой < (less than), а знак больше мнемоникой > (greater than):


<ul> </ul>


Перенос строк


Тег 
(сокращение от «line break»). Применяется, чтобы вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен.


Верхний и нижний индексы


Теги и . Названия образованы от слов «superscript» и «subscript».


Тег отображает текст в виде верхнего индекса, а отображает текст в виде нижнего индекса.








Их используют для указания единиц измерения или для написания простых формул:


20м2 H2O X3+X2=1


20м 2 
H2O 
X 3 +X 2 =1


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


Дата и время


Тег . С помощью него можно описывать даты одновременно и для человека, и для машины. Для указания даты в машиночитаемом формате ISO 8601 существует атрибут datetime и выглядит так:








   


Браузер отображает только содержимое тега, а содержимое datetime не отображается.


Акцентирование внимания


Теги и . Названия образованы от слов «emphasis» и «italic». Предназначены для акцентирования внимания на слово или фразу. Визуально оба тега одинаковы, они выделяют текст курсивом.


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


Я просто обожаю холодные зимние дни!


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


Он взглянул в окно и подумал — такого просто не может быть!


Выделение и придание важности


Теги и . Название образовано от слова «bold». Отображаются оба тега одинаково, они выделяют текст жирным.








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


Внимание! Это место опасно. Вы можете упасть в пропасть, если подойдёте близко к краю.


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


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


Описание изменений


Теги и . Названия тегов образованы от слов «delete» и «insert». Предназначены для описания изменений в документе.


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


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


    

  • Почистить посудомоечную машину
    • 

  • Погулять
    • 

  • Поспать
    • 



Разделение контента


Теги и . Это «чистые» элементы, и обычно они отлично подходят в качестве обёртки для стилизации или группировки других элементов. Использовать эти теги рекомендуется в тех случаях, если более подходящих семантических тегов не нашлось.


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


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


 
 
…
 
…
 
 
Текст, в котором выделена фраза
 


    

  • Наша группа в VK
    • 

  • Наш канал на YouTube
    • 

  • Наша страница в Twitter
    • 

  • Наш канал в Telegram
    • 



1.2. HTML-элементы




HTML-элементы — основа языка HTML. Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя элемента.


Все HTML-элементы делятся на пять типов:


    

  • пустые элементы — , , 
    , , ,
    

    

    , , , , , , , , , ;
    • 

  • элементы с неформатированным текстом — , ;
    • 

  • элементы, выводящие неформатированный текст — , ;
    • 

  • элементы из другого пространства имён — MathML и SVG;
    • 

  • обычные элементы — все остальные элементы.
    • 



В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие элементы исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.


Полный список HTML-элементов

Таблица 1. HTML-элементы 



Элемент
Описание





Используется для добавления комментариев.





Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.





Создаёт гипертекстовые ссылки.





Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title .





Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.





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





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





Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.





Загружает звуковой контент на веб-страницу.





Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.





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





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





Отображает текст в направлении, указанном в атрибуте dir , переопределяя текущее направление написания текста.





Выделяет текст как цитату, применяется для описания больших цитат.





Представляет тело документа (содержимое, не относящееся к метаданным документа).





Перенос текста на новую строку.





Создает интерактивную кнопку. Элемент может содержать текст или изображение.





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





Добавляет подпись к таблице. Вставляется сразу после открывающего тега 

.





Используется для указания источника цитирования. Отображается курсивом.





Представляет фрагмент программного кода, отображается шрифтом семейства monospace .





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





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





Элемент используется для связывания значения атрибута value , которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым элемента.





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





Используется для описания термина из элемента .





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





Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в элемент .





Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.





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





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





Элемент-контейнер, внутри которого находятся термин и его описание.





Используется для задания термина.





Выделяет важные фрагменты текста, отображая их курсивом.





Элемент-контейнер для встраивания внешнего интерактивного контента или плагина.





Группирует связанные элементы в форме, рисуя рамку вокруг них.





Заголовок/подпись для элемента .





Самодостаточный элемент-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.





Определяет завершающую область (нижний колонтитул) документа или раздела.





Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action .





Создают заголовки шести уровней для связанных с ними разделов.





Элемент-контейнер для метаданных HTML-документа, таких как , , , , .





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





Горизонтальная линия для тематического разделения параграфов.





Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.





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





Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.





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





Создает многофункциональные поля формы, в которые пользователь может вводить данные.





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





Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.





Таблица-шпаргалка с элементами


Для удобства пользования я сгруппировала HTML-элементы по тематическим разделам, добавив значения свойства display . Чтобы перейти к таблице, кликните по рисунку.





Похожие публикации:
    

  1. Radio switch device что это
    2. 

  2. Reg binary как расшифровать
    3. 

  3. Как выйти из git config
    4. 

  4. Как увеличить размер текста в кул ридере
    5. 








		

		
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *