Главная-Интернет-Структурные теги HTML5. HTML5: старые теги нового назначения

Структурные теги HTML5. HTML5: старые теги нового назначения

Которые позволяют четко описывать блоки контента

Что такое HTML5?

HTML5 — это новейшая версия языка Hypertext Markup Language (HTML), представляющая собой наиболее радикальную ревизию этого языка за всю его историю. В этой версии появилось множество новых функций в различных областях. К наиболее значимым из них относятся следующие.

  • Встроенные мультимедийные теги для поддержки аудио- и видеоконтента
  • Тег Canvas для рисования контента непосредственно в браузере
  • «Разумные» формы, позволяющие осуществлять такие операции, как валидация посредством использования требуемого атрибута
Совершенствование квалификационных навыков по данной тематике

Данная статья является частью программы «Путь к знаниям» по совершенствованию квалификационных навыков (Knowledge Path). См. .

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

История вопроса

В 1989 году Тим Бернерс-Ли (Tim Berners-Lee) создал первый вариант языка HTML с целью преодоления определенных ограничений, которые имелись у существовавших на тот момент методов доступа к информации в Интернете. На начальном этапе существования Интернета ориентирование в нем было сложной задачей. Контент в Интернете представлял собой совокупность отдельных документов, при этом не существовало простого метода навигации по этим документам. И действительно, пользователь должен был знать точный адрес искомого документа и ввести этот адрес вручную. Для решения этой проблемы Бернерс-Ли создал две технологии: протокол HTTP (Hypertext Transfer Protocol) и язык HTML (Hypertext Markup Language).

HTTP — это служебный протокол, с помощью которого Web-серверы доставляют контент. Посмотрите на адресную строку своего Web-браузера. Если ваш браузер показывает полный URL-адрес, то, скорее всего, этот адрес начинается с символов «http://». Эта часть URL-адреса говорит браузеру, протокол какого типа следует использовать при осуществлении запроса к Web-серверу. Когда Web-сервер получает запрос на какой-либо документ, то в большинстве случаев этот документ представлен в формате HTML или преобразуется в этот формат. Именно HTML-документ присылается в браузер, пославший этот запрос.

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

Такое сочетание технологий HTTP и HTML обеспечивает быстрое и простое ориентирование в Интернет-контенте — для осуществления переходов между документами достаточно нажимать мышью на ссылки в тексте. После создания двух вышеупомянутых технологий Бернерс-Ли основал организацию под названием W3C (World Wide Web Consortium). Организация W3C возглавляла разработку первых четырех версий HTML.

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

Организация W3C попыталась решить проблемы сегодняшнего Интернета с помощью стандарта XHTML 2.0 (Extensible Hypertext Markup Language). Однако этот стандарт не получил широкого распространения и к настоящему времени он фактически заброшен. В 2004 году, когда организация W3C концентрировала свои усилия на стандарте XHMTL 2.0, другая организация под названием WHATWG (Web Hypertext Application Technology Working Group) начала разработку стандарта HTML5, который был принят сообществом гораздо благосклоннее, чем стандарт XHTML 2.0. Организация W3C прекратила работы в области XHTML 2.0 и в настоящее время вместе с WHATWG занимается развитием спецификации HTML5.

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

На момент написания данной статьи стандарт HTML5 еще не был выпущен официально. Большая часть контента в Web по-прежнему создается в соответствии со спецификацией HTML 4. Тем не менее, некоторые браузеры поддерживают спецификацию HTML5. Ситуация может оказаться непростой, поскольку каждый из этих браузеров способен поддерживать лишь некоторое подмножество функций HTML5. Перед созданием Web-сайта на базе HTML5 проверьте каждый из целевых браузеров на предмет поддержки функций, которые вы собираетесь использовать на своем сайте.

Обновленная декларация doctype

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

Декларация doctype сообщает браузеру, на какой версии языка разметки написана текущая страница. Она делает это с помощью шаблона DTD (Document Type Definition — определение типа документа). DTD специфицирует правила, используемые языком разметки, благодаря чему браузеры корректно отображают контент.

Концепция doctype-деклараций вполне может сбить с толку. В нынешней спецификации HTML имеется множество деклараций doctype, различия между которыми не вполне очевидны. В таблице 1 показаны доступные на данный момент декларации doctype и их возможности.

Таблица 1. Doctype-декларации и их возможностиDoctype-декларация Возможности Пример
HTML 4.01 strict Разрешает использовать все элементы и атрибуты HTML, однако не допускает презентационных тегов, таких как font. Элементы frameset не разрешены.
HTML 4.01 transitional Аналогична декларации HTML strict, но допускает использование таких тегов, как font. Элементы frameset не разрешены.
HTML 4.01 frameset Аналогична декларации HTML transitional, но разрешает использование элементов frameset.
XHTML 1.0 strict Аналогична декларации HTML strict, однако весь контент должен быть представлен в формате XML. Например, каждый открывающий элемент должен иметь соответствующий ему закрывающий элемент. Элементы frameset не разрешены.
XHTML 1.0 transitional Аналогична декларации HTML transitional, однако весь контент должен быть представлен в формате XML. Элементы frameset не разрешены.
XHTML 1.0 frameset Аналогична декларации XHTML transitional, однако разрешает элементы frameset.
XHTML 1.1 Аналогична декларации XHTML strict, плюс предоставляет такие возможности для модулей, как поддержка Ruby для восточно-азиатских языков.

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

Листинг 1. HTML5-декларация doctype

Декларация должна находиться в самом начале HTML-документа, перед тегом .

Новые структурные теги

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

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

Подход HTML 4

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

Листинг 2. Простая HTML-страница, использующая теги div A Simple HTML Page Using Divs Header Content Footer

Этот подход работает прекрасно; тег div — это превосходный элемент общего назначения. Тем не менее, без рассмотрения атрибута id у каждого тега div трудно сказать, какой раздел документа представляет каждый тег div . Можно приводить доводы в пользу того, что при надлежащем именовании атрибута id его возможностей как индикатора вполне достаточно, тем не менее, использование атрибутов id не является обязательным. Существует множество разновидностей атрибута id , которые могут рассматриваться как одинаково валидные. Сам тег div не содержит указаний на то, какой тип контента ему было поручено представлять.

Подход HTML5

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

Листинг 4. Добавление тега section A Simple HTML Page Header

This is an important section of the page.

Footer Тег article

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

Листинг 5. Добавление тегов article A Simple HTML Page Header

This is an important section of content on the page. Perhaps a blog post.

Footer Тег aside

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

Листинг 6. Добавление тега aside A Simple HTML Page Header

This is an important section of content on the page. Perhaps a blog post.

This is an important section of content on the page. Perhaps a blog post.

Footer Тег footer

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

Листинг 7. Добавление тега footer A Simple HTML Page Header

This is an important section of content on the page. Perhaps a blog post.

This is an aside for the first blog post.

This is an important section of content on the page. Perhaps a blog post.

Footer

К этому моменту все теги div из исходного примера были заменены структурными тегами HTML5.

Тег navЛистинг 8. Добавление тега nav A Simple HTML Page Header Some Nav Link Some Other Nav Link A Third Nav Link

This is an important section of content on the page. Perhaps a blog post.

This is an aside for the first blog post.

This is an important section of content on the page. Perhaps a blog post.

Footer Итоговый вариант примера

В показан результат замены исходных тегов div новыми структурными тегами HTML5.

Листинг 9. Итоговый вариант примера A Simple HTML Page Header Some Nav Link Some Other Nav Link A Third Nav Link

This is an important section of content on the page. Perhaps a blog post.

This is an aside for the first blog post.

This is an important section of content on the page. Perhaps a blog post.

Footer

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

Заключение

Новые структурные теги HTML5 описывают контент, который они содержат, и помогают разделить документ на логические разделы. Подобно автору, пишущему книгу, автор документа по-прежнему сможет сам решать, когда и где использовать эти новые элементы в своем документе. Хотя два автора, пишущих одну и ту же книгу, могут выбирать разные способы для разбиения этой книги на главы, использование глав по-прежнему является единообразным подходом к разбиению книг на разделы. Аналогично, хотя два автора некоторой Web-страницы вполне могут выбрать разные структуры, новые структурные элементы HTML5 предоставляют разработчикам Web-страниц новые единообразные возможности, которые не обеспечивались прежними тегами div .

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

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

Принятие стандарта HTML5 привело к уменьшению разброса существующих технологий верстки. Так, до данного стандарта повсеместно использовались версии 4.01 HTML и стандарты XHTML 1.0 и 1.1, в результате чего страницы были представлены смесью данных технологий, что усложняло работу браузера по интерпретации страниц.Для стандарта HTML5 введен новый doctype:

Рассмотрим основные изменения которые следует учесть в первую очередь:

  • согласно HTML5, язык html является независимым от регистра символов, поэтому теги можно писать с любыми сочетаниями строчных и прописных букв: , , — данные написания являются правильными и равнозначными.
  • html5 объединяет две технологии html и xhtml, как следствие устраняется возможность смешанных правил написания кода. Если раньше можно было встретить написания непарных тегов:
    так и

    так и

    то в стандарте html5 правильным написанием является:

    • Изменения в тегах: устаревшие и адаптированные элементы

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

    Гиперссылка

    Пример

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

    Одним из самых популярных вопросов начинающих верстальщиков является: «Как сделать гиперссылку на блоке div? ». И чаще всего отвечали: «Используйте JS». Как видно из примера, в HTML5 можно просто вложить внутрь гиперссылки нужные блоки.

    Теги и

    В HTML 5 были возвращены теги (делает шрифт жирным) и (курсив). В современной интерпретации, данные теги служат только для визуального оформления и не несут смысловой нагрузки.

    Тег small

    Тег использовался в предыдущих версиях для задания размера шрифта, меньше чем основной текст (антиподом ему был тег big – который увеличивал размер шрифта). Разные отображения в различных браузерах привели к вытеснению данного элемента тегом span, который значительно удобнее в использовании.

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

    Тег address

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

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

    • , заменены тегом (используется для внедрения объектов);
    • — заменили тегом (используется для аббревиатур);
    • — заменили тегом (для внедрения проигрывателя в страницу);
    • — заменили на ;
    • , — заменили на теги И (для вставки листингов программ и кодов);
    • — заменили на

    Свойства форматирования текста , , , — убрали, вместо них следует использовать CSS для оформления.

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

    HTML 5 и CSS 3 добавили в верстку огромное количество новых тегов и свойств. Посмотрите возможности анимации с новыми CSS 3 свойствами.

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

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

    Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:

    • Мета содержимое
    • Потоковое содержимое
    • Секционное содержимое
    • Заголовочное содержимое
    • Текстовое содержимое
    • Встроенное содержимое
    • Интерактивное содержимое
    Описание HTML5-элементов 1. Элемент

    Категории контента: потоковое содержимое.
    Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов и они могут располагаться в любой части страницы.

    Site description

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

    2. Элемент

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

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

      В качестве элементов панели навигации можно использовать не только элементы списков:

      ...

      ...

      Также можно добавлять заголовки внутрь элемента:

      ...

      3. Элемент

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

      ... Опубликовано в категорииМузыка. 0 комментариев

      4. Элемент

      Категории контента: потоковое содержимое, секционное содержимое.
      Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент . В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

      ... ... ...

      внутри

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

      Заметки о природе ... ... Исторические заметки ... ...

      5. Элемент

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

      ... ...

      .........

      6. Элемент

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

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

      ... @2014...

      7. Элемент

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

      8. Элемент

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

      Элемент не может быть потомком таких элементов как , , , или .

      Пудель

      О породе Разновидности Внешний вид Характер Copyright © 2016 Моя собака.ру

      9. Элемент

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

      Осенний лес

      Элемент является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:

      10. Элемент

      Элемент — потомок элемента , не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента , высота по умолчанию равна 18px .

      11. Элемент

      Категории контента:
      Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime , в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:

      Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD . Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):

      12. Элемент

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

      13. Элемент

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

      14. Элемент

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

      15. Элементы для описания Восточно-Азиатских символов

      Категории контента: потоковое содержимое, текстовое содержимое.
      Элемент позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
      — один и более текстовых узлов или элементов ;
      — один и более элементов , , каждый из которых предшествует или следует непосредственно за элементом .

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

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

      Всем известно, что теги , , , являются презентационными, а следовательно, исходя из парадигмы «структура, представление, поведение» их использование не приветствуется. Куда более привычными представляются элементы , , . Так было на протяжении долгих лет практики разработки. Однако многое поменялось в семантике этих элементов с приходом HTML5 . Теперь у нас 4 новых тега со смыслом и каша в голове.

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

      The frobonitor and barbinator components are fried.

      И лидов (первый абзац статьи в журналистике)


      Kittens "adopted" by pet rabbit

      Six abandoned kittens have found an unexpected new mother figure - a pet rabbit.


      Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.


      В свою очередь , как и раньше, означает повышенную значимость своего содержимого.

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

      Per aspera ad Astra — в переводе с латыни изречение означает «Через тернии к звёздам».

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

      Казнить нельзя, помиловать.

      Внимательно читайте договор! «Текст мелким шрифтом» (информация, являющаяся юридической формальностью, как то лицензия предприятия или юридический адрес и др.) мы, как правило, размечали элементом с классом, задающих в визуальных ПА более мелкий шрифт. Теперь же в нашем арсенале появился новый старый семантический элемент — .Холивар о Раньше был ни чем иным, как зачёркнутый текст. Теперь представляет информацию, которая утратила свою актуальность.
      У нас также есть элемент , результатом обработки которого по умолчанию в визуальных ПА является зачёркнутый текст. Он означает изменения в документе, и на первый взгляд их назначение может показаться одинаковым. Однако здесь есть тонкий момент. Рассмотрим пример страницы товара в интернет-магазине.
      На ней может быть указано две цены, одна из которых зачёркнута. Её мы размечаем элементом . Это значит, что старая цена утратила свою актуальность (не важно когда это было, важен сам факт). Как проверить, что не ? подразумевает изменения, внесённые в документ (важно то, что в некоторый момент времени документ был изменён ). В нашем же случае, в новом документе уже содержится неактуальная информация.Новая семантика и старый доктайп Если по каким-то непонятным причинам вы не можете заменить доктайп на новый и формально верстаете в HTML 4.01 — не отчаивайтесь. Используйте старые новые элементы с новым смыслом и со временем вы скажете себе «спасибо». Возможно, кто-то скажет, что это неправильно, но ведь эти элементы, кроме даже не являются невалидными. Кроме того, HTML5 разрабатывался с расчётом на обратную совместимость, это же относится и к новой семантике старых элементов. Радикально ничего не изменилось, а добавилась лишь семантическая перчинка. Тег section

      Тег section группирует контент по тематике, или, другими словами, определяет раздел документа. Обычно предшествует header , может находиться в footer . Тег section может быть заключен внутрь другого тега section , если необходимо, и содержать любой объем разметки. В обычном html, как правило, вместо тега section используют div .

      Тег header

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

      Другими словами тег header определяет верхний колонтитул сайта (шапку сайта).

      Тег footer

      Тег footer (подвал) обычно содержит информацию о секции, например: автор статьи, дата, авторское право и т.д.

      HTML

      Copyright 20011 All Rights

      Тег nav

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

      HTML
      • Главная
      • Скачать
      • Архив
      • О Нас

      Элемент nav можно расположить также, например, в теге header .

      Тег aside

      Тег aside определяет контент, который расположен вокруг основного контента. Это может быть боковая панель (sidebar), содержащая ряд ссылок на статьи, на архив, на метки.

      Тег article

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

      Тег figure

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

      HTML Тут я описываю изображение Тег dialog

      Тег dialog – это та область, где отображается комментарии (беседа, разговор). Тег dialog состоит из следующих частей:

      • сам тег dialog , определяющий блок с комментариями
      • тег dt определят того кто говорит
      • тег dd определяет текст комментария
      HTML Вася я тут был Петя я подтверждаю, все что написал Вася правда Разметка на основе тегов HTML5

      Итак, давайте объединим наши структурные теги на странице.

      Обычный блог Standard Blog

      • Главная
      • Скачать
      • Архив
      • О Нас
      Title

      Lorem ipsum...

      Title

      Lorem ipsum...

      Copyright 20011 All Rights

      Как вы можете видеть, сами теги более наглядны, чем, если бы вы использовали обычные идентификаторы (id) для тегов div . Также очевидно преимущество в использовании адекватных закрывающих тегов, таких как article . Например, разметка документа становится более понятной (и для поисковиков в том числе), если вместо непонятного блока с id="something" ,(где закрывающий тег еще надо поискать!) использовать тег article .

      Стоит ли использовать структурные теги сейчас?

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

      Во-первых, так как большинство браузеров не понимает doctype HTML5, то они и не знают о новых тегах в HTML5. К счастью, браузеры довольно восприимчивы, что позволяет им иметь дело с неизвестными тегами. Единственная проблема в том, что неизвестные теги не имеют стилей по умолчанию, и такие теги рассматриваются как встроенные (inline) теги. Но наши новые теги HTML5 структурные и, очевидно, должны быть блочными элементами. Итак, когда мы стилизуем их в css, то нам необходимо включить объявление display:block .

      Просто включите небольшую часть кода в ваш CSS и новые теги HTML5 готовы к работе. И, конечно, как только HTML5 окончательно распространиться, описание display:block можно удалить, поскольку это описание будет включено в стили по умолчанию.

      Поддержка IE

      Есть проблема, если вам требуется поддержка IE. Оказывается, движок IE будет работать с новыми тегами, но не будет признавать любой CSS стиль, примененный к ним. К счастью, исправить это можно, включив небольшой кусок JavaScript. Все что нам понадобится, это включить следующий код:

      document.createElement("header"); document.createElement("footer"); document.createElement("section"); document.createElement("aside"); document.createElement("nav"); document.createElement("article");

      Данный код можно включите непосредственно в head или подключить через внешний файл.

      Заключение

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

    Похожие публикации:
    
    © 2024, leally.ru - Твой гид в мире компьютера и интернета