main в HTML


Содержание

HTML тег

Элемент (от англ. «main» ‒ «главный, основной») определяет основное содержимое документа (его информационную часть).

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

Элемент не должен располагаться внутри элементов , , , или .

Примечание: Допускается использование элемента только один раз в одном документе.

Синтаксис

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

Атрибуты

Элемент поддерживает глобальные атрибуты и события.

HTML Tag

Sharing is caring!

Structuring Your HTML Document

Usage

The element can only be used once in each HTML file. It is followed by a closing tag, , which should be placed at the end of the content. Both tags must be used outside other structural elements such as and its closing tag, and and its closing tag. They cannot overlap them, or sit within them.

Correct Definitions Within Your Page

was preceded by a similar element, . These two elements have distinct purposes in HTML. To get the usage right, refer back to the original definitions as provided by W3C. “represents the main content of the body of a document or application”, while “represents the content of the document”

. For a clearer understanding, consider the way you’ll style and using CSS. should encapsulate all of the substance of the page – like your blog posts or other content. Think of it as a direct replacement for

Семантика html5, тег main

Вопрос по HTML5 (семантика).

Есть тег main. Он размещён на главной странице новостного ресурса. В него входят превью новостей. По клику превью разворачивается страница детального просмотра новости (со своим main).

Правильно ли я поступаю, что превью новостей на главной странице заключены в main?

Я читал документацию, там говорится об уникальном, не повторяющемся контенте. Является ли превью, в таком смысле, не уникальным контентом?

P.S.: я не могу дать ссылку, потому как всё только на уровне начала вёрстки.

1 ответ 1

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

Элементы не являющиеся контентом (из него исключаются) в aside

Ваше глобальное использование этого тега семантически верное. Проще запомнить: использовать его один раз.

Касательно, самих превью: в стандарте заложен тег section который допускает вложенность в себя собственные h1 , header и footer . Рекомендую прересмотреть структуру тегов.

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

Ответ на второй вопрос: В понятие уникальность, поисковики закладывают исключительно единожды размещённый материал. Но при этом не накладывают штрафы за таковые превью, при размещении рядом ссылки (кнопки) ведущей на страницу с полным текстом документа.

Послесловие: несмотря на мою любовь к HTML5, применение его в production-проектах сопровождается с поддержкой динозавра всеми любимого Internet Explorer-а. Обратите на это внимание в процессе разработки.

Лаконичный и современный основной раздел сайта с использованием CSS3

7 сентября 2015 | Опубликовано в css | Нет комментариев »

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

Вот демонстрация работы и исходный код:

Скачайте пример, и приступим к работе.

Шаг 1. Код HTML

Сначала добавим основной раздел со всеми упомянутыми элементами:

index.html

Как видите, все довольно просто. В основном разделе всего два столбца и один элемент подвала страницы. В каждом разделе находятся разные блоки. По умолчанию, если нужно создать блок, используйте для этого класс block, а если нужно изменить внешний вид блока, используйте другое название класса, например, block_a, block_b или block_c. Так можно задать блокам, в частности, разные цвета. Еще можно использовать заголовки и подписи в блоках, в нашем случае элементы h3 классов head или foot. И также можно настраивать стили заголовков и подписей с помощью таких классов, как head_a, head_b, head_c, foot_a, foot_b и foot_c. В конце находится стандартная форма обратной связи.

Шаг 2. Код CSS

css/main.css

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

Илон Маск рекомендует:  Бегущая строка, работает после клика мышкой в input

Вот стили для разных блоков:

И, наконец, зададим стили форме обратной связи:

Если хотите поместить что-то в подвал сайта, можно использовать следующие стили:

Заключение


Это все. Надеемся, Вам понравился этот урок и он Вам пригодится.

Автор урока Andrew Prikaznov

Тег main, основное содержание

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

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

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

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

Спецификация не допускает использование на одной странице более одного тега , если у них нет специального атрибута hidden . Этот атрибут добавляется HTML-элементу, например, в одностраничных приложениях (Single Page Application), чтобы менять содержимое страницы, делая видимым тот или иной в разных состояниях приложения. Атрибут hidden указывает браузеру, что элемент не должен отображаться и использоваться в момент, когда отображается и используется содержимое другого .

Без JavaScript будущему разработчику никуда. Записывайтесь на профессиональный курс по JavaScript первого уровня, проходящий c 17 января по 23 марта 2020. Только 10 часов цена 20 400 21 900

Семантическая структура для HTML5 страницы. Семантика в HTML5

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

Семантическая структура для HTML5 страницы

В этой статье мы будем постепенно создавать html страницу, и оформлять ее семантическими HTML5 тегами.

Рисунок — Семантическая структура для HTML5 страницы.

DOCTYPE и meta теги в заголовке страницы

Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head :

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

Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные

Заголовок страницы

Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.

Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.

Замечание по поводу тега H1

Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)

До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.

Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.

Контент на странице

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

Оформление статьи

Тег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.

На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime=»2015-09-30″ или с указанием часов минут и секунд datetime=»2015-09-30T15:25:55″ . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.

Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.

Сайдбар или колонка с виджетами

Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:

Тег section

Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента вне контекста самой страницы. Рекомендуется использовать теги (

) для обозначения темы секции.

В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»

Илон Маск рекомендует:  figcaption в HTML

Пример использования тега section в списке с перечислением городов:

Подвал сайта оформляется тегом

Заключение

Для проверки структуры страницы можно использовать инструмент HTML5 outliner. Он показывает структуру страницы блокам и заголовкам.

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

В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org

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

Правильная структура страницы на HTML5, новые семантические теги


С появлением новой версии HTML, стало возможным верстать страницы по-новому. А именно, в HTML5 появились новые семантические теги, которые четко выделяют части страницы и делают ее структуру полностью прозрачной. Что это за теги и почему важно использовать их при верстке?

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

Согласно спецификации HTML5, каждый новый тег относится к определенной категории (0 или более) контента. Перечислим эти категории содержимого:

  • Мета,
  • Заголовочное,
  • Текстовое,
  • Потоковое,
  • Секционное,
  • Встроенное,
  • Интерактивное.

Как видно, категорий совсем немного. Эти условные деления на категории необходимы для более четкого структурирования тегов. Перечислим сами теги: header, nav, article, section, aside, footer, address, main, figure, figcaption, time, mark, bdi, wbr. Кроме этих тегов, еще нужно не забывать про элементы для описания восточно-азиатских символов: ruby, rb, rt, rtc, rp. Ниже рассмотрим кратко новые теги, приводится название и категория содержимого в скобках.

Тег header (потоковое)

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

Тег nav (потоковое, секционное)

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

Тег article (потоковое, секционное)

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

Тег section (потоковое, секционное)

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

Тег aside (потоковое, секционное)

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

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

Тег address (потоковое)

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

Тег main (потоковое)

Элемент можно использовать для определения основной части страницы, не может быть потомком тегов: article, aside, footer, header, nav.

Тег figure (потоковое, корневое)

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

Тег figcaption (-)

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

Тег time (потоковое, текстовое)

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

Тег mark (потоковое, текстовое)

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

Тег bdi (потоковое, текстовое)

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

Тег wbr (потоковое, текстовое)

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

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

Тег HTML5 main

Давно мы не видели новых элементов HTML5, до этого момента было всего лишь девять новых структурных тегов, и они были стабильными на протяжении нескольких лет, это: section , article , aside , hgroup , header , footer , nav , figure и figcaption . Есть еще около двадцати элементов для содержания, а именно video , audio , canvas , progress и т.д.

Сегодня мы встречаем новый структурный элемент: . Согласно последней спецификации W3C :

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

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

Тег main можно использовать в шаблоне, теме или в макете перед content, wrapper: он заменит теги, такие как

Поддержка браузеров

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

Илон Маск рекомендует:  Что такое код ociexecute

Хотя может это станет ненужным, поскольку браузеры развиваются ( поддерживается в Chrome и Firefox новых сборок).

Элемент также был добавлен в html5shiv поэтому он будет работать в IE6, 7 и 8. Возможно, вам придется загрузить новую версию, если вы используете файлы локально.

Можно ли вы использовать сегодня тег ?

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


Frontender Magazine

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

История

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

Стив Фолкнер (Steve Faulkner), консультант по вопросам доступности материалов и один из редакторов проекта html5 doctor, потрудился собрать данные, примеры использования и пообщался с разработчиками. По словам Стива, он говорил:

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

«Предложение» было принято в ноябре 2012, и тег был добавлен в спецификацию HTML 5.1. Недавно он был добавлен еще и в спецификацию HTML5, что ни у кого не вызвало возражений. Давайте посмотрим, что спецификация говорит об элементе .

Спецификация W3C

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

Основное назначение элемента в том, чтобы привязать значение main атрибута role ARIA к определенному элементу HTML. Это поможет скринридерам и прочим вспомогательным технологиям определять, где начинается основное содержание документа. Спецификация W3C описывает следующим образом:

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

Так как элемент теперь является частью спецификации HTML, то элемент возвращает себе определение, которое было в спецификации HTML4.

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

Подробности

Важная особенность элемента — это то, что он может быть использован в документе только один раз. Джереми Кит (Jeremy Keith) задал рабочей группе вопрос о том, почему нельзя использовать множество элементов . Я не буду углубляться в подробности, но рекомендую прочесть эту дискуссию.

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

Кроме того, не может быть потомком элементов , , , , или .

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

Приступим

Так же, как и при появлении множества других новых элементов HTML5, не все браузеры распознают и содержат стили для него. Чтобы быть уверенным, что они есть, стоит добавить в CSS правило, которое сделает main блочным элементом.

Кроме того, для старых IE вам понадобится создать элемент c помощью JavaScript:

Естественно, если вы используете html5shiv, в него уже включен.

Использование элемента на сайте HTML5 Doctor

Самый простой способ использовать — заменить им

Так как это выглядит на практике? Ну, ниже представлена разметка HTML5 Doctor до имплементации .

И вот так она выглядит сейчас:

мы в определенный момент тоже убрали.

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

Версия WHATWG

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

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

Мы рекомендуем использовать элемент согласно версии W3C, описанной выше.

Поддержка браузерами

Firefox 21, Chrome 26, и WebKit r140374 обеспечивают базовую поддержку элемента .

Они все по умолчанию присваивают элементу role=»main» ARIA, чтобы вспомогательные технологии могли без проблем распознать его.

Выводы

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

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

Структура HTML-документа для создания сайта (шаблон)

Структура HTML-документа определяет базовый «скелет» для будущего сайта, вариацию которого мы рассмотрим в данном материале. Код выполнен по стандарту HTML5 и кратко изложены основные тезисы элементов. Он подойдет как для начинающего верстальщика в целях разобраться, что собой представляет каркас страницы, так и профессионального вебмастера в качестве быстро используемого шаблона в своих работах.

Шаблон «скелета» HTML-страницы

Приведем исходный HTML-код с некоторыми дополнительными вставками для дальнейшей визуализации с помощью CSS и JS:

В полученном шаблоне наш «скелет», при условии что файл стилей (style.css) составлен верно, преобразуется в страницу такого типа:

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

Разберем основные теги и атрибуты, примененные в примере:

  • – указание браузеру, как интерпретировать данную страницу, к какой версии принадлежит HTML-документ. В нашем случае подразумевается стандарт HTML5.
  • – контейнер для всего содержимого страницы с указанием принадлежности сайта к конкретному языку.
  • – технический контейнер, направленный на составление информации о странице, подключения стилей и скриптов.
    • – кодировка сайта.
    • – название страницы. Придерживайтесь правильного заполнения тега Title.
    • – мета-описание документа. Опять же, существуют некоторые правила грамотного заполнения метаданных.
    • – подключение файла каскадных таблиц стилей (CSS) для стилизации и оформления элементов.
    • – иконка сайта, отображаемая в браузере.
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL