Placeholders

Прежде мы должны были использовать немного JavaScript, чтобы создать указатели заполнения для текстовых полей (это – своего рода подсказки, отображаемые внутри текстовых полей). Несомненно, вы можете первоначально установить атрибут value, как вы считаете нужным, но как только пользователь удалит этот текст и кликнет вне поля, поле ввода вновь останется пустым. Атрибут placeholder исправляет это.

1.<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />

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

Атрибут Required

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

view sourceprint?

1.<input type="text" name="someInput" required>

Или более структурно:

view sourceprint?

1.<input type="text" name="someInput" required="required">

Любой метод работает. С этим кодом, и в браузере, который поддерживает эту технологию, форма не может быть подтверждена, если поле "someInput" пусто. Вот быстрый пример; мы также добавим атрибут placeholder, поскольку нет никаких причин не делать этого.

view sourceprint?

1.<form method="post" action="">

2.<label for="someInput"> Your Name: </label>

3.<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>

4.<button type="submit">Go</button>

5.</form>

Если поле оставят пустым и будет нажата кнопка подтверждения формы, текстовое поле будет подсвечено.

Атрибут Autofocus

Снова HTML5 отбрасывает потребность в решениях JavaScript. Если определённое поле должно быть "выбрано" или сфокусировано, по умолчанию мы теперь можем использовать атрибут autofocus.

view sourceprint?

1.<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

Интересно, что в то время как я лично более склонен к подходу XHTML (использование кавычек и т.д.), устанавливая "autofocus=autofocus", я чувствую себя странно. Также, мы будем придерживаться этого подхода, когда ключевое слово имеет только один вариант.

Регулярные выражения

Как часто вы пишете какие-то беглые регулярные выражения для проверки определённого текстового поля? Благодаря новому атрибуту pattern, мы можем вставлять регулярные выражения прямо в нашу разметку.

view sourceprint?

01.<form action="" method="post">

02.<label for="username">Create a Username: </label>

03.<input type="text"

04.name="username"

05.id="username"

06.placeholder="4 <> 10"

07.pattern="[A-Za-z]{4,10}"

08.autofocus

09.required>

10.<button type="submit">Go </button>

11.</form>

Если вы знакомы с регулярными выражениями, вы знаете, что этот шаблон: [A-Za-z]{4,10} вводит только заглавные и строчные буквы. Также эта строка должна содержать не менее 4 и не более 10 символов.

Обратите внимание, что мы начинаем комбинировать все эти новые удивительные атрибуты!

Определение поддержки атрибутов

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

view sourceprint?

1.alert( 'pattern' in document.createElement('input') ) // boolean;

Фактически, это популярный метод определения совместимости браузеров. Библиотека jQuery использует эту уловку. Выше, мы создаем новый элемент input и определяем, распознан ли браузером атрибут pattern. Если так, браузер поддерживает эти функции. В противном случае – нет.

view sourceprint?

1.<script>

2.if (!'pattern' in document.createElement('input') ) {

3.// do client/server side validation

4.}

5.</script>

Имейте в виду, что это реализовано на JavaScript.

Элемент <mark>

Думайте об элементе <mark> как о выделителе. Строка, обёрнутая в этот тег, должна относиться к текущим действиям пользователя. Например, если бы я искал "Откройте свой разум" на каком-то блоге, я мог бы использовать JavaScript, чтобы обернуть каждое слово этой строки в тег .

view sourceprint?

1.<h3> Search Results </h3>

2.<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

Когда использовать <div>

Некоторые из нас первоначально задались вопросом, когда мы должны использовать div. Теперь, когда мы имеем доступ к header, article, section, и footer, есть ли у нас время использовать …div? Абсолютно.

«Div’ы должны использоваться, когда нет лучших элементов для работы»

Например, если вы находите, что вам нужно обернуть блок кода в элемент, чтобы позиционировать контент, <div> имеет совершенный смысл. Однако, если вы вместо этого оборачиваете новый пост блога, или, возможно, список ссылок в нижнем колонтитуле, лучше использовать элементы <article> и <nav> соответственно. Они более семантичны.

Атрибут Data

У нас теперь официально есть поддержка custom attribute в пределах всех элементов HTML. В то время, как прежде мы могли осуществить это как:

view sourceprint?

1.<h1 id=someId customAttribute=value> Thank you, Tony. </h1>

…валидатор поднял бы суету! Но теперь, если мы снабжаем наш атрибут предисловием “data,” мы можем официально использовать этот метод. Если вы когда-либо прикрепляли важные данные к чему-то вроде атрибута class, вероятно для использования JavaScript, это будет большой помощью!

HTML код

view sourceprint?

1.<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>

Исправьте значение заказного атрибута

view sourceprint?

1.var theDiv = document.getElementById('myDiv');

2.var attr = theDiv.getAttribute('data-custom-attr');

3.alert(attr); // My Val

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

view sourceprint?

01.<!DOCTYPE html>

02. 

03.<html lang="en">

04.<head>

05.<meta charset="utf-8">

06.<title>Sort of Lame CSS Text Changing</title>

07.<style>

08. 

09.h1 { position: relative; }

10.h1:hover { color: transparent; }

11. 

12.h1:hover:after {

13.content: attr(data-hover-response);

14.color: black;

15.position: absolute;

16.left: 0;

17. 

18.}

19.</style>

20.</head>

21.<body>

22. 

23.<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </h1>

24. 

25.</body>

26.</html>

Вы можете просмотреть демо этого примера на JSBIN.

Элемент Output

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

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

view sourceprint?

01.<form action="" method="get">

02.<p>

03.10 + 5 = <output name="sum"></output>

04.</p>

05.<button type="submit"> Calculate </button>

06.</form>

07. 

08.<script>

09.(function() {

10.var f = document.forms[0];

11. 

12.if ( typeof f['sum'] !== 'undefined' ) {

13.f.addEventListener('submit', function(e) {

14.f['sum'].value = 15;

15.e.preventDefault();

16.}, false);

17.}

18.else { alert('Your browser is not ready yet.'); }

19.})();

20.</script>

Испытайте это непосредственно.

Пожалуйста, отметьте, что поддержка этой технологии, всё ещё работает плохо. На момент написания этой статьи, я был в состоянии заставить это работать только в Opera, что и отражено в коде выше. Если браузер не распознаёт этот элемент, он просто выведет сообщение об ошибке. В противном случае, он выведет значение под именем "sum", и установит его равным 15, соответственно, после того, как форма подтверждена.

Этот элемент может также получить атрибут for, который отражает название элемента, с которым связан output, подобно тому, как работает label.

Создание бегунков с Range Input

HTML5 вводит новый тип input – range.

view sourceprint?

1.<input type="range">

Особенно, это получает атрибуты min, max, step и value среди других. Хотя, кажется, только Opera поддерживает этот элемент полностью прямо сейчас, это будет фантастически, когда мы сможем полностью использовать эти функции!

Для быстрой демонстрации, давайте сделаем датчик, который позволит пользователям решить насколько удивителен "Total Recall". Мы не будем встраивать реальное решение для последовательного опроса, но мы сделаем обзор того, как это могло быть сделано весьма легко.

Шаг 1: Разметка

В первую очередь мы сделаем разметку.

view sourceprint?

1.<form method="post">

2.<h1> Total Recall Awesomness Gauge </h1>

3.<input type="range" name="range" min="0" max="10" step="1" value="">

4.<output name="result">  </output>

5.</form>

Обратите внимание, что в дополнение к настройке min и max, мы всегда можем определить, какой шаг будет для каждого перехода. Если step установлен как 1, будет 10 значений для выбора. Мы также используем в своих интересах новый элемент output из предыдущего совета.

Шаг 2: CSS

Затем мы добавим немного стилей. Мы также используем :before и :after, чтобы сообщить пользователю, каковы наши минимальное и максимальное значения.

view sourceprint?

01.body {

02.font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;

03.text-align: center;

04.}

05.input { font-size: 14px; font-weight: bold;  }

06. 

07.input[type=range]:before { content: attr(min); padding-right: 5px; }

08.input[type=range]:after { content: attr(max); padding-left: 5px;}

09. 

10.output {

11.display: block;

12.font-size: 5.5em;

13.font-weight: bold;

14.}

Выше мы создаём контент до и после range input, и делаем значения равными минимуму и максимуму соответственно.

Шаг 3: JavaScript

Наконец, мы:

Определяем, знает ли текущий браузер, что такое «range input». Если нет, мы сообщаем пользователю, что демонстрация не будет работать.

Динамически обновляем элемент output, поскольку пользователь перемещает бегунок.

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

Тогда, в следующий раз, когда пользователь обновит страницу, «range» и «output» автоматически будут установлены так, как они были выбраны в последний раз.

view sourceprint?

01.(function() {

02.var f = document.forms[0],

03.range = f['range'],

04.result = f['result'],

05.cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;

06. 

07.// Determine if browser is one of the cool kids that

08.// recognizes the range input.

09.var o = document.createElement('input');

10.o.type = 'range';

11.if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');

12. 

13.// Set initial values of the input and ouput elements to

14.// either what's stored locally, or the number 5.

15.range.value = cachedRangeValue;

16.result.value = cachedRangeValue;

17. 

18.// When the user makes a selection, update local storage.

19.range.addEventListener("mouseup", function() {

20.alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");

21.localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");

22.}, false);

23. 

24.// Display chosen value when sliding.

25.range.addEventListener("change", function() {

26.result.value = range.value;

27.}, false);

28. 

29.})();

Готовы к реальному миру? Вероятно, ещё нет; но это всё ещё развлечения и подготовка!

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

Теги divиspan

<div align=?> Важный тег используемый для форматирования больших блоков текста HTML документа. Тег широко используется для включения таблиц стилей </div>. Устаревший атрибут align отвечает за выравнивание содержимого внутри блока: left - по левому краю; right - по правому краю; center - по центру; justify - выравнивается по содержимому. Атрибут Title позволяет создавать всплывающий текст над надписью. Style стандартный набор атрибутов стилей. Пример

<div ALIGN="LEFT">По левому краю</DIV>

< div ALIGN="RIGHT">По правому краю</DIV>

< div ALIGN="CENTER">По центру краю</DIV>

< div ALIGN="JUSTIFY">По содержимому краю</DIV>

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

Примеры:

<div style="background: #ff0000;"> Блок красного цвета</div>

<div style="text-align:center;">Выравниваем текст по центру</div>

Чтобы не описывать стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей. Затем создается класс с именем селектора, а для тега <div> добавляется параметр class или id.

<div class="block1">текст</div>

Стандартные атрибуты тега div:

<div class = имя_класса> Определяет имя класса для элемента </div>

dir = rtl , lt> Определяет направление текста для контента в элементе</div>

<div id = id > Определяет уникальный id для элемента</div>

<div lang =код_языка>Определяет код языка для контента в элементе</div>

<div style =опред_стиля>Определяет инлайновый стиль для элемента</div>

<div title = текст > Определяет дополнительную информацию об элементе</div>

Тег <span> предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

Синтаксис <span>...</span>

Метатеги

Информация, расположенная в заголовочной части Web-страницы, предназначена главным образом для поисковых систем. Ее назначение — максимально точное сжатое описание страницы, которое позволило бы правильно позиционировать страницу в каталоге поискового сервера и в списке ссылок, выданных пользователю в ответ на запрос. Среди главных элементов заголовочной части следует отметить название страницы, помещаемое между дескрипторами <title> и </title>, а также аннотацию и список ключевых слов, вводимые с помощью мета-записей keywords и description.

Любой метатег размещается в заголовке HTML-документа между тегами <head> и </head> и состоит из следующих атрибутов:

<META HTTP-EQUIV="имя" CONTENT="содержимое">

<META NAME="имя" CONTENT="содержимое">

Метатеги с атрибутом HTTP-EQUIV управляют действиями браузеров. В качестве параметра “имя” могут быть использованы следующие аргументы:

Expires – дата устаревания: если указанная дата прошла, то запрос этого документа вызывает повторный сетевой запрос, а не подгрузку документа из кэша. Дата со значением "0" заставляет браузер каждый раз при запросе проверять – изменялся ли этот документ. Например:

<meta http-equiv="expires" content="sun, 3 april 2011

9 05:45:15 gmt">

Pragma – контроль кэширования. Значением должно быть “no-cache”.

Content-Type – указание типа документа. Может быть расширено указанием браузеру кодировки страницы (charset). Например:

<meta http-equiv="content-type" content="text/html”; charset=”windows-1251”>

Content-language – указание языка документа. Комбинация поля Accept-Language (посылаемого браузером) с содержимым Content-language может быть условием выбора сервером того или иного языка.

<meta http-equiv="content-language" content="en-gb">

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

<meta http-equiv="refresh" content="3” url=http://www.bsu.iba.by ">

Window-target – определяет окно текущей страницы; может быть использован для прекращения появления новых окон браузера при применении фреймовых структур.

<meta http-equiv="window-target" content="_top">

Ext-cache – определяет имя альтернативного кэша

<meta http-equiv="ext-cache" content= "name=/some/path/index.db; istructions=user nstructions">

Управление индексацией страницы для поисковых роботов осуществляется с использованием атрибута name.

<meta name="robots" content="noindex">

Возможные значения: all, none, index, noindex, follow, nofollow.

Description – краткая аннотация содержания документа. Используется поисковыми системами для описания документа.

<meta name="description" content= "документ содержит словарь metaтегов">

Keywords – используется поисковыми системами для индексирования документа. Обычно здесь указываются синонимы к словам в заголовке title или альтернативный заголовок.

<meta name="keywords" content="теги, метаданные, список">

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

<meta name="document-state" content="static">

Возможные значения: static, dynamic.

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

<meta name="url" content="absolute_url">

Author – обычно имя автора, формат произвольный.

Generator – обычно название и версия редактора, с помощью которого создана эта страница.

Copyright – обычно описание авторских прав на документ.

Resource-type – текущее состояние данного файла. Важен для поисковых систем: если его значение document, то поисковая система приступает к индексированию.

Новое в HTML 5

HTML5 был создан в результате кооперации между World Wide Web Consortium (W3C) и Web Hypertext Application Technology Working Group (WHATWG).

В 2006 они скооперировались и создали новую версию HTML. HTML5 базируется на HTML, CSS, DOM, and JavaScript и содержит ряд улучшений

В HTML5 добавлены новые элементы:

• canvas для рисования

• video и audio для мультимедия

• storage-для хранения данных

• like article, footer, header, nav, section-новые элементы для контента

• like calendar, date, time, email, url, search-новые формы

Первая задача HTML 5 - правильно интегрировать мультимедийный контент. В отличие от HTML 4.01 где для этой цели используются плагины типа Adobe Flash Player, в HTML 5 предполагается использоваться специально введенные теги video и audio.

<video src="video.mp4" controls><⁄video>

<audio src="The Imperial March.mp3" controls></audio>

Тэги <audio> и <video> позволяют браузеру обрабатывать аудио- и видеопотоки без использования дополнительных плагинов.

Поддержка аудио

Больше мы не должны полагаться на плагины от сторонних производителей для того чтобы отобразить аудио. HTML5 теперь предлагает элемент <audio>. Хорошо, по крайней мере, в конечном счёте мы не будем волноваться об этих плагинах. В настоящее время только новые браузеры предоставляют поддержку HTML5 аудио. Сейчас, это – всё ещё хорошая практика, чтобы предложить некоторую форму обратной совместимости.

view sourceprint?

1.<audio autoplay="autoplay" controls="controls">

2.<source src="file.ogg" />

3.<source src="file.mp3" />

4.<a href="file.mp3">Download this file.</a>

5.</audio>

Mozilla и Webkit ещё не полностью сходятся, когда дело доходит до звукового формата. Firefox захочет увидеть .ogg файл, в то время как браузеры Webkit будут работать только с .mp3. Это означает, что, по крайней мере, пока вы должны создавать две версии файла.

Когда Safari загрузит страницу, он не распознает формат .ogg и, соответственно перейдёт к версии mp3. Пожалуйста, помните, что IE, обычно, не поддерживает это, а Opera 10 и ниже работает только с файлами .wav.

Поддержка видео

Кроме элемента <audio>, у нас, естественно, есть и HTML5 видео в новых браузерах! Фактически, только недавно, YouTube анонсировал новое внедрение видео в HTML5 для своего видео и для браузеров, поддерживающих это. К сожалению, опять же, потому что спецификация HTML5 не определяет специальный кодек для видео, это оставляют браузерам. В то время, как Safari и Internet Explorer 9 поддерживают видео в формате H.264 (который обычно могут проигрывать Flash плееры), Firefox и Opera придерживаются открытых форматов Theora и Vorbis. Так, отображая HTML5 видео, вы должны предложить оба формата.

view sourceprint?

1.<source src="cohagenPhoneCall.ogg" type="video/ogg; codecs='vorbis, theora'" />

2.<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />

3.<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>

4.</video>

«Chrome может корректно отображать видео как в формате "ogg", так и "mp4"»

Здесь есть несколько ценных замечаний:

1. Мы технически не обязаны устанавливать атрибут type; однако, если мы не делаем это, браузер должен выяснить тип непосредственно. Лучше, установите его сами.

2. Не все браузеры понимают HTML5 видео. Ниже исходного элемента мы можем дать ссылку на загрузку файла или внедрить Flash-версию видео. Решать вам.

3. Атрибуты controls и preload будут обсуждаться в следующих двух советах.

Атрибут Preload

Атрибут preload делает именно то, что вы предположили. Хотя, вы должны сначала решить, хотите ли вы, чтобы браузер делал предварительную загрузку видео. Действительно ли это необходимо? Возможно, если посетитель обращается к странице, которая сделана специально для отображения видео, вы определённо должны сделать предварительную загрузку и немного сократить время ожидания для посетителя. Видео может быть предварительно загружено при помощи preload="preload", или просто добавлением preload. Я предпочитаю последнее, этого вполне достаточно.

view sourceprint?

1.<video preload>

Атрибут Controls

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

view sourceprint?

1.<video preload controls>

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

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

Тэг <canvas> обеспечивает динамическую перерисовку изображения в зависимости от действий пользователя или изменяемых данных.Он будет описывать размеченную на веб-сайте область, а движок браузера будет отображать в реальном времени графический контент - чертежи, графики, небольшие игры и даже 3D. Для этого разрабатываеься стандарт WebGL. Для того, чтобы скрипты "Canvas" не тормозили браузер, предусматривается поддержка многопоточности. Эта опция носит название "Web Workes", она выполняет скрипты и веб-приложения параллельно.

Меняется способ хранения информации на клиенте. Сейчас ее можно сохранить только в маленькие файлы cookies. А по новой технологии WebStorage на стороне клиента будут храниться до 10 Мбайт данных в специальной базе данных. С её помощью можно даже хранить специальные веб-приложения и работать с ними без подключения к интернету.

HTML 5 обеспечивает безопасность компонентов. Самая большая угроза в сети исходит из тегов iFrame (в этой области отображается содержимое стороннего сайта). Если в этой области содержится вирус, то он может проникнуть на компьютер. В новом стандарте в теги iFrame добавлен фильтр Sandbox, который будет ограничивать действие скриптов с внешних сайтов.

Ещё одна новинка - технология Web Forms 2.0. Она более эффективно выполняет обработку введенных пользователем данных, что также обеспечивает более высокую скорость. Новые формы: like calendar, date, time, email, url, search

В HTML5 введено несколько тегов для улучшения структуры документа:

— section: тег относится к описанию части документа, и может использоваться с тегами h1-h6, а также быть частью статьи;

— article: в теге лучше всего описывать запись в блоге или новостную заметку;

— aside: в этом теге предлагается описывать некие данные, которые в целом не связаны с основным контентом страницы;

