Элементы HTML


Содержание
Илон Маск рекомендует:  $Align - Директива компилятора Delphi

Семантические элементы HTML5

Семантика — это наука о значениях слов и фраз в языке. Таким образом, семантические элементы — это элементы со значением.

Что такое семантические элементы?

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

В качестве примера не семантических элементов можно привести теги

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

Примеры семантических элементов: ,

и . Они четко описывают, какого характера контент они содержат.

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

Кроме этого, можно «научить» старые браузеры понимать «неизвестные элементы». См. раздел «Поддержка элементов HTML5».

Новые семантические элементы в HTML5

На многих веб-сайтах есть HTML код вроде этого:

HTML5 вводит ряд новых семантических элементов, предназначение которых определять блоки различных частей веб-страницы:

HTML Элементы

HTML элемент, как правило, состоит из начального и конечного тегов, и содержанием между ними:

HTML контент это, то, что находится от открывающего тега до закрывающего тега:

Мой первый параграф.

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

HTML Вложенные элементы

HTML элементы могут быть вложенными (элементы могут содержать элементы).

Все документы HTML состоят из вложенных элементов HTML.

В этом примере состоит из четырех элементов HTML:

Семантические элементы HTML5

Семантические элементы являются одним из значимых нововведений в HTML5. До их появления вся разметка веб-страниц строилась при помощи элементов

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

Рассмотрим подробнее семантические элементы и их значения.

Элемент

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

HTML учебник. Бесплатные уроки HTML для начинающих разработчиков и веб-мастеров. Пробуем создать простой HTML сайт.

Виды HTML элементов: блочные элемент и строчные HTML элементы

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Мы уже много говорили про особенности языка HTML и даже пытались сравнить структуру HTML со структурой HTTP протокола. Так же мы разбирались с тем, как браузер интерпретирует HTML документ. В этой записи мы на практике посмотрим, что делает браузер с HTML тэгами и ответим на вопросы: «что такое HTML элемент и для чего нужны HTML элементы?». Если вы поймете, как работает браузер с кодом HTML и поймете, принцип формирования HTML элементов, то вам не составит никакого труда разобраться с языком HTML.

Виды HTML элементов: блочные элемент и строчные HTML элементы

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

Виды HTML элементов. Что такое HTML элемент?

Когда мы рассматривал синтаксис HTML и HTML тэги, мы уже упоминали HTML элементы. Давайте сперва ответим на вопрос: «Что такое HTML элементы?». Чтобы ответить на этот вопрос нужно немного понимать, как работает браузер. Когда браузер получает HTML документ, он считывает тэги, написанные в HTML документе, по этим тэгам он создает HTML страницу, которую пользователь видит на экране.

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

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

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

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

Блочные HTML элементы

Блочные HTML элементы чаще всего используются для создания структуры HTML страниц или для логического разбиения HTML документа на части. Типичным примером блочных HTML элементов являются:

, который делит HTML документ на параграфы или абзацы;

  • тэги HTML списка:
      ,

        ,
      • и другие;
      • HTML заголовки.

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

    Если HTML страницу представить, как стену, то блочный HTML элемент – это плита, ширина которой равняется ширине стены. Высота блочного HTML элемента равна высоте его содержимого плюс внутренние отступы блочного HTML элемента. Про внутренние отступы мы поговорим, когда начнем рассматривать CSS. Сейчас добавим, что если у блочного HTML элемента нет содержимого, то его высота равна нулю, но ширина равна ширине области, в которой данный элемент расположен.

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

    Строчные HTML элементы

    Строчные HTML элементы – это такие HTML элементы, ширина которых, равна ширине их содержимого. Если у строчного HTML элемента нет содержимого, то его ширина будет равна нулю. Ширина строчного HTML элемента зависит только от ширины его содержимого, поэтому строчные HTML элементы могут занимать несколько строк. Другими словами, строчные HTML элементы могут быть перенесены на новую строку.

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

    В качестве примера строчных HTML элементов можно привести:

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

    Примеры блочных HTML элементов

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

    Как использовать секционные элементы HTML5

    Один славный малый Matt West c туманного альбиона, промышляющий фрилансом и предпринимательством, предложил нашему вниманию пост: «Как использовать секционные элементы HTML5».
    Ниже приводится его перевод.

    HTML5 предлагает набор секционных элементов, используя которые в своей разметке вы добавляете смысловую или семантическую нагрузку своим страницам, тем самым позволяя компьютерным программам лучше понимать их содержание.
    Прочитав этот пост, вы научитесь применять секционные элементы на ваших веб-сайтах. Я постараюсь объяснить, в каких случаях лучше использовать тот или иной элемент и когда лучше прибегнуть к старому доброму
    Примечание: Мы использовали атрибут роли ARIA role=”main”, здесь он указывает на важность этого элемента тем программам, которые еще не поддерживают элемент (например, некоторые скринридеры).
    Можно использовать только один элемент
    Вы можете вкладывать элементы
    В этом примере мы использовали элемент
    Здесь мы использовали элемент
    Разметка ссылок как списка упрощает навигацию, хотя и не требуется при использовании элемента
    В этом примере мы использовали элемент
    В этом примере элемент
    Так же как
    Этот элемент часто используется внутри элемента

    Новые элементы в HTML 5

    Структура и семантика

    Работа над HTML фактически остановилась в 1999 г. после выхода HTML 4, после чего W3C сосредоточилась на изменении синтаксиса с SGML (Standard Generalized Markup Language) на XML, а также на разработке новых языков разметки, таких как SVG (Scalable Vector Graphics), XForms и MathML. Производители браузеров были поглощены работой над новыми возможностями своих продуктов, например, закладками или чтением новостных лент RSS, а Web-дизайнеры изучали CSS и JavaScript™, позволяющие использовать существующие решения на основе Ajax (Asynchronous JavaScript + XML) для разработки Web-приложений. Сам же язык HTML практически не развивался все эти восемь лет.

    И вот недавно этот зверь проснулся. Три крупнейших производителя браузеров — Apple, Opera и Mozilla Foundation — создали рабочую группу под названием WhatWG (Web Hypertext Application Technology Working Group), целью которой стала разработка новой, улучшенной версии HTML. W3C обратил на это внимание чуть позднее и в итоге также включился в работу над HTML следующего поколения, причем силами многих участников WhatWG. В конце концов, эти две группы, скорее всего, объединятся. Несмотря на то, что споры над множеством деталей по-прежнему ведутся, общая картина следующей версии HTML постепенно проясняется.

    Если представить себе Web-дизайнера, который проспал все восемь лет, начиная с 1999 г., то он по-прежнему сможет легко работать с HTML 5 (альтернативное название— Web Applications 1.0). Как и ранее, нет никаких пространств имен или схем, элементы закрывать необязательно, а браузеры прощают синтаксические ошибки. Другими словами, p и table – это все те же p и table .

    Но в тоже время наш очнувшийся от спячки дизайнер наверняка обнаружит новые, непонятные элементы. К такому старому доброму приятелю, как div , добавились section , header , footer и nav , а к em , code и strong — meter , time и m . Также вдобавок к img и embed появились video и audio . Но если присмотреться, то можно заметить, что эти элементы не сильно отличаются от сушествующих. Многие из них требовались еще в 1999 г., просто тогда их еще не было. К тому же в них легко разобраться по аналогии с уже использующимися элементами, что делает HTML 5 более простым для изучения, чем, например, Ajax или CSS.

    Если же вместе с дизайнером все восемь лет спал и его старый ноутбук с процессором 300MГц и Windows 98, то на нем по-прежнему можно будет запустить новые страницы, и, как ни странно, они будут замечательно отображаться браузерами Netscape 4 или Windows® Internet Explorer® 5. Разумеется, браузер не распознает новые элементы и все что с ними связано, но отобразить содержимое страницы он вполне сможет.

    Это вовсе не какая-то счастливая случайность – одной из задач HTML 5 было то, что браузеры, не поддерживающие новый стандарт, должны отображать страницы с минимальными потерями. Причина этого проста: мы все в той или иной степени очнулись от спячки. Несмотря на такие возможности браузеров, как закладки, поддержка CSS или XmlHttpRequest, рендеринг HTML по-прежнему тот же, что был восемь лет назад. Web не может двигаться вперед без учета существующего положения дел, и разработчики HTML 5 это прекрасно понимали. Новый стандарт предоставляет новые возможности авторам страниц уже сейчас, обещая, что все они станут доступными для пользователей по мере выпуска новых версий браузеров. В свете этого давайте посмотрим, что же появилось нового в HTML 5.

    Структура

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

    • section : служит для определения частей и секций, например для разбивки книжных глав на разделы. Этот элемент может использоватья для любого описания любого блока текста, для которого требуется собственный заголовок.
    • header : определяет верхнюю секцию на странице. Учтите, что это не то же самое, что head .
    • footer : определяет нижнюю секцию на странице. Например, место для подписи в сообщениях email.
    • nav : содержит набор ссылок на другие страницы.
    • article : может описывать отдельные записи в блогах, статьи в журналах или руководствах и т.д.

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

    Листинг 1. Типичная запись в блоге

    Даже несмотря на отступы, такая масса вложенных элементов div выглядит запутанно. Используя новые элементы HTML 5, страницу можно переписать, как показано в листинге 2.

    Листинг 2. Та же запись, переписанная на HTML 5

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

    Элементы уровня блока

    Вдобавок к структурным элементам, HTML 5 предлагает набор семантических элементов уровня блока:

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

    aside

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

    Листинг 3. Боковая панель в статьях developerWorks на HTML 4

    However, Firefox doesn’t yet support this syntax.

    На HTML 5 подобный фрагмент описывается значительно элегантнее, как показано в листинге 4.

    Листинг 4. Та же панель, но на HTML 5

    However, Firefox doesn’t yet support this syntax.

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

    figure

    Элемент figure описывает изображение вместе с подписью. Например, в статьях developerWorks можно найти фрагменты, схожие с листингом 5. Результат показан на рисунке 1.

    Листинг 5. Рисунок в статье developerWorks на HTML 4
    Рисунок 1. Диалог установки Mozilla XForms

    Подобные вещи реализуются значительно более осмысленно на HTML 5, как показано в листинге 6.

    Листинг 6. Тот же рисунок, но описанный на HTML 5

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

    Кроме картинок figure может использоваться для добавления подписей к таким элементам, как audio , video , iframe , object и embed .

    dialog

    Элемент dialog служит для оформления диалога между несколькими собеседниками. В HTML 5 элемент dt по умолчанию используется для отображения имени говорящего, а элемент dd служит для форматирования речи. В итоге диалог отображается достаточно неплохо даже в старых браузерах. В листинге 7 показан фрагмент знаменитого диалога из работы Галилео Галилея “Диалог о двух главнейших системах мира”.

    Листинг 7. Диалог Галилео на HTML 5

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

    Семантические элементы уровня текста

    В HTML 4 существуют несколько элементов уровня текста для представления разного рода фрагментов кода, такие как var , code , kbd , tt и samp . При этом не существует никаких специальных конструкций для выделения таких базовых понятий, как время, числа, саркастические оттенки и т.д. В целях выровнять этот перекос в сторону технических текстов, HTML 5 предлагает несколько новых встроенных элементов.

    Элемент m указывает, что фрагмент текста отмечен каким-либо образом (необязательно подчеркнут), скажем, для выделения важных эпизодов в книге. Классическим примером использования могут служить закешированные страницы Google, на которых отмечены ключевые слова, использованные для поиска. Если поиск был выполнен по некоторому слову, например, “Egret”, то закешированная страница может быть размечена следующим образом:

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

    Элемент time служит для представления определенных моментов времени, таких как 23 апреля, 5:35 P.M., EST, 2007. Например:

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

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

    meter

    Элемент meter служит для представления числового значения в определенном интервале. Он может использоваться для таких вещей, как зарплаты, процент французов, проголосовавших за Ле Пена, результаты тестирования и т.д. В данной статьей meter используется для разметки данных полученных от одного программиста Google на конференции Software Development 2007.

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

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

    Это означает, что студент получил 88.7 баллов из 100 возможных. При этом нижний минимум оценки – 0, самая низкая из полученных оценок – 65, а самая высокая – 96 из ста. Разумеется, различные программы-агенты могут по-разному представлять эту информацию, используя различные интерфейсные элементы или же просто выдавая подсказку, расшифровывающую значение оценки, но большинство, скорее всего, будет использовать стандартное оформление для элементов уровня текста.

    progress

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

    Атрибут value служит для представления текущего, а атрибут max – для конечного состояния процесса. Например, в данном случае элемент показывает, что скачалось 1,534,602 байт из 4,603,807.

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

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

    Элементы мультимедиа

    Использование видеофайлов на Web-страницах растет быстрыми темпами, но только за счет проприетарных технологий, таких как Flash на YouTube, Microsoft Windows Media® или QuickTime в случае Apple. Таким образом, способы разметки подобного контента зависят от конкретного браузера. WhatWG предложила новый элемент video , позволяющий размещать видеоролики произвольных форматов. Например, можно добавить фильм “Sora in Prospect Park” в формате QuickTime следующим образом:

    В то же время продолжаются споры о том, надо ли отдавать предпочтение какому либо одному кодеку или видеоформату. В частности, очень вероятно, что поддержка Ogg Theora будет, как минимум, рекомендована, а может и вовсе стать обязательной, в отличие от проприетарных форматов, таких как QuickTime, а также форматов, защищенных патентами, например, MPEG 4. Скорее всего, набор поддерживаемых форматов определится в результате естественной конкуренции, аналогично тому, как изображения в форматах GIF, JPEG и PNG стали в итоге использоваться гораздо чаще в элементах img , чем BMP, X-Bitmap или же JPEG 2000.

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

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

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

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

    Листинг 8. Выступление Джона Ф. Кеннеди на инаугурации. HTML 5

    Интерактивные элементы

    HTML 5 также известен как Web Applications 1.0. В частности, поэтому он предоставляет несколько элементов для улучшения интерактивной составляющей Web-страниц:

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

    details

    Элемент details служит для представления информации, которую необязательно показывать по умолчанию. Дополнительный атрибут legend может использоваться для краткого отображения содержимого details . Например, элемент может применяться для отображения сносок:

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

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

    datagrid

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

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

    Листинг 9. Ведомость с оценками в datagr >

    Главным отличием данного элемента от обычных HTML-таблиц является то, что пользователь может выбирать, сворачивать, удалять строки, столбцы и ячейки, сортировать таблицу, т.е. работать с данными непосредственно в браузере на клиентской стороне. Для отслеживания изменений в данных служит HTMLDataGridElement — специальный JavaScript-интерфейс, добавленный в модель DOM (Document Object Model).

    Листинг 10. HTMLDataGr >

    DOM также может быть использован для автоматической загрузки данных в таблицу. Таким образом, datagrid не обязан содержать дочерние элементы для хранения изначальных данных. Вместо этого они могут устанавливаться с помощью объекта типа DataGridDataProvider , как показано в листинге 11. Подобным образом можно получать информацию из баз данных, через XmlHttpRequest и вообще из любых источников, доступных через JavaScript.

    Листинг 11. DataGr >

    Элементы menu и command

    Элемент menu существовал в HTML как минимум со второй версии, затем был объявлен устаревшим в HTML 4, однако триумфально вернулся в HTML 5. В новом стандарте он содержит дочерние элементы command , каждый из которых моментально запускает определенное действие. В листинге 12 приведен пример использования menu для показа сообщений alert.

    Листинг 12. Меню на HTML 5

    C помощью атрибута checked=»checked» элементы command можно превратить в группу флажков (check boxes), которые в свою очередь легко преобразуются в группу радиокнопок путем использования атрибута radiogroup (он должен содержать название группы неповторяющихся названий кнопок).

    Кроме простого списка команд, элемент menu можно использовать для создания панелей инструментов или контекстных меню, используя значения toolbar и popup атрибута type . Например, в листинге 13 показана панель инструментов, типичная для редакторов блогов, таких как WordPress. В ней используется атрибут icon для ссылок на иконки для кнопок.

    Листинг 13. Панель инструментов на HTML 5

    Для задания заголовка меню используется атрибут label . Пример использования в меню «Правка» показан в листинге 14.

    Листинг 14. Меню «Правка» на HTML 5

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

    Заключение

    HTML 5 – это часть будущего Web. Новые элементы упрощают разметку страниц, делая их более понятными для пользователя. И хотя старые теги div и span по-прежнему могут использоваться, область их применения значительно сужается, а многим страницам они становятся и вовсе не нужны.

    Конечно, не все браузеры сразу станут поддерживать новые элементы, но ведь та же ситуация наблюдалась и в случае многих конструкций, добавленных после выхода первого стандарта HTML, например, тегов img , table , object и т.д. Поддержка новых элементов будет постепенно реализовываться, а пока же они будут игнорироваться старыми браузерами в соответствии с соглашением “необходимо пропускать” (must-ignore). Это означает, что браузеры по-прежнему смогут отображать страницы HTML 5, что и происходит в настоящее время. Пользователи современных браузеров, конечно, получат определенное преимущество, но возможность просматривать новые страницы будет у всех.

    Восемь лет ожидания новых возможностей – это очень долго, особенно в стремительно развивающемся мире Web. HTML 5 частично возрождает радостное возбуждение ранних дней развития HTML, когда Netscape, Microsoft и другие компании еженедельно предлагали новые элементы. Но в данном случае используется гораздо более осторожный и обдуманный подход к определению элементов, направленный на то, чтобы сделать их доступными для всех. В общем, будущее выглядит очень привлекательным.

    Ресурсы для скачивания

    Похожие темы

    • Оригинал статьи: New elements in HTML 5: Structure and semantics. (EN)
    • Ознакомьтесь с различными предложениями по развитию HTML, сделанными разработчиками, дизайнерами, авторами, производителями ПО и т.д., приведенными в статье Будущее HTML, часть 1: WHATWG (Эд Дамбилл (Edd Dumbill), developerWorks, декабрь 2005 г.).
    • Прочитайте о следующей версии языка XHTML (Extensible Hypertext Markup Language) и об ответе W3C на необходимость разработки многофункциональных клиентов на Ajax в статье Будущее HTML, часть 2: XHTML 2.0 (Эд Дамбилл (Edd Dumbill), developerWorks, январь 2006 г.).
    • Обратитесь к статье XHTML 1.0: Marking up a new dawn (Молли Хольцшлаг (Molly Holzschlag), developerWorks, январь 2006 г.) за сведениями о создании правильно сформированных и валидных документов XHTML 1.0. (EN)
    • Ознакомьтесь со списком часто задаваемых вопросов о деятельности рабочей группы WhatWG на странице Часто задаваемые вопросы о WhatWG и HTML 5. (EN)
    • Ознакомьтесь с текущим вариантом спецификации HTML 5 на странице Web Applications 1.0. (EN)
    • Прочитайте работу Галилео Диалог о двух главнейших системах мира, переведенную на английский Стиллманом Дрейком (Stillman Drake) с сокращениями и комментариями С. И. Скортино (S. E. Sciortino). (EN)
    • Опробуйте открытый видеоформат нового поколения Ogg Theora. (EN)
    • Сертификация по XML корпорации IBM: узнайте, как стать сертифицированным разработчиком IBM в области XML и связанных с ним технологий. (EN)
    • XML: данный раздел сайта developerWorks содержит множество статей, советов, руководств, стандартов и IBM Redbooks.
    • Скачайте программное обеспечение IBM (время работы без регистрации ограничено): начните ваш следующий проект, используя программное обеспечение, которое можно скачать прямо с сайта IBM developerWorks. (EN)

    Комментарии

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

    Элементы HTML

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

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

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

    ). Теги можно писать в нижнем и верхнем регистре, иными словами, маленькими, большими буквами или произвольно смешивать их. Все варианты написания ниже корректны.

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

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

    ). По закрывающему тегу мы определяем, что элемент завершён.

    Некоторые элементы не содержат закрывающего тега и такие элементы называются самозакрывающими. Естественно, у них нет и содержимого. Вот пример.

    Узнать, к какому типу относится элемент и является ли он самозакрывающим, можно в справочнике HTML.

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

    Заголовок

    Заголовок

    Комментарии в HTML

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

    В примере 1 показан типичный HTML-документ.

    Пример 1. HTML-документ

    В данном примере используются элементы , , , ,

    и самозакрывающие элементы и .

    Вложения элементов

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

    Рис. 2. Вложение тегов, а — правильное, б — неверное

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

    4. HTML — Элементы документа

    HTML-элемент — определяется открывающим тегом, если элемент содержит другое содержимое, он заканчивается закрывающим тегом, где перед именем элемента предшествует косая черта. Ниже показаны примеры с несколькими тегами:

  • Начинающий тег Контент Конечный тег
    Мой первый заголовок Мой первый параграф.
    Открывающий тег Содержимое Закрывающий тег
    Это абзац содержимого. Это заголовок содержимого. Это содержание раздела.

    — это элемент HTML,

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

    Содержание

    Отличие тега от элемента

    Элемент HTML определяется стартовым (открывающим) тегом. Если элемент содержит другое содержимое, он заканчивается закрывающим тегом.

    является начальным тегом абзаца, а

    закрывает тег того же абзаца, но

    является элементом абзаца.

    Вложенные HTML-элементы

    Разрешено вставлять один HTML-элемент внутри другого HTML-элемента:

    Семантические элементы HTML5

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

    Один элемент в особенности — скромный

    Форматирование страниц с применением элемента

    Эта ситуация заставила разработчиков задуматься, нельзя ли заменить элемент

    Что такое семантические элементы?

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

    В браузере эта разметка отображается как обычный текст «Регистрация начнется 2012-11-25».

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

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

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

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

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

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

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

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

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

    Модифицирование традиционной HTML-страницы

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

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

    Структурирование страницы старым способом

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

    В следующем листинге приводится сокращенная версия разметки:

    В хорошо написанной, традиционной HTML-странице (подобной этой) большинство работы по форматированию отдается на откуп таблице стилей посредством контейнеров

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

    Структурирование страницы с помощью HTML5

    Чтобы исправить такую ситуацию, в HTML5 некоторые элементы

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

    Соответственно изменятся и селекторы стилей CSS:

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

    Обратите внимание на блок

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

    Конечная структура страницы показана на рисунке:

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

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

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

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

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

    Это, конечно же, несколько модифицированное содержимое из предыдущего примера: вместо элемента подзаголовок обозначен элементом

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

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

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

    Вставка рисунков с помощью элемента

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

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

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

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

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

    Добавление боковой панели с помощью элемента

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

    Этот эффект можно с легкостью создать с помощью хорошо приработанного элемента

    В этот раз таблица стилей врезает плавающую цитату справа:

    Создание навигационных ссылок с помощью элемента

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

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

    Создание разворачиваемых блоков с помощью элементов и

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

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

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

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

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

    Теоретическая часть

    Определение HTML как языка разметки

    HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

    HTML является приложением («частным случаем») SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением XML.

    Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari.

    Структура HTML документа

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

    Документ HTML содержит текст (содержимое страницы) и встроенные теги — инструкциями о структуре, внешнем виде и функции содержимого. Документ HTML разделяется на две основные части: заголовок — head и тело — body. Заголовок содержит такие сведения о документе, как его название и методическая информация, описывающая содержимое. В теле находится само содержимое документа (то, что выводится в окне браузера).

    Новые элементы в HTML 5

    Структура и семантика

    Работа над HTML фактически остановилась в 1999 г. после выхода HTML 4, после чего W3C сосредоточилась на изменении синтаксиса с SGML (Standard Generalized Markup Language) на XML, а также на разработке новых языков разметки, таких как SVG (Scalable Vector Graphics), XForms и MathML. Производители браузеров были поглощены работой над новыми возможностями своих продуктов, например, закладками или чтением новостных лент RSS, а Web-дизайнеры изучали CSS и JavaScript™, позволяющие использовать существующие решения на основе Ajax (Asynchronous JavaScript + XML) для разработки Web-приложений. Сам же язык HTML практически не развивался все эти восемь лет.

    И вот недавно этот зверь проснулся. Три крупнейших производителя браузеров — Apple, Opera и Mozilla Foundation — создали рабочую группу под названием WhatWG (Web Hypertext Application Technology Working Group), целью которой стала разработка новой, улучшенной версии HTML. W3C обратил на это внимание чуть позднее и в итоге также включился в работу над HTML следующего поколения, причем силами многих участников WhatWG. В конце концов, эти две группы, скорее всего, объединятся. Несмотря на то, что споры над множеством деталей по-прежнему ведутся, общая картина следующей версии HTML постепенно проясняется.

    Если представить себе Web-дизайнера, который проспал все восемь лет, начиная с 1999 г., то он по-прежнему сможет легко работать с HTML 5 (альтернативное название— Web Applications 1.0). Как и ранее, нет никаких пространств имен или схем, элементы закрывать необязательно, а браузеры прощают синтаксические ошибки. Другими словами, p и table – это все те же p и table .

    Но в тоже время наш очнувшийся от спячки дизайнер наверняка обнаружит новые, непонятные элементы. К такому старому доброму приятелю, как div , добавились section , header , footer и nav , а к em , code и strong — meter , time и m . Также вдобавок к img и embed появились video и audio . Но если присмотреться, то можно заметить, что эти элементы не сильно отличаются от сушествующих. Многие из них требовались еще в 1999 г., просто тогда их еще не было. К тому же в них легко разобраться по аналогии с уже использующимися элементами, что делает HTML 5 более простым для изучения, чем, например, Ajax или CSS.

    Если же вместе с дизайнером все восемь лет спал и его старый ноутбук с процессором 300MГц и Windows 98, то на нем по-прежнему можно будет запустить новые страницы, и, как ни странно, они будут замечательно отображаться браузерами Netscape 4 или Windows® Internet Explorer® 5. Разумеется, браузер не распознает новые элементы и все что с ними связано, но отобразить содержимое страницы он вполне сможет.

    Это вовсе не какая-то счастливая случайность – одной из задач HTML 5 было то, что браузеры, не поддерживающие новый стандарт, должны отображать страницы с минимальными потерями. Причина этого проста: мы все в той или иной степени очнулись от спячки. Несмотря на такие возможности браузеров, как закладки, поддержка CSS или XmlHttpRequest, рендеринг HTML по-прежнему тот же, что был восемь лет назад. Web не может двигаться вперед без учета существующего положения дел, и разработчики HTML 5 это прекрасно понимали. Новый стандарт предоставляет новые возможности авторам страниц уже сейчас, обещая, что все они станут доступными для пользователей по мере выпуска новых версий браузеров. В свете этого давайте посмотрим, что же появилось нового в HTML 5.

    Структура

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

    • section : служит для определения частей и секций, например для разбивки книжных глав на разделы. Этот элемент может использоватья для любого описания любого блока текста, для которого требуется собственный заголовок.
    • header : определяет верхнюю секцию на странице. Учтите, что это не то же самое, что head .
    • footer : определяет нижнюю секцию на странице. Например, место для подписи в сообщениях email.
    • nav : содержит набор ссылок на другие страницы.
    • article : может описывать отдельные записи в блогах, статьи в журналах или руководствах и т.д.

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

    Листинг 1. Типичная запись в блоге

    Даже несмотря на отступы, такая масса вложенных элементов div выглядит запутанно. Используя новые элементы HTML 5, страницу можно переписать, как показано в листинге 2.

    Листинг 2. Та же запись, переписанная на HTML 5

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

    Элементы уровня блока

    Вдобавок к структурным элементам, HTML 5 предлагает набор семантических элементов уровня блока:

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

    aside

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

    Листинг 3. Боковая панель в статьях developerWorks на HTML 4

    However, Firefox doesn’t yet support this syntax.

    На HTML 5 подобный фрагмент описывается значительно элегантнее, как показано в листинге 4.

    Листинг 4. Та же панель, но на HTML 5

    However, Firefox doesn’t yet support this syntax.

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

    figure

    Элемент figure описывает изображение вместе с подписью. Например, в статьях developerWorks можно найти фрагменты, схожие с листингом 5. Результат показан на рисунке 1.

    Листинг 5. Рисунок в статье developerWorks на HTML 4
    Рисунок 1. Диалог установки Mozilla XForms

    Подобные вещи реализуются значительно более осмысленно на HTML 5, как показано в листинге 6.

    Листинг 6. Тот же рисунок, но описанный на HTML 5

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

    Кроме картинок figure может использоваться для добавления подписей к таким элементам, как audio , video , iframe , object и embed .

    dialog

    Элемент dialog служит для оформления диалога между несколькими собеседниками. В HTML 5 элемент dt по умолчанию используется для отображения имени говорящего, а элемент dd служит для форматирования речи. В итоге диалог отображается достаточно неплохо даже в старых браузерах. В листинге 7 показан фрагмент знаменитого диалога из работы Галилео Галилея “Диалог о двух главнейших системах мира”.

    Листинг 7. Диалог Галилео на HTML 5

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

    Семантические элементы уровня текста

    В HTML 4 существуют несколько элементов уровня текста для представления разного рода фрагментов кода, такие как var , code , kbd , tt и samp . При этом не существует никаких специальных конструкций для выделения таких базовых понятий, как время, числа, саркастические оттенки и т.д. В целях выровнять этот перекос в сторону технических текстов, HTML 5 предлагает несколько новых встроенных элементов.

    Элемент m указывает, что фрагмент текста отмечен каким-либо образом (необязательно подчеркнут), скажем, для выделения важных эпизодов в книге. Классическим примером использования могут служить закешированные страницы Google, на которых отмечены ключевые слова, использованные для поиска. Если поиск был выполнен по некоторому слову, например, “Egret”, то закешированная страница может быть размечена следующим образом:

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

    Элемент time служит для представления определенных моментов времени, таких как 23 апреля, 5:35 P.M., EST, 2007. Например:

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

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

    meter

    Элемент meter служит для представления числового значения в определенном интервале. Он может использоваться для таких вещей, как зарплаты, процент французов, проголосовавших за Ле Пена, результаты тестирования и т.д. В данной статьей meter используется для разметки данных полученных от одного программиста Google на конференции Software Development 2007.

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

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

    Это означает, что студент получил 88.7 баллов из 100 возможных. При этом нижний минимум оценки – 0, самая низкая из полученных оценок – 65, а самая высокая – 96 из ста. Разумеется, различные программы-агенты могут по-разному представлять эту информацию, используя различные интерфейсные элементы или же просто выдавая подсказку, расшифровывающую значение оценки, но большинство, скорее всего, будет использовать стандартное оформление для элементов уровня текста.

    progress

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

    Атрибут value служит для представления текущего, а атрибут max – для конечного состояния процесса. Например, в данном случае элемент показывает, что скачалось 1,534,602 байт из 4,603,807.

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

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

    Элементы мультимедиа

    Использование видеофайлов на Web-страницах растет быстрыми темпами, но только за счет проприетарных технологий, таких как Flash на YouTube, Microsoft Windows Media® или QuickTime в случае Apple. Таким образом, способы разметки подобного контента зависят от конкретного браузера. WhatWG предложила новый элемент video , позволяющий размещать видеоролики произвольных форматов. Например, можно добавить фильм “Sora in Prospect Park” в формате QuickTime следующим образом:

    В то же время продолжаются споры о том, надо ли отдавать предпочтение какому либо одному кодеку или видеоформату. В частности, очень вероятно, что поддержка Ogg Theora будет, как минимум, рекомендована, а может и вовсе стать обязательной, в отличие от проприетарных форматов, таких как QuickTime, а также форматов, защищенных патентами, например, MPEG 4. Скорее всего, набор поддерживаемых форматов определится в результате естественной конкуренции, аналогично тому, как изображения в форматах GIF, JPEG и PNG стали в итоге использоваться гораздо чаще в элементах img , чем BMP, X-Bitmap или же JPEG 2000.

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

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

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

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

    Листинг 8. Выступление Джона Ф. Кеннеди на инаугурации. HTML 5

    Интерактивные элементы

    HTML 5 также известен как Web Applications 1.0. В частности, поэтому он предоставляет несколько элементов для улучшения интерактивной составляющей Web-страниц:

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

    details

    Элемент details служит для представления информации, которую необязательно показывать по умолчанию. Дополнительный атрибут legend может использоваться для краткого отображения содержимого details . Например, элемент может применяться для отображения сносок:

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

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

    datagrid

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

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

    Листинг 9. Ведомость с оценками в datagr >

    Главным отличием данного элемента от обычных HTML-таблиц является то, что пользователь может выбирать, сворачивать, удалять строки, столбцы и ячейки, сортировать таблицу, т.е. работать с данными непосредственно в браузере на клиентской стороне. Для отслеживания изменений в данных служит HTMLDataGridElement — специальный JavaScript-интерфейс, добавленный в модель DOM (Document Object Model).

    Листинг 10. HTMLDataGr >

    DOM также может быть использован для автоматической загрузки данных в таблицу. Таким образом, datagrid не обязан содержать дочерние элементы для хранения изначальных данных. Вместо этого они могут устанавливаться с помощью объекта типа DataGridDataProvider , как показано в листинге 11. Подобным образом можно получать информацию из баз данных, через XmlHttpRequest и вообще из любых источников, доступных через JavaScript.

    Листинг 11. DataGr >

    Элементы menu и command

    Элемент menu существовал в HTML как минимум со второй версии, затем был объявлен устаревшим в HTML 4, однако триумфально вернулся в HTML 5. В новом стандарте он содержит дочерние элементы command , каждый из которых моментально запускает определенное действие. В листинге 12 приведен пример использования menu для показа сообщений alert.

    Листинг 12. Меню на HTML 5

    C помощью атрибута checked=»checked» элементы command можно превратить в группу флажков (check boxes), которые в свою очередь легко преобразуются в группу радиокнопок путем использования атрибута radiogroup (он должен содержать название группы неповторяющихся названий кнопок).

    Кроме простого списка команд, элемент menu можно использовать для создания панелей инструментов или контекстных меню, используя значения toolbar и popup атрибута type . Например, в листинге 13 показана панель инструментов, типичная для редакторов блогов, таких как WordPress. В ней используется атрибут icon для ссылок на иконки для кнопок.

    Листинг 13. Панель инструментов на HTML 5

    Для задания заголовка меню используется атрибут label . Пример использования в меню «Правка» показан в листинге 14.

    Листинг 14. Меню «Правка» на HTML 5

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

    Заключение

    HTML 5 – это часть будущего Web. Новые элементы упрощают разметку страниц, делая их более понятными для пользователя. И хотя старые теги div и span по-прежнему могут использоваться, область их применения значительно сужается, а многим страницам они становятся и вовсе не нужны.

    Конечно, не все браузеры сразу станут поддерживать новые элементы, но ведь та же ситуация наблюдалась и в случае многих конструкций, добавленных после выхода первого стандарта HTML, например, тегов img , table , object и т.д. Поддержка новых элементов будет постепенно реализовываться, а пока же они будут игнорироваться старыми браузерами в соответствии с соглашением “необходимо пропускать” (must-ignore). Это означает, что браузеры по-прежнему смогут отображать страницы HTML 5, что и происходит в настоящее время. Пользователи современных браузеров, конечно, получат определенное преимущество, но возможность просматривать новые страницы будет у всех.

    Восемь лет ожидания новых возможностей – это очень долго, особенно в стремительно развивающемся мире Web. HTML 5 частично возрождает радостное возбуждение ранних дней развития HTML, когда Netscape, Microsoft и другие компании еженедельно предлагали новые элементы. Но в данном случае используется гораздо более осторожный и обдуманный подход к определению элементов, направленный на то, чтобы сделать их доступными для всех. В общем, будущее выглядит очень привлекательным.

    Ресурсы для скачивания

    Похожие темы

    • Оригинал статьи: New elements in HTML 5: Structure and semantics. (EN)
    • Ознакомьтесь с различными предложениями по развитию HTML, сделанными разработчиками, дизайнерами, авторами, производителями ПО и т.д., приведенными в статье Будущее HTML, часть 1: WHATWG (Эд Дамбилл (Edd Dumbill), developerWorks, декабрь 2005 г.).
    • Прочитайте о следующей версии языка XHTML (Extensible Hypertext Markup Language) и об ответе W3C на необходимость разработки многофункциональных клиентов на Ajax в статье Будущее HTML, часть 2: XHTML 2.0 (Эд Дамбилл (Edd Dumbill), developerWorks, январь 2006 г.).
    • Обратитесь к статье XHTML 1.0: Marking up a new dawn (Молли Хольцшлаг (Molly Holzschlag), developerWorks, январь 2006 г.) за сведениями о создании правильно сформированных и валидных документов XHTML 1.0. (EN)
    • Ознакомьтесь со списком часто задаваемых вопросов о деятельности рабочей группы WhatWG на странице Часто задаваемые вопросы о WhatWG и HTML 5. (EN)
    • Ознакомьтесь с текущим вариантом спецификации HTML 5 на странице Web Applications 1.0. (EN)
    • Прочитайте работу Галилео Диалог о двух главнейших системах мира, переведенную на английский Стиллманом Дрейком (Stillman Drake) с сокращениями и комментариями С. И. Скортино (S. E. Sciortino). (EN)
    • Опробуйте открытый видеоформат нового поколения Ogg Theora. (EN)
    • Сертификация по XML корпорации IBM: узнайте, как стать сертифицированным разработчиком IBM в области XML и связанных с ним технологий. (EN)
    • XML: данный раздел сайта developerWorks содержит множество статей, советов, руководств, стандартов и IBM Redbooks.
    • Скачайте программное обеспечение IBM (время работы без регистрации ограничено): начните ваш следующий проект, используя программное обеспечение, которое можно скачать прямо с сайта IBM developerWorks. (EN)

    Комментарии

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

    Семантические элементы HTML5

    Семантика — это наука о значениях слов и фраз в языке. Таким образом, семантические элементы — это элементы со значением.

    Что такое семантические элементы?

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

    В качестве примера не семантических элементов можно привести теги

    Примеры семантических элементов: ,

    и . Они четко описывают, какого характера контент они содержат.

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

    Кроме этого, можно «научить» старые браузеры понимать «неизвестные элементы». См. раздел «Поддержка элементов HTML5».

    Новые семантические элементы в HTML5

    На многих веб-сайтах есть HTML код вроде этого:

    HTML5 вводит ряд новых семантических элементов, предназначение которых определять блоки различных частей веб-страницы:

    HTML Элементы

    HTML элемент, как правило, состоит из начального и конечного тегов, и содержанием между ними:

    HTML контент это, то, что находится от открывающего тега до закрывающего тега:

    Мой первый параграф.

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

    HTML Вложенные элементы

    HTML элементы могут быть вложенными (элементы могут содержать элементы).

    Все документы HTML состоят из вложенных элементов HTML.

    В этом примере состоит из четырех элементов HTML:

    HTML элементы

    HTML элемент — это основная структурная единица веб-страницы, написанная на языке HTML.

    Парные и одиночные теги HTML

    Синтаксис HTML элементов, состоящих из парных тегов:

    • Элемент начинается с открывающего тега.
    • Элемент заканчивается закрывающим тегом.
    • Содержимым элемента является все, что находится между открывающим и закрывающим тегами. Содержимое может быть текстом и/или другим HTML элементом.

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

    Синтаксис HTML элементов, состоящих из одиночных тегов:

    • Элемент состоит только из открывающего тега.

    Элементы, состоящие из одиночных тегов называются пустыми . Всего в HTML 16 одиночных тегов:

    Вложенные элементы

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

    Следующий пример состоит из трех элементов, два из которых вложенные:

    В этом примере элемент

    вложен в элемент , который, в свою очередь, вложен в элемент .

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

    Пример с правильной вложенностью:

    Здесь элемент правильно вложен — он находится полностью в элементе

    Пробельные символы

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

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

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

    HTML учебник. Бесплатные уроки HTML для начинающих разработчиков и веб-мастеров. Пробуем создать простой HTML сайт.

    Виды HTML элементов: блочные элемент и строчные HTML элементы

    Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Мы уже много говорили про особенности языка HTML и даже пытались сравнить структуру HTML со структурой HTTP протокола. Так же мы разбирались с тем, как браузер интерпретирует HTML документ. В этой записи мы на практике посмотрим, что делает браузер с HTML тэгами и ответим на вопросы: «что такое HTML элемент и для чего нужны HTML элементы?». Если вы поймете, как работает браузер с кодом HTML и поймете, принцип формирования HTML элементов, то вам не составит никакого труда разобраться с языком HTML.

    Виды HTML элементов: блочные элемент и строчные HTML элементы

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

    Виды HTML элементов. Что такое HTML элемент?

    Когда мы рассматривал синтаксис HTML и HTML тэги, мы уже упоминали HTML элементы. Давайте сперва ответим на вопрос: «Что такое HTML элементы?». Чтобы ответить на этот вопрос нужно немного понимать, как работает браузер. Когда браузер получает HTML документ, он считывает тэги, написанные в HTML документе, по этим тэгам он создает HTML страницу, которую пользователь видит на экране.

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

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

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

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

    Блочные HTML элементы

    Блочные HTML элементы чаще всего используются для создания структуры HTML страниц или для логического разбиения HTML документа на части. Типичным примером блочных HTML элементов являются:

    , который делит HTML документ на параграфы или абзацы;

  • тэги HTML списка:
      ,

        ,
      • и другие;
      • HTML заголовки.

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

    Если HTML страницу представить, как стену, то блочный HTML элемент – это плита, ширина которой равняется ширине стены. Высота блочного HTML элемента равна высоте его содержимого плюс внутренние отступы блочного HTML элемента. Про внутренние отступы мы поговорим, когда начнем рассматривать CSS. Сейчас добавим, что если у блочного HTML элемента нет содержимого, то его высота равна нулю, но ширина равна ширине области, в которой данный элемент расположен.

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

    Строчные HTML элементы

    Строчные HTML элементы – это такие HTML элементы, ширина которых, равна ширине их содержимого. Если у строчного HTML элемента нет содержимого, то его ширина будет равна нулю. Ширина строчного HTML элемента зависит только от ширины его содержимого, поэтому строчные HTML элементы могут занимать несколько строк. Другими словами, строчные HTML элементы могут быть перенесены на новую строку.

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

    В качестве примера строчных HTML элементов можно привести:

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

    Примеры блочных HTML элементов

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

    Элементы HTML

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

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

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

    ). Теги можно писать в нижнем и верхнем регистре, иными словами, маленькими, большими буквами или произвольно смешивать их. Все варианты написания ниже корректны.

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

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

    ). По закрывающему тегу мы определяем, что элемент завершён.

    Некоторые элементы не содержат закрывающего тега и такие элементы называются самозакрывающими. Естественно, у них нет и содержимого. Вот пример.

    Узнать, к какому типу относится элемент и является ли он самозакрывающим, можно в справочнике HTML.

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

    Заголовок

    Заголовок

    Комментарии в HTML

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

    В примере 1 показан типичный HTML-документ.

    Пример 1. HTML-документ

    В данном примере используются элементы , , , ,

    и самозакрывающие элементы и .

    Вложения элементов

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

    Рис. 2. Вложение тегов, а — правильное, б — неверное

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

    Как использовать секционные элементы HTML5

    Один славный малый Matt West c туманного альбиона, промышляющий фрилансом и предпринимательством, предложил нашему вниманию пост: «Как использовать секционные элементы HTML5».
    Ниже приводится его перевод.

    HTML5 предлагает набор секционных элементов, используя которые в своей разметке вы добавляете смысловую или семантическую нагрузку своим страницам, тем самым позволяя компьютерным программам лучше понимать их содержание.
    Прочитав этот пост, вы научитесь применять секционные элементы на ваших веб-сайтах. Я постараюсь объяснить, в каких случаях лучше использовать тот или иной элемент и когда лучше прибегнуть к старому доброму
    Примечание: Мы использовали атрибут роли ARIA role=”main”, здесь он указывает на важность этого элемента тем программам, которые еще не поддерживают элемент (например, некоторые скринридеры).
    Можно использовать только один элемент
    Вы можете вкладывать элементы
    В этом примере мы использовали элемент
    Здесь мы использовали элемент
    Разметка ссылок как списка упрощает навигацию, хотя и не требуется при использовании элемента
    В этом примере мы использовали элемент
    В этом примере элемент
    Так же как
    Этот элемент часто используется внутри элемента

    4. HTML — Элементы документа

    HTML-элемент — определяется открывающим тегом, если элемент содержит другое содержимое, он заканчивается закрывающим тегом, где перед именем элемента предшествует косая черта. Ниже показаны примеры с несколькими тегами:

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

    Должность

    В браузере описание таблицы будет показываться следующим образом:

    Рис. 1.7. Показ таблицы в браузере

    Таблицы рекомендуется использовать только для отображения табличных данных, а не для задания структуры web-документа. Для задания структуры документа рекомендуется использовать CSS-стили, как будет описано далее.

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

    • • method – задает HTTP-метод отправки данных формы на сервер (Get или Post).
    • • action – задает адрес ресурса сервера, которому будут передаваться данные; это может быть серверный скрипт или шаблон web- страницы; если не задан, то данные будут передаваться на тот же адрес, по которому была получена страница с данной формой.

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

    Основные элементы управления, включаемые в HTML-форму

    Тип элемента

    Описание

    Используется, если необходимо ввести небольшое количество текста (одну или несколько строк). Кроме того, задается атрибут name для определения наименования переменной поля. Имеет еще три дополнительных атрибута:

    • • maxlength – ограничивает число символов, вводимых пользователем в текущее поле. По умолчанию данное число не ограничено;
    • • size – определяет размер видимой на экране области, занимаемой текущим полем. Значение по умолчанию определяется типом браузера;
    • • maxlength – если его значение больше, чем size, браузер будет прокручивать данные в окне;
    • • value – обеспечивает начальное значение поля ввода

    Применяется для создания флажков, у которых пользователь может задать состояние «выбран/невыбран». Должны быть заданы атрибуты name и value. В некоторых случаях необходимо инициализировать данный флажок, как уже выбранный. В этих случаях тэг должен содержать атрибут checked

    Применяется в случае, когда требуется организовать выбор одного из нескольких возможных значений (альтернатив). Должны быть также указаны атрибуты name и value

    При щелчке мышью по изображению браузер сохраняет координаты соответствующей точки экрана. Далее он обрабатывает введенную в форму информацию. Должны быть указаны атрибуты name и src. Атрибут src содержит URI файла-источника изображения. Атрибут align является дополнительным и используется аналогично тому же атрибуту тэга

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

    Используется для размещения кнопок на web-странице. Имеет атрибуты name и value

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

    Используется как элемент интерфейса для завершения ввода данных. Может содержать два дополнительных атрибута: name и value

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

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

    используется для создания текстового поля из нескольких строк. Он использует следующие атрибуты: cols (число колонок, содержащихся в текстовой области), name и rows (количество видимых строк текстовой области).

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

    «option value==Вариант 2″>Вариант 2″/option>

    «option value=»Dfhbfyn 3”>Вариант 3″/option>

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL
    Открывающий тег Содержимое Закрывающий тег
    Это абзац содержимого. Это заголовок содержимого. Это содержание раздела.

    — это элемент HTML,

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

    Содержание

    Отличие тега от элемента

    Элемент HTML определяется стартовым (открывающим) тегом. Если элемент содержит другое содержимое, он заканчивается закрывающим тегом.

    является начальным тегом абзаца, а

    закрывает тег того же абзаца, но

    является элементом абзаца.

    Вложенные HTML-элементы

    Разрешено вставлять один HTML-элемент внутри другого HTML-элемента:

    Семантические элементы HTML5

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

    Один элемент в особенности — скромный

    Форматирование страниц с применением элемента

    Эта ситуация заставила разработчиков задуматься, нельзя ли заменить элемент

    Что такое семантические элементы?

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

    В браузере эта разметка отображается как обычный текст «Регистрация начнется 2012-11-25».

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

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

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

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

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

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

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

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

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

    Модифицирование традиционной HTML-страницы

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

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

    Структурирование страницы старым способом

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

    В следующем листинге приводится сокращенная версия разметки:

    В хорошо написанной, традиционной HTML-странице (подобной этой) большинство работы по форматированию отдается на откуп таблице стилей посредством контейнеров

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

    Структурирование страницы с помощью HTML5

    Чтобы исправить такую ситуацию, в HTML5 некоторые элементы

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

    Соответственно изменятся и селекторы стилей CSS:

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

    Обратите внимание на блок

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

    Конечная структура страницы показана на рисунке:

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

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

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

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

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

    Это, конечно же, несколько модифицированное содержимое из предыдущего примера: вместо элемента подзаголовок обозначен элементом

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

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

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

    Вставка рисунков с помощью элемента

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

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

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

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

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

    Добавление боковой панели с помощью элемента

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

    Этот эффект можно с легкостью создать с помощью хорошо приработанного элемента

    В этот раз таблица стилей врезает плавающую цитату справа:

    Создание навигационных ссылок с помощью элемента

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

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

    Создание разворачиваемых блоков с помощью элементов и

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

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

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

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

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

    Основные элементы языка HTML

    Заголовок HTML-документа используется для размещения информации, относящейся ко всему документу в целом. Он нс является обязательным элементом разметки. Элемент разметки title служит для именования документа в web-сети. Например:

    Основными элементами, включаемыми в заголовок head, являются: title – название документа; meta – метаинформация, связанная с документом; link – общие ссылки для данного документа; style – описатели стилей или ссылки на внешние ресурсы со стилями; script – скрипты или ссылки на внешние ресурсы со скриптами.

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

    В тэге body могут быть заданы атрибуты. Описание некоторых основных атрибутов body показано в табл. 1.2.

    Например, атрибут background определяет фон, на котором отображается текст документа. Если источником для фона HTML-документа является графический файл, например image.gif, то в открывающем тэге тела body появляется соответствующий атрибут:

    Некоторые атрибуты HTML

    Атрибут

    Описание

    Определяет высоту отступа (в пикселях) верхнего и нижнего полей документа

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

    Определяет изображение для заливки фона; значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG

    Определяет цвет фона документа

    Определяет цвет текста в документе

    Определяет цвет гиперссылок в документе

    Определяет цвет подсветки гиперссылок в момент нажатия

    Определяет цвет гиперссылок на документы, которые были ранее просмотрены

    В элемент body включаются элементы управления разметкой, некоторые из которых показаны в табл. 1.3.

    Некоторые элементы управления разметкой

    Заголовки задают начало раздела документа. В HTML определено 6 уровней заголовков: от hi до h6. Текст, окруженный тэгами

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

    Возможные значения атрибута: justify, left, right, center

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

    Возможные значения атрибута; left, right, all

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

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

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

    Основными атрибутами контейнеров являются id и class. Следует помнить, что строчные контейнеры могут включать только другие строчные контейнеры, а блочные контейнеры могут включать как строчные, так и блочные контейнеры.

    Списки. Они являются одним из часто используемых способов структурирования текстов. Имеются следующие виды списков: ненумерованные (тэг

      ) и нумерованные (тэг
        ).

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

    первый элемент списка

    второй элемент списка

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

        – стандартные маркеры списков первого уровня (по умолчанию);
          – маркеры в виде кругов;
            – квадратные маркеры.

          Нумерованные списки создаются с помощью тэга

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

          Комментарии используются для пояснения документа и нс отображаются браузерами. В HTML они начинаются с символа » «.

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

          Пример гипертекстовой ссылки

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

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

          Изображения, включенные в web-страницу, могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Пользователь браузера может щелкнуть по изображению и перейти к другой странице. Для обозначения изображения как гипертекстовой метки используется тот же тэг , что и для текста, но между и вставляется тэг изображения . Тэг также имеет несколько необязательных атрибутов: alt, align, usemap, hspace, vspace, border, width, height.

          Таблицы включаются в web-страницы с помощью элемента table. В содержании данного элемента задаются строки таблицы с помощью тэга

    . Заголовки для столбцов и строк таблицы задаются с помощью тэгов заголовков . Эти тэги подобны , однако текст, заключенный между тэгами , автоматически выделяется жирным шрифтом и по умолчанию располагается посередине ячейки. Тэг позволяет создавать заголовки таблицы. Пример описания таблицы показан ниже:
    ct>ИO
    Иванов A.П. программист
    Петров B.A. проектировщик