КАРТА САЙТА

HTML

CSS

PHP

ССЫЛКИ

HTML 5 — обзор грядущей новой спецификации


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

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

Новый доктайп и способ указания кодировки в HTML5

В отличие от существующих громоздких доктайпов, объявление 5-ой версии кратко и лаконично:

<!doctype html>

Это связано с тем, что HTML5 больше не является частью SGML, теперь это самостоятельный язык разметки.

Объявление кодировки в HTML5 так же притерпело изменения. Выглядит оно теперь вот так:

<meta charset="UTF-8">

Новая структура в HTML5

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

<section> — для каких-то частей страницы;
<header> — заголовок страницы;
<footer> — футер страницы;
<nav> — навигация;
<article> — статья или основной контент;
<aside> — дополнительный контент;
<figure> — определяет картинку, сопровождающую статью.

Новые строчные элементы в HTML5

Эти элементы определяют основные семантические объекты страницы:

<mark> — указывает на элемент, который взаимодействует с какой-то функцией;
<time> — выделяет дату или время;
<meter> — какие-либо метрические данные или характеристики;
<progress> — показывает процесс выполнения задачи (функции, например).

Новые типы полей форм в HTML5

HTML5 по-прежнему поддерживает все основные типы полей форм, добавив при этом и некоторые новые: 

datetime
datetime-local
date
month
week
time
number
range
email
url

При этом из HTML5 исчезли некоторые теги

В новой спецификации больше нет некоторых тегов — некоторые из них сами по себе уже устарели и мало, кто их использует. Но, были так же удалены и некоторые довольно популярные теги. Вот полный список:
acronym
applet
basefont
big
center
dir
font
frame
frameset
isindex
noframes
noscript
s
strike
tt
u

HTML 5 test позволит проверить поддержку браузером новых веб-стандартов

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

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

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

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

Новое в CSS 3: background- clip: text

Пока вебмастера спорят о браузерах и стандартах, WebKit занимается делом :) На этой неделе разработчики CSS3 представили новое свойство, названное background-clip:text, которое позволяет наложить любой фон/изображение на текст, границы и даже тень, при этом не перекрывая их, а реализуя нечто похожее на функцию наложения маски в Photoshop.

Код выглядит так:

< style>
div {
background: url(green-background.png), black;
border:5px solid black;
padding:5px;
-webkit-background-clip: text, border;
color: transparent;
}
</style>
<div>
Hello, world! <!--This background clips to the text.-->
</div>

результат


Сайт создан в системе uCoz