— header: в этом теге, конечно, лучше размещать заголовок секции;

— footer: футер(подвал);

— nav: для навигации появился отдельный тег;

— dialog: этим тегом может быть отмечен какой-либо разговор или интервью;

— figure: в этом теге рекомендовано заключать встраиваемый контент – к примеру, видео, графику или аудио.

Таблица тегов HTML 5

Список атрибутов HTML5

В таблице ниже приведен список основных атрибутов HTML 5. Новые атрибуты и их значения выделены.

В XHTML все теги и атрибуты должны быть набраны в нижнем регистре, кроме тега <!DOCTYPE>.

Необходимо закрывать любые теги, в том числе одиночные, кроме <!DOCTYPE>:

<option> </option>, <br />, <hr />, <img />, <input />, <link />, <meta />.

Запрещается использование сокращений для булевых атрибутов, – значения вписываются полностью, например, <hr noshade="noshade" />, <input type="checkbox" checked="checked" />, вместо <hr noshade>, <input type="checkbox" checked>

Рекомендуется максимально семантически использовать теги: блок <div> </div> – для верстки, а таблицы – для табличного представления данных.

HTML 5 дополняет язык XHTML новыми элементами и атрибутами и исключает старые элементы. Подробнее о различиях:

В HTML5 убраны теги: basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex, dir.

Добавлены новые теги HTML5:

<!DOCTYPE html> section, article, aside, header, footer, nav, figure, audio, video, source, embed, meter, time, canvas, Output, datagrid, details, datalist, datatemplate, progress.

Валидация документов

Валидацией называется проверка документа на соответствие стандартам и выявление ошибок. Код веб-страницы должен подчиняться определенным правилам (www.w3c.org), которые называются спецификацией. Валидация широко применяется для проверки XML – документов, однако может быть использована и для XHTML - документов.

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

По адресу http://validator.w3.org располагается распространенный инструмент для проверки отдельных страниц на валидность. Этот сайт предлагает три способа проверки: по адресу, локального файла и введенного в форму кода.

Если сайт уже опубликован в Интернете, то любую страницу можно проверить, вводя в текстовое поле ее адрес. Так, вводя http://htmlbook.ru в форме «Validate by URI» (валидация по адресу) и нажав кнопку Check (проверить) получим сообщение о том, валидный документ или нет. Хотя в текстовом поле вводится адрес сайта, проверяется не сайт целиком, а только одна главная страница. Адрес http://htmlbook.ru равнозначен вводу http://htmlbook.ru/index.php. Валидатор проверяет HTML-код страницы и в случае отсутствия ошибок докладывает о валидности документа. При обнаружении ошибок выводится уведомление и список ошибок.

Документы, еще не выставленные в Интернете, можно проверить с помощью формы, озаглавленной «Validate by File Upload» (валидация загруженных файлов. Вначале следует указать путь к HTML-файлу, после чего нажать кнопку Check . Файл будет загружен на сервер и проверен на ошибки.

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

Для браузера Firefox может использоваться расширение HTML Validator. Эта программа построена по той же технологии, что и валидатор W3C, но не требует подключения к Интернету и работает прямо «на лету». Где скачать http://users.skynet.be/mgueury/mozilla/

После скачивания файла установить расширение можно несколькими способами.

1. Через менеджер расширений

Запустите Firefox и откройте меню Инструменты > Расширения . Перетащите мышью загруженный файл (он имеет

расширение xpi) в открывшееся окно. Далее расширение будет установлено автоматически.

2. С помощью открытия файла

Выберите в меню Firefox пункт Файл > Открыть файл... и укажите путь к файлу с расширением, дальнейшие действия

браузер выполнит сам.

3. Копирование файла в папку extension

Откройте папку на диске, где установлен Firefox (к примеру c:\Program Files\Mozilla Firefox) и найдите в ней подпапку extension, в которую скопируйте расширение. После запуска браузера дальнейшая установка пройдет самостоятельно. прочитать обо всех возможных методах установки расширений по адресу

http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing

Использование HTML Validator

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