Большая часть волнения, которые мы видели до сих пор о HTML5 была для нового API: локального хранения данных, кэш приложения, веб-рабочие, 2-D рисунок и тому подобное.Но давайте не будем забывать, что HTML5 приносит нам 30 новых элементов для разметки документов и приложений, увеличив общее число элементов, доступных нам более 100.
Sexy еще полые demos сторону, даже самые JavaScript-ASTIC Web 2.0-alicious приложений вероятно, будет иметь текстовое содержание, которое должно быть размечена разумно, так что давайте посмотрим на некоторые новые элементы, чтобы убедиться, что ваш следующийПроект, как семантическая, как это interactive.
Чтобы сохранить эту статью превратиться в книгу, мы не будем смотреть на каждого в глубине.Вместо этого меню дегустатора: вы можете видеть то, что доступно, и есть ссылки, которые я проверены, когда вы хотите узнать more.
По пути, мы увидим, что HTML5 семантика тщательно разработан, чтобы расширить текущий возможности HTML, при этом всегда позволяет пользователям старых браузеров для доступа к содержимому.Мы также видим, что семантическая разметка не “приятно иметь”, но это скорее краеугольным камнем веб-разработки, так это то, что повышает доступность, возможность поиска, интернационализации и interoperability.
Человеческий язык, как английский, с его словарем миллионов слов, can’ T экспресс каждый нюанс думал, однозначно, поэтому только 100 или около того слов, которые мы можем использовать в HTML, не будет ситуации, когда it’ не ясно-сократить элемента, который используется для которых часть содержания.В этом случае, выберите один, быть последовательным во всем site.
Презентационная Некоторые элементы Gone
Чисто презентационные элементы, такие как center, font и big устарели.Их роль была совершенно узурпировал каскадные таблицы стилей.Теперь, это не значит, что нужно спешить и перекодировать все эти древние страниц; HTML5 делает их устаревшими для авторов, а потому, что HTML5 стремится, чтобы не сломать веб-браузерах будет по-прежнему оказывать те паутиной наследия pages.
По той же причине, презентационные атрибуты были удалены из текущего элемента;. Например, align на img table background на body, и bgcolor на table
Зла frame элемент отсутствует в HTML5.Рамки вызвало удобство и доступность гадости.Если вы получите желание их использовать, использовать старую DOCTYPE, так что ваши страницы еще validate.
За этот короткий обзор см. полный список W3C о удалить элементы и attributes.
Некоторых элементов представления были пересмотрены, чтобы быть Semantic
Не все презентационные элементы были вывезены и расстреляны.Некоторые из них подверглись обширные перевоспитание программы и вышел с блестящей новой семантикой.Например, smallЭлемент больше не означает “использовать мелкий шрифт”, хотя он будет отображать, что путь в листах браузера стиль.Теперь представляет сторону comments, таких как мелким шрифтом:
Малый печати обычно есть оговорки, оговорки, правовые ограничения, или авторские права.Мелкий шрифт также иногда используется для указания авторства, или для удовлетворения лицензирования requirements.
Некоторые из переопределения чувствую мне быть зачистки.В то время как я могу получить за <b> для привлечения внимания к названия продуктов, ключевые слова и так далее, без особого внимания подразумевается, с указанием семантики для разметки названий судов (<i>, если вы так склонны) чувствует себя странно точным.Но у меня морская болезнь, и ваш навигационный пробег может варьироваться.С похожие ниши precision:
u элемента [теперь] представляет собой отрывок текста с невнятный, хотя явно оказанные нетекстовых аннотации, такие как маркировка текста как имени собственного в китайском языке (китайский надлежащее имя метки), илимаркировка текста как misspelt.
Вы можете прочитать больше о изменили элементы и attributes по W3C website.
Sexy Новая Semantics
Мы все знаем о video и audio.И canvas Особенно популярны на данный момент, поскольку он позволяет 3-D графики с использованием webGL, так гейм-дизайнеры могут портировать свои продукты в Интернете.Как добрый img, эти семантика встроенных содержание, потому что они перетащить в содержании из другого источника — либо файл, URI данных или JavaScript.
В отличие от img, однако, они открывающие и закрывающие теги, что позволяет откаты.Таким образом, браузеров, которые не поддерживают новую семантику могут быть поданы некоторые содержания: изображение может быть резервной для холста, например, или флэш-ролик может быть резервной для video, технику, называемую “ видеодля everybody “.
source и track элементы пустые элементы (без закрытия тегов), которые являются потомками video или audio.
source Элемент получает прошлом кодек Вавилонской башни, что у нас есть.Каждый элемент указывает на другой исходный файл (WebM, MP4, Ogg Theora), а браузер будет играть первым он знает, как бороться с:
<audio controls>
<source src=bieber.ogg type=audio/ogg>
<source src=bieber.mp3 type=audio/mp3>
<!-- fallback content: -->
Download <a href=bieber.ogg>Ogg</a> or <a href=bieber.mp3>MP3</a> formats.
</audio>
В этом примере, Opera, Firefox и Chrome будет скачать версию Ogg из последних шедевров мастера Бибер ног Tappin, в то время как Safari и IE будет захватывать MP3 версию.Chrome может играть как Ogg и MP3, но браузеры скачать первый исходный файл, который они понимают.Резервное содержимое между открывающим изакрытие тегов ссылку, чтобы загрузить контент на рабочем столе и воспроизвести его через отдельный медиа-плеер, и он отображается только в браузерах, которые не могут играть в родном multimedia.
Для видео можно использовать встроенную флэш-ролик размещен на YouTube:
<video controls>
<source src=best-video-ever.webm type=video/webm>
<source src=best-video-ever.mp4 type=video/mp4>
<!-- fallback content: -->
<iframe width="480" height="360"
src="http://www.youtube.com/embed/xzMUyqmaqcw?rel=0"
frameborder="0" allowfullscreen>
</iframe>
</video>
Таким образом, пользователи старых браузеров, таких как IE 6-8, увидят фильм YouTube (пока у них есть проигрыватель Flash Player), так что они будут по крайней мере быть в состоянии посмотреть видео, в то время как пользователям современных браузеровполучите полный родной-видео опытом.Каждый получает содержание, то, что и ваш сайт там, после all.
track элементом является новая дополнение к семейству HTML5 и реализуется Opera, Chrome и IE на данный момент.Это указывает на файл субтитров, содержащий текст и сроков информации.При реализации, он синхронизирует подписи с медиа-файла с тем чтобы по требованию субтитров и титров; полезно не только для зрителей, которые имеют проблемы со слухом, но и для тех, кто не говорит на языке, используемом в аудио или видео file.
Семантику для Internationalization
Менее Ву!чем семантика для мультимедиа и игр семантики для интернационализации.Это может удивить крутые парни в Силиконовой долине, узнав, что во всем мире Web людей используют другие языки, кроме английского и даже использовать различные письменной systems.
Языки, таких как арабский и иврит пишутся справа налево, в отличие от европейских языков, которые пишутся слева направо.На страницах, которые используют только одна система письма, это не представляет проблемы, но на страницах с двунаправленным (“биди”) письма, браузеры должны решить, где поставить знаки препинания, пули, цифр и тому подобное.Браузеры обычно делают очень хорошую работу, используя двунаправленный алгоритм Unicode, но это делается неправильно в некоторых случаях, которые могут серьезно вмятина усвояемость content.
HTML5 дает нам bdi элемент, который позволяет авторам переопределить двунаправленный алгоритм Unicode и сделать свой текст более понятным.Для дальнейшего описания проблемы и увидеть, как bdi решает, см. “ Новые HTML5 на bdi Element” от Ричард Ishida, W3C, интернационализации деятельности lead.
Некоторые языки имеют скрипты, которые не являются алфавитном на всех, но которые выражают идеи, а не звук.Иногда, автору придется помочь читателям с произношением для особо редких или неловко символы, как правило, путем предоставления альтернативного сценария в мелкий шрифт выше соответствующего характера.В печати, это традиционно делается с очень маленькой 5-балльной шрифт под названием “рубин”, и HTML5 дает нам три новых элементов для разметки текста транскрипции. ruby rt и rp
Для получения дополнительной информации см. раздел “ HTML5 ruby Элемент в словах одного слога или Less” ДаниэльDavis.
Структурные Semantics
Большинство людей знают, что HTML5 дает нам много новых элементов для описания частей веб-страницы, такие как header footer nav section article aside и так далее.Они существуют, потому что мы веб-разработчиков на самом деле хотел такую семантику.Как авторы спецификации HTML5 это знать?Потому что в 2005 году Google проанализировал 1 млрд pages чтобы увидеть, что авторы, используя в качестве имен классов на div S и другие элементы.Совсем недавно, в 2008 году, Опера MAMA проанализировано 3 миллиона ссылок, чтобы увидеть высшего класса names и топ IDs использоваться в дикой природе.Эти исследования показали, что авторы хотели, чтобы отметить эти области страницы, но не было элементов для этого, кроме смиренных и общий div, к которым они затем добавляют описательные классов и IDs.
(HTML5 доктора есть много статей о HTML5 semantics, поэтому мы не будем раздувать эту статью, идя в глубину здесь. Внимание:. Некоторые из них были написаны мной)
Новой семантики были построены, чтобы ухудшить изящно.Например, рассмотрим, что спецификация должна say О новом figure элемента:
figure элемент представляет некоторый поток содержания, необязательно с заголовком, который является самодостаточным и, как правило, ссылаются как на единое целое с основным потоком document.
Элемента может быть использовано, чтобы комментировать иллюстрации, диаграммы, фотографии, листингов, и т.д. …
Это не новая идея.HTML3 предложил fig element (который никогда не сделал его в окончательной спецификации HTML 3.2).Выглядело это так:
<FIG SRC="nicodamus.jpeg"> <CAPTION>Ground dweller: <I>Nicodamus bicolor</I> builds silk snares</CAPTION> <P>A small hairy spider. <CREDIT>J. A. L. Cooke/OSF</CREDIT></P> </FIG>
Там большая проблема с этим.В браузерах, которые не поддерживают fig (и не делают), изображение не будет отображаться, поскольку fig элемент будет полностью игнорируются.Содержание credit элемент будет отображаться, потому что это просто текст.Так you’ D получить кредит, не изображение на старых browsers.
В HTML5, вы бы закодировать же пример вот так:
<figure>
<img src="nicodamus.jpeg">
<figcaption>
<p>Ground dweller: <i>Nicodamus bicolor</i> builds silk snares.</p>
<p>A small hairy spider.
<small>J. A. L. Cooke/OSF</small></p>
</figcaption>
</figure>
Отличие от прерванного HTML3 синтаксиса, версии HTML5 обратно совместим: браузер, который “не знает” о figure элемент будет по-прежнему показывать img и текст внутри figcaption (как HTML3 credit элемент будет так же отобразить его содержимое).Обратите внимание, что мы используем пересмотрел small элемента, а не чеканки новых credit элемент. Запомнить that “Мелкий шрифт также иногда используется для указания авторства”.
HTML5 также дает намновая figcaption элемент.Изначально, авторы спецификации пытались повторно caption, как это предлагается в HTML3, но было наследие проблемы, потому что caption ранее только был ребенком table.
Один из разработка принципов, на которых HTML5 является based является то, что новые функции ухудшить gracefully.Когда они не могут, язык позволяет резервный содержание.Он пытается повторно использовать элементы, а не те, мяты новых — но это прагматический язык: при чеканке что-то новое, необходимо, оно so.
Интерактивная Semantics
Структурные элементы HTML5 в настоящее время не многое сделать в визуальных браузеров, хотя программное обеспечение, которое находится в верхней части браузера (например, для чтения с экрана) начинают использовать их (см. “ HTML5, ARIA роли и чтения с экрана вМарт 2011 “и” JAWS, IE и в заголовках в HTML5 “).
Другие элементы действительно есть визуальный эффект. details element, например, заводной интерактивный элемент, который функционирует как «раскрытие виджетов, из которых пользователь может получить дополнительную информацию или контроля”.
Большинство браузеров реализовать его как “окно Expando”: когда пользователь нажимает на некоторых браузеров сгенерированный значок (например, треугольник или вниз стрелку) или сло …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров