Кажется, что сейчас все говорят о HTML5, но обсуждение разбросано и редко дает представление о том, что такое HTML5 на самом деле, и если / когда его можно использовать.
Поэтому мои амбиции здесь:
- Дать вам немного истории
- Узнайте, что такое HTML5 и что он охватывает
- Показать примеры кода
- Задайте вопрос, можете ли вы начать использовать его или нет
Фон
Работа над HTML5 происходит от WHATWG (Рабочая группа по технологиям веб-гипертекста), и их основной задачей является разработка HTML и API для веб-приложений. Причиной его появления в 2004 году, основанного людьми из Apple, Mozilla и Opera, стало беспокойство по поводу направления развития W3C с XHTML, а также отсутствие внимания к HTML или реальным потребностям веб-разработчиков.
Это стало действительно интересно в июле 2009 года, когда W3C объявил, что XHTML2 будет отменен в пользу HTML. Это означает, что единственное будущее развитие HTML и XHTML будет в форме HTML5 — HTML5 — это будущее, что бы вы ни думали об этом.
Я также должен сразу отметить, что HTML5 пишется именно так, без пробела между буквой L и 5 — подробнее в Правописание HTML5 .
Что такое HTML5
Так что же такое HTML5? По сути, речь идет о расширении HTML / XHTML новыми, более семантически богатыми элементами, обесценивании атрибутов, введении новых атрибутов и изменении того, как некоторые элементы и атрибуты разрешено использовать. Вместе с этим есть возможность использовать атрибуты для WAI-ARIA, чтобы сделать веб-страницу более доступной, например, с основными ролями .
В нем также представлен ряд API для упрощения создания веб-приложений :
- API 2D-рисования с элементом canvas.
- API для воспроизведения видео и аудио с элементами видео и аудио.
- API, который позволяет автономные веб-приложения.
- API, который позволяет веб-приложению регистрироваться для определенных протоколов или типов носителей.
- Редактирование API в сочетании с новым глобальным атрибутом contenteditable.
- API Drag & Drop в сочетании с перетаскиваемым атрибутом.
- API, который раскрывает историю и позволяет добавлять страницы к ней, чтобы предотвратить взлом кнопки «Назад».
- Перекрестный обмен сообщениями с PostMessage.
Другие вещи, которые изначально были в спецификации, но разбиты на отдельные спецификации:
- API для геолокации
- Веб-хранилище.
- Веб-работники.
- querySelectorAll.
В общем, много хороших новых вещей и технологий, которые помогут нам сформировать будущее Интернета. Как вы можете видеть, некоторые из вышеперечисленных вещей приведены в реальной спецификации HTML5, некоторые другие разбиты на собственные спецификации. Подумайте об этом, как с AJAX: когда этот термин и шумиха обрушились на мир, все, что было хоть каким-то образом связано с JavaScript, считалось AJAX.
В значительной степени это касается HTML5: для большинства людей этот термин обычно означает, что вы используете новые современные технологии для создания веб-сайта; в действительности это может быть «просто» HTML с некоторыми новыми семантическими улучшениями, или это может быть феерия с новыми API в сочетании с JavaScript.
Я думаю, что лучший документ для понимания изменений — это отличия HTML5 от HTML4 , которые будут охватывать:
- Открытые вопросы
- Обратная совместимость
- Модель развития
- Влияние на веб-архитектуру
- Кодировка символов
- DOCTYPE
- MathML и SVG
- Новые элементы
- Новые атрибуты
- Измененные элементы
- Измененные атрибуты
- Отсутствующие элементы
- Отсутствующие атрибуты
- Расширения к HTMLDocument
- Расширения для HTMLElement
Обратная совместимость и прогрессивное улучшение
Я думаю, что одной из основных причин принятия HTML5 является то, что он имеет обратную совместимость и работает с веб-браузерами, которые уже есть на рынке, и в течение некоторого времени тоже. Это делается с помощью новых элементов, которые, как правило, не имеют особого внешнего вида или поведения, связанного с ними, а скорее предлагают больше семантического богатства, а затем вы можете стилизовать их с помощью CSS в соответствии с вашими предпочтениями.
Другие части — это новые элементы, которые были реализованы в некоторых веб-браузерах, а не в других, где в игру вступает подход прогрессивного улучшения, который долгое время проповедовался. Это означает, что используйте новые элементы, которые дадут более богатый опыт в некоторых веб-браузерах, тогда как в других будут использоваться материалы по умолчанию.
Пример в вопросе: каскад новых типов элементов ввода:
- телефон
- поиск
- URL
- электронное письмо
- Дата и время
- Дата
- месяц
- неделю
- время
- Дата и время-местный
- число
- спектр
- цвет
До сих пор WebKit и Opera были наиболее загруженным механизмом рендеринга для реализации некоторых из них, особенно в связи с работой Opera с поддержкой WebForms 2.0, но в других веб-браузерах он будет возвращаться к обычному типу ввода type = «text». Это означает, например, что input type = «search» обеспечит тонкий, но лучший пользовательский опыт в Safari и Google Chrome, но будет полностью функциональным для всех остальных.
Красота прогрессивного улучшения. 
Введение в HTML5 код
Давайте перейдем к некоторому введению в код и тому, что вам нужно знать, когда вы начинаете кодировать HTML5.
Параметры синтаксиса
Тип документа для HTML5 выглядит следующим образом:
1.
<! DOCTYPE html>
Нет версий, нет избыточной информации. Все прогрессивные улучшения на уровне функций, в отличие от готовых выпусков, которые должны быть реализованы.
И, чтобы быть немного более прагматичным, чем раньше, HTML5 позволит как быстро закрывать пустые теги (такие как ввод, ссылка и т. Д.), Но вы можете использовать эти элементы так же хорошо, не закрывая их быстро. Цитаты для атрибутов также необязательны, и знаете что? Вы даже можете использовать заглавные буквы для имен ваших элементов, которые вы будете!
Все эти примеры являются действительными HTML5:
<DIV>A monkey</DIV>
<p id=john>John's P</p>
<input type=text>
<input type="text">
<input type="text" />
This might be scary to some people, and I agree with the concerns the HTML5 Super Friends presented, where they want a way to, in a more stricter way, be able to validate the consistency of the code. However, with all different people’s coding styles and our legacy, allowing this freedom was probably the only pragmatic option to get people along, instead of fighting battles that will never be won.
It should also be noted that it is not needed to specify the type attribute for style or scriptelements; it is automatically assumed to be CSS respectively JavaScript.
And, a great thing is that you can now wrap entire blocks with an a element to make that entire block a link to somewhere!
HTML or XHTML
I should also mention that there are two options to serve HTML5 content: as HTML or XHTML. The somewhat confusingly named XHTML5 differs a bit from HTML5, though:
- No doctype is needed, just an XML prolog.
- It must have a namespace: <html xmlns=»http://www.w3.org/1999/xhtml»>
- It must be served with either of these MIME types: application/xhtml+xml or application/xml.
- The noscript element can not be used.
New elements
Lot’s of the research behind HTML5 has been how people name their elements, with IDs and classes, and part of the result are new elements named/inspired by those. There are a lot of new elements in HTML5, where these are probably the most interesting as you can use them right away in any web browser.
- article
- Mark up parts of the content that is independent, for instance blog post, article etc.
- aside
- Used to mark up relevant additional information, like a sidebar.
- audio
- Used for natively including audio in a web page.
- footer
- The counter-part to header; could be used for any footer section per context.
- header
- Used for headers in its context. Note: not just for the header of a page, but also for each header part in section, article and similar.
- hgroup
- Used for grouping several headers, for instance, a main heading and a sub-heading.
- nav
- Used for marking up main navigation.
- section
- Mark up a generic document section. Easily confused with article, and on top of that you nest either of them, in any order, with the other.
- time
- Used to mark up a time or date.
- video
- Used for natively including video in a web page – lots of interesting work is coming along here in terms of web browser support.
HTML5 examples
Let’s get down to some actual code and see what an HTML5-coded web page could look like. I have put together a simple HTML5 example with new elements and WAI-ARIA landmark roles as part of my HTML5 demos page (quite sparse now, I know, but I will incrementally add examples to it).
This is the complete source code of that web page:
As you can see, it looks more or less than every other HTML web page you have ever seen, but with just a few new HTML elements being used and the role attribute with landmark roles for WAI-ARIA to make it more accessible.
If you want a more real-world example, just view the source code of robertnyman.com: I have now rewritten it as HTML5!
Can I use it today?
I would say yes!
There was some wild speculation about the date 2022, because one of the main men behind the work with HTML5 and the specification was asked in in an interview about HTML5 and its timeline, and the date 2022 was mentioned. Then everyone assumed that HTML5 wouldn’t be ready until 2022, which is not was addressed, but rather when web browsers would have two releases with completely full support for HTML5 (compare that to CSS 2.1 support etc and the time it has taken, and you will probably get a more sane reaction). Read more about in 2022, or when will HTML 5 be ready? if you want to know more.
But let’s go through the pros and cons, and I will explain why HTML5 is ready to be used.
Pros
- Major players using it
-
To begin with, a lot of major players have already started implementing it.
Google.com already have the HTML5 doctype (although they should really improve the markup accordingly), the new hyped
Google Wave is revolving a lot around HTML5 and related APIs (which ironically uses a HTML4 Strict doctype…) and there is also a
YouTube HTML5 demo page. - Strict rendering
- The HTML5 doctype will trigger the strictest rendering in all web browsers. No Almost Standards Mode, no quirks; strict all the way, which is the way we want, and the way it should be.
- Progressive enhancement
- You can start today just by changing the doctype. Then gradually move onto exchanging some structure elements, sprinkle it with some WAI-ARIA etc and before you know it, you have a fantastic HTML5 page!
- Validation available
-
Now even the
W3C Validator supports HTML5. Just use the
Firefox Web Developer Extension to validate your HTML against it. The
HTML Validator extension unfortunately doesn’t support it yet, but I know there are at least plans to include this – if you have any ides or input, please help him out. - SEO
- It probably doesn’t matter much right now, but in the future, I think that web sites that are marked up in a much more rich fashion with new HTML5 elements to give them the multitude they need, will benefit a lot from this.
Cons
Ah, right, drawbacks. There are always some, isn’t there?
Internet Explorer
It probably doesn’t come as a shock to you, but Internet Explorer, all current versions (yes, including IE8 as well) has a little issue: it won’t apply any CSS to an unknown element (e.g. nav, section etc).
However, Sjoerd Visscher found out that with an HTML5 Shiv, sort of an electrical shock for IE to start rendering things at least a little bit more properly, you can address that problem.
The gist of it is that you need to call document.createElement with the name of each new HTML5 element you use in the page. You don’t need to use it to append or place those element, just call it to make IE aware of them. Remy Sharp has written a little HTML5 enabling script for Internet Explorer, version 6 to 8 which works in all possible cases.
People eager for HTML5 has argued that we will need script dependency for IE to render styling for those elements, otherwise it will render unstyled, but with the content still fully accessible. While I agree in theory, I think it is, at times, an unnecessary requirement for using HTML5.
Another option is the content negotiation approach, where we on the server exchange the new elements for old ones just for Internet Explorer. It’s simple: just have a regular expression to replace all block elements (header, footer, section etc) with div elements, and the inline ones (time, mark etc) with span elements.
Together with that, always style you elements through their id attribute or class value, and you are good to go! All modern web browsers + screen readers + search engines will get rich HTML5 markup; IE will get plain old HTML.
The drawback of the first option is script dependency to get correct styling for the new HTML5 elements; the drawback with the other approach could be duplicating CSS and JavaScript code. Therefore, consider the options and choose the approach you deem most suitable.
Specification discussions
There are still some discussions about some elements in HTML5 and how they should be specified, what existing options/combinations there are that will work in existing user agents (which is a must; it can’t break things). Overall, though, I’d say use the new parts everyone agrees about and that will work, and hold on with the bells and whistles until it’s ready.
The last call for the HTML5 working draft is in October this year. The future is already here.
Where we are today on the web
I for one is really happy that this is finally becoming true and usable. Sure, as always there are a number of issues and things to discuss, but overall we really need this as web developers. We need new elements, APIs and options to create dazzling web sites, and we have been waiting so long for something new at all.
I also think this is vital for the climate of the web, to have open standards to code after, and to compete with the ever-growing closed-in and proprietary technologies that try to claim the web as their own.
Have me do a presentation
If you found all this to be immensely interesting, and would like to discuss it in real life or hear more, please contact me if you want me to talk at a conference, your company or similar!