HTML 4 с нами уже примерно 10 лет. За это время не было серьезных шагов по его усовершенствованию. Конечно, появился XHTML, однако, он просто ужесточает правила и заставляет писать лучший и более качественный код. При этом, вы полностью заботитесь о соответствии стандарту. HTML 5 же призван сделать большее. Он добавляет серию очень важных нововведений.
Работа над HTML5 началась еще в далеком 2004-м, но только сейчас он начинает вызывать серьезный интерес. Увеличивается поддержка браузеров, а элемент, который многим больше всего нравится (CANVAS), поддерживается 4-мя из 5-ти наиболее распостраненных браузеров. Вместе с тем не совсем реально, хотя и возможно, использовать HTML 5, так как новый стандарт не поддерживается в MSIE.
Итак, что же нового в HTML 5?
<canvas>
<canvas> - это поле для рисования двухмерной графики, управлямый с помощью JavaScript. Вы можете использовать его для построения графиков и других динамических изображений.
Тег <video> упрощает добавление видео клипов на HTML-страницы. Он может содержать атрибуты src, autoplay и loop. Тег <video> также допускает задание текстового описания для видео (например, для незрячих людей). В идеале это должна быть полная текстовая интерпретация видео.
Тег <audio> очень похож на <video>, но предназначен для аудио-файлов. Неожиданно, не правда ли?
HTML5 также предусматривает метод для простого добавления на веб-страницу контекстных меню. Возможно, такие меню не слишком полезны для обычных сайтов. Зато для приложений, в которых множество функций хотелось бы сгруппировать и отображать контекстно, такая возможность в самый раз.
Так как HTML 4 слабо структурирован, в 5-ю версию спецификации были добавлены новые элементы, призванные исправить этот недостаток:
<section> - секция, либо параграф.
<header> - верхний колонтитул страницы (не путать с <head>)
<footer> - нижний колонтитул страницы.
<nav> - содержит набор ссылок на другие страницы. Например, вы можете расположить там навигацию по вашему сайту.
<article> - в этот тег может быть включена, например, статья блога.
<aside> - может быть использован для предоставления дополнительной информации к текстовому блоку.
<figure> - может быть использован, например, для создания диаграмм.
Новые inline-элементы
Стандарт HTML5 вводит новые элементы, которые позволяют специальным образом выделять фрагменты текста, содержащие время и числа:
<mark> - помечает фрагмент текста. Можно, например, отметить найденные термы в списке результатов поиска.
<time> - можете использовать этот тег для вывода времени или даты в текстовом блоке.
<meter> - для представления чисел в определенном диапазоне. Он может иметь различные атрибуты: value, min, max, low, high и optimum.
<progress> - может быть использован для отображения индикатора состояния процесса. Имеет пару атрибутов: value и max.
Новые типы полей ввода
HTML5 добавляет ряд новых типов для полей ввода данных:
datetime
datetime-local
date
month
week
time
number
range
email
url
Некоторые из них широко применяются в пользовательских интерфейсах desktop-приложений. И, вероятнее всего, они будут уже хорошо знакомы всем вашим пользователям.
Устаревшие (deprecated) элементы
Следующие элементы HTML считаются устаревшими:
acronym
applet
basefont
big
center
dir
font
frame
frameset
isindex
noframes
noscript
s
strike
tt
u
Синтаксис для задания кодировки
Синтаксис для задания кодировки документа в HTML5 теперь выглядит очень просто: <meta charset="UTF-8">
или <META http-equiv=Content-Type content="text/html; charset=windows-1251">
Интерактивные нововведения
Несколько нововведений, которые сделают создание сайтов и web-приложений проще и приятнее:
<details> - дополнительная информация о чем либо. Например, данный тег может быть использован в браузерах для реализации подсказки. Тег может иметь атрибут open, указывающий будет ли содержимое тега изначально показано пользователю или нет.
<datagrid> - В отличие от традиционных таблиц (которые задуманы как статические), этот тег может быть использован для представления интерактивного набора данных. Например, для таблицы с выбором строк или колонок, inline-редактированием данных, сортировкой и т.п.
<menu> - ранее нерекомендуемый, тег <menu> вернулся в стандарт HTML5 в новом обличии. Теперь он может содержать, например, элементы <command>, которые вызывают соответствующие команды. Этот элемент можно использовать для представления панели инструментов или контекстного меню (см. выше). Тег может иметь атрибуты label и icon. Они могут быть добавлены для создания многоуровнего меню.
Новое определение типа документа (DTD)
В HTML5 стало гораздо проще объявлять DTD: <!doctype html> Объявление DTD стало более симпатичным и, я полагаю, проще запоминающимся. Скорее всего, это является результатом того, что HTML больше не связан с SGML.
Необязательный href в ссылках
Атрибут href теперь необязательный, поскольку ссылки могут использоваться в сочетании со сценариями. Вероятно, это будет полезно в web-приложениях.
Атрибут async
Атрибут дает браузеру подсказку, что блок сценария может выполняться асинхронно, вместо того, чтобы ждать, пока страница не загрузилась полностью.
Заключение
HTML5 может по праву считаться усовершенствованием стандарта HTML, которого мы так долго ждали. Он вносит полезные дополнения в язык и делает создание веб-приложений более простым и приятным.
Естественно, не все браузеры будут поддерживать весь стандарт целиком (думаю, читатель сейчас вспомнил о "любимом" MSIE). Но поддержка появится со временем. И новые элементы HTML 5 были разработаны с учетом текущей ситуации. С другой стороны, большинство браузеров уже частично поддерживают спецификацию. Так, например, тег <canvas> поддерживается в Firefox, Opera, Chrome и Safari. Плюс, на сколько мне известно, Firefox 3.6, IE9 будет поддерживать теги <audio> и <video>.
HTML5 язык разметки
HTML — язык, объединяющий всемирную сеть. Всего лишь посредством набора простых тегов, человечеству удалось создать несравнимую ни с чем по своим масштабам систему связанных между собой страниц и веб-узлов: от Amazon, eBay и Википедии, до личных блогов и сайтов, посвященных котам, похожим на Гитлера.
HTML5 — свежайшая версия этого языка. Но несмотря на то, что она собирается принести с собой значительные изменения и новые возможности, нельзя сказать, что подобное происходит впервые и до этого язык никак не развивался. Развивался и постоянно улучшался, причем с самого своего появления.
Как и всемирная сеть вообще, HTML — язык разметки гипертекста (HyperText Mark-up Language) — является детищем сэра Тима Берненс-Ли (Sir Tim Berners-Lee). В 1991 году он написал работу, озаглавленную «HTML Tags», в которой описал чуть меньше двух дюжин тегов, предложенных им для разметки веб-страниц.
Идея использовать для этого кодовые слова внутри треугольных скобок, впрочем, не принадлежит сэру Тиму. Такая система на тот момент уже существовала и использовалась в SGML (Standard Generalised Markup Language, стандартный обобщённый язык разметки), и вместо того, чтобы изобретать что-то с нуля, сэр Тим посчитал более рациональным взять за основу уже существующие решения. Аналогичный подход применялся и вообще на всем пути к HTML5 в процессах разработки.
От IEFT к W3C: дорога к HTML 4
Версии HTML 1 никогда не существовало. Первой официальной спецификацией был сразу HTML 2.0, и издала его организация IETF (Internet Engineering Task Force, Специальная комиссия интернет-разработок). Многие из возможностей языка, описанных в этой спецификации, были основаны на уже используемых сторонних разработках. Например, тег <img> для вставки картинок на страницы был реализован в лидирующем на тот момент (мы говорим о 1994 году) браузере Mosaic, и потом просто перекочевал в стандарт для HTML 2.0.
Эстафету IEFT позже подхватил W3C (World Wide Web Consortium, Консорциум Всемирной Паутины), который и занимался всеми последующими версиями HTML. Во второй половине девяностых велась активная работа над пересмотром и изменением спецификаций, которые в конце концов (точнее, в 1999 году) дали жизнь HTML 4.01.
После этого в истории HTML наступил первый ключевой поворот.
XHTML 1: HTML в виде XML
Новая версия языка разметки после HTML 4.01 была названа XHTML 1.0. «Икс» в названии означал eXtreme, и веб-разработчики были обязаны скрещивать перед собой руки каждый раз, когда произносили это слово.
Нет, конечно нет. На самом деле «икс» означал eXtensible («расширяемый»), а скрещивание рук было по желанию.
Сама по себе спецификация для XHTML 1.0 ничем не отличалась от HTML 4.01. Не добавилось никаких новых тегов или параметров — разница была лишь в правилах синтаксиса. Если в HTML разработчикам была дана полная свобода относительно стиля написания кода, в XHTML требовалось соблюдать правила языка XML, — куда более жесткого и нетерпимого к вольностям, — на котором основывалось большинство разрабатываемых Консорциумом технологий.
Жесткие правила, впрочем, пришлись как раз кстати. Они побуждали кодеров придерживаться единого стиля, например — писать все теги и параметры исключительно в нижнем регистре, тогда как в HTML можно было делать как придется.
Выход XHTML 1.0 совпал с возросшим уровнем поддержки современными браузерами таблиц стилей — CSS, — и строгий синтаксис XHTML укрепился в сообществе разработчиков с репутацией лучшего способа написания кода разметки.
Потом был XHTML 1.1.
Если версия 1.0 была просто HTML, сделанным под XML, то XHTML 1.1 — это уже настоящий, чистый XML. В том смысле, что к нему уже нельзя было применить mime-type text/html и нужно было обозначить документ как отформатированный в XML. Однако в том случае его никак не смог бы отобразить самый популярный на тот момент браузер — Internet Explorer, — так что применять на практике этот язык было явно не вариантом.
Создавалось впечатление, что W3C в свои разработках начинает терять связь с реальностью, по которой жила всемирная сеть.
XHTML 2: нет, это уже ни в какие ворота не лезет
Если бы герой Дастина Хоффмана из фильма «Выпускник» был веб-дизайнером, W3C сказал был ему только одно слово: XML.
Консорциум был уверен, что HTML изжил себя после четвертой версии, и начал работу над XHTML 2, задачей которого было привести сеть к светлому XML-ному будущему. И несмотря на то, что название осталось прежним, новая версия не имела абсолютно ничего общего с XHTML 1. Более того, она не собиралась быть обратно-совместимой со своими предшественниками и старыми версиями HTML (а значит — всем существующим содержимым сети). Вместо этого она должна была представить новый чистый язык, не отягощенный никакими пережитками прошлых спецификаций.
Иными словами, это был бред.
Раскол: W(HATWG) TF?
В среде Консорциума назрело восстание. Было очевидно, что он собирается вести разработку стандартов, — пусть новых, чистых и прекрасных, — но совершенно не отвечающих нуждам современного сообщества веб-дизайнеров и разработчиков. Opera, Apple и Mozilla были явно от этого не в восторге, так как ожидали совершенно другого — больше упора на форматы, позволяющие расширить возможности для создания веб-приложений.
Начало переменам было положено в 2004 году на одном из собраний. Ян Хиксон (Ian Hickson), который на тот момент был сотрудником Opera Software, выдвинул предложение заняться развитием HTML до уровня, позволяющего использовать этот язык для веб-приложений. Предложение было отклонено.
Разочарованные бунтари вынуждены были отколоться от Консорциума и организовать собственную группу: Web Hypertext Application Technology Working Group, сокращенно WHATWG.
От Web Apps 1.0 к HTML5
Принцип работы WHATWG несколько отличался от того, что был в W3C. В W3C вопросы поднимаются, обсуждается, и конечное решение выносится всеобщим голосованием. В WHATWG вопросы так же поднимаются, обсуждается, но окончательные решения относительно того, что включается в спецификацию, а что нет, остаются за главным редактором — Яном Хиксоном.
С виду может показаться, что система в W3C более демократична и честна, но практика показывает, что бесконечные споры и внутренние перебранки жутко тормозят процесс развития. В WHATWG, где каждый может внести свой вклад, но последнее слово остается за Главным, дела движутся куда быстрее. Главред, впрочем, и не обладает абсолютной властью — избранная группа руководящих лиц может оспорить его решение в том маловероятном случае, если оно того требует.
Первоначально, WHATWG было занято двумя спецификациями — Web Forms 2.0 и Web Apps 1.0, — обе из которых должны были стать расширениями для HTML. Но со временем они были объединены в одну общую, названную просто HTML5.
Воссоединение
В то время как в WHATWG работали над HTML5, W3C продолжал канителиться со своим XHTML 2. Нельзя сказать, что вся эта затея скатывалось в говно. Она в него медленно-медленно погружалась.
В октябре 2006-го сэр Тим Бернерс-Ли признал в своем блоге, то идея перевести сеть с HTML на XML была глупой. Спустя несколько месяцев W3C выдал новую установку для HTML Working Group: было разумно решено, что будущие версии HTML следует основать на наработках WHATWG, вместо того, чтобы делать что-то с нуля.
Все эти развороты и смены курса привели к несколько запутанной ситуации. Какое-то время W3C одновременно работал над двумя совершенно несовместимыми языками разметки — XTHML 2 и HTML 5 (обратите внимание, с пробелом), — в то время как WHATWG, отдельная организация, занималась спецификацией HTML5 (без пробела), которая должна была стать основой для другой спецификации в W3C. Хрен срастишь тут, что к чему. Проще было заняться разгадкой последовательности событий в «Мементо» и работах Дэвида Линча.
XHTML мертв, да здравствует синтаксис XHTML
Ситуация начала проясняться в 2009-ом, когда W3C объявил, что обновлений по XHTML 2 больше поступать не будет. По сути, они просто официально признали, что формат был мертв с самого рождения.
Однако, странным образом, вместо того, чтобы обойтись без лишнего внимания, смерть XHTML 2 породила какие-то злорадные бурления. Противники XML превратили новость в призыв отказаться от XHTML 1, хотя с XHTML 2 тот, как мы знаем, не имел ничего общего. В свою очередь сторонники XHTML 1, адепты строгого синтаксиса, были обеспокоены тем, что HTML5 вновь узаконит небрежную верстку.
Последнее, впрочем, не должно казаться серьезной проблемой — как мы рассмотрим далее, степень сторогости синтаксиса HTML5 каждый вправе выбрать для себя самостоятельно.
Развитие HTML5
Текущее состояние HTML5 не настолько туманное как раньше, но и все еще не слишком прозрачное.
Две организации сейчас работают над этим форматом. В WHATWG разрабатывают спецификацию, основываясь на принципе «сначала запустить, потом проверять». W3C HTML Working Group в свою очередь берет эту спецификацию и пропускает ее через процесс «сначала проверить, потом запустить». Как видно, такое сотрудничество вряд ли можно назвать крепким и эффективным. Но по крайней мере, вроде как разрешился вопрос «ставить или не ставить пробел» в названии стандарта (ставить его не надо, если что, — HTML5).
Что сейчас больше всего волнует веб-дизайнеров, которые уже опробывали некоторые из возможностей нового языка, это вопрос «Когда это будет готово?» В одном из интервью Ян Хиксон упомянул 2022-ой год как дату, когда HTML5 получит статус «proposed recommendation». Это вызвало волну возмущения среди дизайнеров, так как они понятия не имели, что значит «proposed recommendation», но точно знали, что им явно не хватает пальцев посчитать, сколько лет надо еще ждать до 2022-го.
Если разобраться, возмущения необоснованы. В данном случае «proposed recommendation» означает, что к этому времени в браузерах должна быть полная поддержка всех возможностей языка. В этом случае ориентироваться на 2022 даже слишком смело; мы все знаем, что многие браузеры с трудом подхватывали в свое время даже существующие стандарты. Взять хотя бы Internet Explorer, которому понадобилось больше десяти лет, чтобы начать элементарно поддерживать тег.
Дата, на которую действительно надо ориентироваться, это 2012 год, когда HTML5 будет присвоен статус «candidate recommendation», означающий, что спецификация окончательно сформулирована и как таковой стандарт готов.
Но, ясное дело, это не будет означать, что все из него будет сразу доступно к применению — нужно будет следить за тем, как браузеры постепенно добавляют поддержку тех или иных фич и начинать их использовать по мере появления. Точно так же было с CSS 2.1, на самом деле: мы начали применять возможности этого стандарта по мере того, как браузеры включали его поддержку по частям. Если бы мы предпочли ждать, когда они реализуют его целиком, мы бы ждали до сих пор.
Иными словами, не будет такого момента, когда можно будет сказать «Бах, время HTML5 пришло!». Но начинать работать с ними можно уже сейчас. Благо, язык этот получил рождение не через революцию, а в процессе эволюции, и основывается на том, что было создано до него. Таким образом, можно сказать, что если вы пользуетесь любыми предыдущими версиями HTML, вы уже пользуетесь HTML5.
Модель HTML5
Великая Французская революция была временем радикальных политических и социальных преобразований. Времени как такового они тоже коснулись: в определенный период своего существования Французская Республика жила по новой системе — в сутках было 10 часов по сто минут каждый. Очевидно, что она была была куда логичнее и «правильнее» привычной шестидесятеричной.
Вместе с тем, она была полным провалом. Никто ей не пользовался.
То же самое можно сказать и про XHTML 2. W3C только лишний раз доказал то, чему нас научил урок послереволюционной Франции: изменить привычки людей по приказу очень-очень трудно.
Принципы модели
Поставив себе целью избежать ошибок прошлого, WHATWG в первую очередь определила набор принципов, которым должен следовать процесс работы над HTML5. Один из ключевых: «Поддерживать то, что уже существует». Это еще одна причина почему для HTML5 нет четкой даты вступления в действие.
Тогда как XHTML 2 намеревался забить на все, что было до него, и начать по-новой, HTML5 — это надстойка для существующих спецификаций. В нем сохранилось и поддерживается многое из HTML 4.01.
Некоторые из других принципов: «Не изобретать велосипед» и «Мостить натоптанные тропы». Последний означает, что если среди веб-дизайнеров есть какой-то широко распространенный и популярный способ решать определенную проблему или задачу — даже если он не самый лучший — его следует принять во внимание и добавить в спецификацию. Можно еще сказать: «Не чинить то, что не сломано».
Многие из этих принципов вам могут быть знакомы, если ранее вы имели дело с . В среде HTML5 принят такой же прагматичный подход без лишнего превозношения теории.
Эта философия сформулирована в принципе о «Порядке важности составляющих», который гласит: «В решении какого-либо конфликта нужно думать в первую очередь о пользователях, потом о кодерах, потом о реализаторах, потом об авторах спецификаций, потом уже о теоретической чистоте и "правильности"».
Ян Хиксон много раз обращал внимание на то, что разработчики браузеров («реализаторы») могут сильно влиять на что попадает в HTML5, а что нет. Если какой-то браузер отказывается включать поддержку определенной возможности, нет смысла добавлять ее в спецификацию, иначе та просто не будет связана с реальностью. В этом плане, согласно порядку важности составляющих, мы, веб-дизайнеры, имеем еще больше влияния. Если мы сочтем часть спецификации ненужной или неправильной и не будем ее использовать, она точно так же перестанет быть связаной с реальностью и потребует пересмотра.
Без крайностей
Разработка HTML5 сопряжена с постоянным внутренним напряжением и противоречием. С одной стороны, спецификация должна быть достаточно функциональной и мощной, чтобы стать надежной платформой для создания веб-приложений. С другой стороны, HTML5 должен быть способен поддерживать уже существующее содержимое сети, даже если там по нынешним сплошной беспорядок и месиво в коде. Если спецификация отклонится слишком сильно в одно направление, ее ждет судьба XHTML2. Если в другое — краеугольным камнем снова станут тег и таблицы как средство разметки, ведь с их помощью, в конце концов, построено огромное количество существующих веб-страниц.
Потому так важно придерживаться четкого и выверенного баланса вещей, в котором требуется прагматичный и холоднокровный подход.
Обработка ошибок
Спецификация HTML5 не просто указывает браузерам, как им нужно отображать соответствующую стандартам верстку, — впервые в истории этого языка, она так же определяет пути, по которым те должны работать с плохой версткой.
До сего времени, разработчики браузеров сами решали, как они будут обрабатывать ошибки. В большинстве случаев они просто следовали того пути, по которому шел наиболее популярный браузер, что во многом лишняя трата времени. Вместо того, чтобы добавлять поддержку новых фич, они копировали подходы своих конкурентов к обработке некорректного кода.
Решение ввести стандарты для этой процедуры в HTML5 очень амбициозно. Даже если бы набор тегов и атрибутов в этой версии ничем не отличался от того, что в HTML 4.01, разработка одного только единого свода правил обработки ошибок к 2012-ому году была бы все равно что сизифов труд.
Эти правила, впрочем, будут малоинтересны веб-дизайнерам (ведь мы все пишем валидный, грамотно структурированный код, верно?), но они чрезвычайно важны для разработчиков браузеров. Тогда как все прошлые спецификации писались только для кодеров, HTML5 написан для кодеров и реализаторов. Имейте это в виду, если решите ознакомиться с ней непосредственно, — это объясняет, почему она такая безразмерно большая и включает такое количество подробностей и нюансов, что скорее походит на заметки какого-нибудь трейнспоттера, увлекающегося пересчетом содержимого личной коллекции марок во время сеанса одновременной игры в шахматы с тремя противниками.
Выкладывай, Док(тайп)
Доктайп (doctype, Document Type Declaration) — традиционный способ указывать тип языка разметки, который используется на данной странице.
Совершенно нечитаемо для человека, но, как ни крути, эдакий способ по-своему сказать просто «Эта страница написана на HTML 4.01» или «Эта страница написана на XHTML 1.0».
Можно предположить, что для HTML5 должно быть что-нибудь подобное с цифрой пять воткнутой где-нибудь. Как ни странно, нет:
Наконец-то это можно будет выучить наизусть.
Но, блин, как это так? Тут не указан номер версии, как же мы будем обозначать последующие инкарнации HTML? Когда я впервые увидел этот новый вид доктайпа, я подумал «Что за блажь, они действительно хотят этим сказать, что это финальная версия языка разметки, после которой уже ничего никогда не будет нужно?»
На самом деле, идея проста и очень прагматична. Задача HTML5 — поддерживать существующие HTML 4.01 и XHTML 1.0 страницы, и этого доктайпа им хватит. Новые версии HTML, в свою очередь, должны будут поддерживать HTML5, оттого включать в него постоянно порядковый номер совершенно бессмысленно.
А вообще, и доктайпы сами по себе то и не так важны. Скажем, написали вы страницу с доктайпом от HTML 4.01, а потом взяли и добавили туда элементов из другой спецификации — пусть HTML 3.2, пусть HTML5, не суть. Браузер все равно никуда не денется и обработает их как умеет. Браузеры поддерживают элементы и фичи, а не доктайпы.
Последние были разработаны в первую очередь для валидаторов, не для браузеров. Единственный случай, когда те обращают на доктайп внимание, это когда нужно решить, какой метод рендеринга использовать — внутренний индивидуальный или согласующийся со стандартами.
Так что единственная цель доктайпа для HTML5 — убедиться, что браузер будет обрабатывать следующий после него код, следуя стандарту. Но для валидации его наличие или отсутствие значения не имеет.
Незачем усложнять
В HTML5 упростили не только доктайп. Если вы хотите обозначит кодировку для своей страницы, лучший способ это сделать — убедиться, что сервер отдает корректное значение в Content-Type. Чтобы быть совсем уверенным, можно воспользоваться тегом . Так это было раньше:
Так это в HTML5: Как и в случае с доктайпом, здесь ничего лишнего — только то, чего будет достаточно для браузера, чтобы понять о чем речь. Тегу Браузерам это не нужно. Они и так поймут, что код написан на Javascript — самом популярном языке скриптов в сети (да что скрывать: единственном языке скриптов): script>
Точно так же нет смысла в параметре type со значением text/css, когда вы прикрепляете таблицу стилей. Можно просто написать:
HTML5 Синтаксис
Некоторые языки программирования, например Python, очень требовательны к оформлению кода: даже использование пробелов в определенных ситуациях обязательно для соблюдения правил. Другие языки, скажем Javascript, на форматирование внимания не обращают — та же отбивка начала строки пробелами никак не повлияет на код.
Если хотите разжечь лютый холивар и таким образом организовать себе веселую программу на вечер — заполните комнату программистами и произнесите слова «важны ли в коде пробелы». Не забудьте поп-корн.
Этот вопрос лежит в корне глубокой философской дилеммы: должен ли язык заставлять следовать определенному стилю оформления кода, или же можно позволить кодерам самим решать, как они его пишут?
В разметке для веб-страниц пробелы и отступы не имеют значимости. Можно добавлять каждый новый элемент с новой строки, делать отбивку табуляцией, вставлять пустые строки — браузерам и валидаторам это не важно. Однако многие другие вольности позволены не везде.
До XHTML 1.0 не имело значения, пишете вы названия тегов в верхнем или нижнем регистре. Не имело значения, в кавычках ли были значения параметров или нет. Для многих элементов не важно даже было, добавили ли вы закрывающий тег или нет.
XHTML 1.0 придерживается синтаксиса XML: теги всегда в нижнем регистре, значения параметров только в кавычках, все контейнерные элементы обязательно закрываются. И одиночные тоже — перед закрывающей скобкой должен стоять слеш (> ).
В HTML5 вы решаете сами: верхний регистр — нижний, кавычки — без кавычек, закрывающийся или нет. Как вам больше нравится.
Я пользовался доктайпом XHTML 1.0 многие годы, и мне нравится то, что там требуется следовать четким правилам для получения организованного и валидного кода. Теперь, используя HTML5, я могу продолжать делать так, как хочу и привык.
Мне понятно, почему многим такая фривольность HTML5 не по душе. Некоторые считают, что она отбрасывает нас назад, во времена порочных практик неряшливого кода, и более того — считают, что HTML5 поощряет такой стиль разметки. Я не думаю, что это так, но вижу причину беспокойства. Это как если бы язык программирования с синтаксически важными пробелами между строками стал внезапно менее требовательным.
Лично я спокойно отношусь к такой свободе выбора в HTML5, так как уже привык самостоятельно следить за стилем кода, который пишу. Было бы здорово, впрочем, иметь для этого языка такого рода инструмент, который в мире программирования зовется «lint-tool», — программу, анализирующую разметку и указывающую на распространенные и потенциально «опасные» практики оформления кода, а также непоследовательности в стиле его написания. Это несколько отличается от валидатора, который проверят код, отталкиваясь только от доктайпа. Первый, кто сможет разработать сервис, совмещающий в себе и то и другое, определенно заслужит честь и уважение со стороны мирового сообщества веб-дизайнеров.
Мы здесь так не говорим
В прошлых версиях HTML, как только определенный элемент или параметр исключался из спецификации, он проходил через процесс «изъятия». Веб-дизайнерам рекомендовалось прекратить использовать изъятые элементы, не посылать им открытки по прадникам и вообще не упоминать их в приличной компании.
В HTML5 нет изъятых элементов или параметров, вместо них только устаревшие.
Нет, это не политкорректный вариант названия для того же понятия — между изъятый и устаревший в данном случае есть важная разница.
Так как HTML5 поставил себе задачу быть обратно-совместимым с предыдущими версиями, спецификация должно признавать ранее использовавшиеся элементы, даже если HTML5 их больше не включает. Это приводит к несколько неоднозначной ситуации, когда спецификация одновременно говорит «кодеры, не используйте эти элементы» и «браузеры, вот как эти элементы нужно рендерить …». Если бы какой-то элемент был изъят, он бы не упоминался в спецификации вообще. Но так как он просто признан устаревшим, он включен туда для браузеров.
Если вы только не занимаетесь разработкой собственного браузера, для вас нет разницы между изъятыми и устаревшими элементами — вы просто их не используете и не приглашаете в гости.
Но если вы все же будете упорно продолжать их применять, ваша страница с точки зрения соответствия стандартам будет несогласующейся. Браузеры отобразят ее без проблем, но знающие люди такую практику не одобрят.
Разлука будет без печали
Признаны устаревшими теги: frame, frameset и noframes. По ним скучать не будут.
Устаревшим является тег acronym, что наконец-то положит конец длившимся годы холиварам и спорам. Не стоит его оплакивать, просто используйте тег abbr вместо него. И, да, я знаю разницу между аббревитурой и акронимом: акронимы — это аббревиатуры, которые произносятся целиком, как слово, а не по буквам (например, НАТО). Не каждая аббревиатура — акроним, но каждый акроним — аббревиатура, потому здесь достаточно одного тега.
Оформляющие элементы font, big и center тоже устарели, и, на самом деле, это случилось давно — еще с приходом CSS, где аналогичные эффекты можно назначать быстрее и легче. По тем же причинам, с нами больше нет параметров bgcolor, cellspasing, cellpadding и valign. Вместо них пользуйтесь CSS.
Не все однако из оформляющих элементов были записаны в устаревшие. Некоторые были отправлены на курсы переквалификациии и получили второй шанс.
Подмены понятий
Элемент big устарел, но вот small — нет. Такая непоследовательность оправдывается за счет того, что значение последнего было пересмотрено. Это теперь не физическое «сделать текст мельче», а семантический «мелкий шрифт». Ну, вы поняли, — условия пользования, сноски для «звездочек» и так далее.
Понятное дело, что в 9 случаях из 10 этот «мелкий шрифт» будет действительно набран мелко; смысл в том, что роль элемента теперь более смысловая, чем оформительская.
Элемент b раньше означал просто «полужирный текст». Теперь это — «текст, стилистически выделенный из основного потока, но не несущий дополнительной смысловой значимости». Когда смысловая значимость таки присутствует, скорее подойдет strong.
Так же, элемент i теперь не означает «курсивный». Это — «произнесенный другой интонаций или с другим настроением». Опять же, без особого значения или ударения. Для того, что подчеркнуть значимость, используйте элемент em.
Эти изменения могут звучать как просто игра словами. Так и есть. Но за этим стоит конкретная задача — обеспечить независимость HTML5 от устройств, на которых он обрабатывается. Когда вы говорите «полужирный» или «курсив», эти понятия имеют смысл только в визуальном плане — когда текст выводится на экран или бумагу. Но необходимо также думать об устройствах, отображающих информацию в невизуальном формате, — например, предназначенных для чтения с экрана в помощь незрячим. Плюс, описанные изменения в определениях побуждают к лучшему понимаю и применению правил семантики, а не только визуального оформления.
…конец цитаты
Значение элемента cite тоже было слегка изменено. Если раньше он означал «ссылка на источник», то теперь это — «заголовок источника». Очень часто при цитировании источником будет как раз заголовок книги, фильма или чего угодно, на что мы ссылаемся. Однако точно так же это может быть и имя человека. В HTML5, при этом, использовать личные имена внутри элемента cite противоречит спецификации.
Объясняется это так: браузеры делают содержимое тега курсивным. Заголовки работ обычно выделяются курсивом. Имена людей курсивом не выделяются. Поэтому элемент cite не должен применяться для ссылки на конкретного человека.
По-моему, это просто неправильно. Я понимаю, что HTML5 должен обращать внимание на особенности работы браузеров, но в данном случае это все равно, что лошадь, погоняющая жокея. К счастью, никакой валидатор не сможет определить, что находится внутри тега, поэтому ничто не мешает веб-дизайнерам руководствоваться здесь здравым смыслом и помещать туда то, что считается нужным.
на стероидах
Тогда как все предыдущие переосмысления значения элементов основываются исключительно на подмене понятий и игре словами, есть один элемент, который получил действительно заметные изменения.
Без сомнения, элемент a — самый важный во всем HTML. Это он превращает текст в гипертекст и делает возможным существование всемирной сети как таковой. До этого он всегда был только строковым элементом. То есть, если вы захотите сделать ссылкой заголовок и следующий за ним абзац с текстом одновременно, вам придется использовать a дважды.
Новые игрушки: API для Javascript
Если вам нужна документация по стилям, вы идете и читаете спецификацию для CSS. Если вам нужна документация по разметке, вы берете HTML-спецификацию. Но куда идти, если вам нужно узнать об API дя JS, таких как document.write, innerHTML и window.history? Спецификация для Javascript посвящена программированию, вы не найдете там никаких из API браузеров.
До настоящего момента, браузеры разрабатывали свои API для JS самостоятельно, иногда поглядывая друг другу через плечо, чтобы узнать, как там делают конкуренты. HTML5 наконец-то задокументирует эти API и установит общий стандарт.
Может показаться странным, что спецификация языка разметки будет включать в себя документацию по Javascript, но не стоит забыть, что HTML5 начинался с проекта Web Apps 1.0, а JS — неотъемлемый компонент веб-приложений.
Список тегов html 5
В данной таблице представлен список тегов поддерживающихся в HTML 5. Список редактируется - дополняется новыми тегами по мере их появления. Нажав в списке на интересующий вас тег, вы перейдете на страницу с его полным описанием.
Скрипт выполняется после того как документ напечатан
onbeforeprint
script
Скрипт выполняется до того как документ напечатан
onbeforeonload
script
Скрипт выполняется перед загрузкой документа
onblur
script
Скрипт выполняется, когда окно теряет фокус
onerror
script
Скрипт выполняется при возникновении ошибки
onfocus
script
Скрипт выполняется, когда окно получает фокус
onhaschange
script
Скрипт выполняется, когда документ изменился
onload
script
Скрипт запускается при загрузке документа
onmessage
script
Скрипт выполняется, когда сообщение срабатывает
onoffline
script
Скрипт выполняется, когда документ переходит в автономный режим
ononline
script
Скрипт выполняется, когда документ поступает онлайн
onpagehide
script
Скрипт выполняется, когда окно скрыто
onpageshow
script
Скрипт выполняется, когда окно становится видимым
onpopstate
script
Скрипт выполняется, когда история окна изменяется
onredo
script
Скрипт выполняется, когда документ выполняет повтор
onresize
script
Скрипт выполняется при изменении размеров окна
onstorage
script
Скрипт запускается при загрузке документа
onundo
script
Скрипт выполняется, когда документ выполняет "отменить"
onunload
script
Скрипт выполняется, когда пользователь покидает документ
События формы
События выполняются по действиям внутри HTML form.
Относятся ко всем элементам HTML5, но чаще всего к элементам формы:
Атрибут
Значение
Описание
onblur
script
Скрипт выполняется, когда элемент теряет фокус
onchange
script
Скрипт выполняется, когда элемент изменился
oncontextmenu
script
Скрипт выполняется, когда контекстное меню срабатывает
onfocus
script
Скрипт выполняется, когда элемент получает фокус
onformchange
script
Скрипт выполняется, когда форма изменена
onforminput
script
Скрипт выполняется, когда форма получает пользовательский ввод
oninput
script
Скрипт выполняется, когда элемент получает пользовательский ввод
oninvalid
script
Скрипт выполняется, когда элемент недействителен
onreset
script
Скрипт выполняется, когда форма сбрасывается Не поддерживается в HTML5
onselect
script
Скрипт выполняется, когда элемент выбран
onsubmit
script
Скрипт выполняется при отправке формы
События клавиатуры
События, вызываемые клавиатурой.
Относятся ко всем элементам HTML5.
Атрибут
Значение
Описание
onkeydown
script
Скрипт выполняется при нажатии клавиши
onkeypress
script
Скрипт выполняется при нажатии и отпускании клавиши
onkeyup
script
Скрипт выполняется при отпускании клавиши
События мышки
Срабатывание по мышке или аналогичные действия пользователя.
Относятся ко всем элементам HTML5.
Атрибут
Значение
Описание
onclick
script
Скрипт выполняется по щелчку мышки
ondblclick
script
Скрипт выполняется при двойном нажатии на мышку
ondrag
script
Скрипт выполняется при перетаскивании элемента
ondragend
script
Скрипт выполняется по окончании перетаскивания элемента
ondragenter
script
Скрипт выполняется, когда элемент перетащен в допустимую цель
ondragleave
script
Скрипт выполняется, когда элемент покидает допустимую цель
ondragover
script
Скрипт выполняется, когда элемент перетаскивают над допустимой целью падения
ondragstart
script
Скрипт выполняется в начале операции перетаскивания
ondrop
script
Скрипт выполняется, когда перетаскиваемый элемент отпущен
onmousedown
script
Скрипт запускается при нажатии кнопки мышки
onmousemove
script
Скрипт выполняется при перемещении указателя мышки
onmouseout
script
Скрипт выполняется, когда указатель мыши выходит из элемента
onmouseover
script
Скрипт выполняется при наведении указателя мыши на элемент
onmouseup
script
Скрипт выполняется при отпускании кнопки мышки
onmousewheel
script
Скрипт выполняется, когда колеса мышки вращаются
onscroll
script
Скрипт выполняется, когда полоса прокрутки элемента прокручивается
Собыия медиа
События срабатывание на медиа, как видео, изображение и звук.
Относятся ко всем элементам HTML5, но чаще всего к элементам медиа, как аудио, изображение, объект и видео:
Атрибут
Значение
Описание
onabort
script
Скрипт выполняется в случае отмены события
oncanplay
script
Скрипт выполняется, когда медиа может начать играть, но, возможно будет остановлено для буферизации
oncanplaythrough
script
Скрипт выполняется, когда медиа может быть проиграно до конца, без остановок для буферизации
ondurationchange
script
Скрипт выполняется, когда длина медиа изменилась
onemptied
script
Скрипт выполняется, когда ресурс медиа элемента вдруг становится пустым (сетевые ошибки, ошибки при загрузке и т.д.)
onended
script
Скрипт выполняется, когда медиа дошло до конца
onerror
script
Скрипт выполняется при возникновении ошибки во время загрузки элемента
onloadeddata
script
Скрипт выполняется, когда данные медиа загрузились
onloadedmetadata
script
Скрипт выполняется, когда продолжительность и другие данные медиа-элемента загрузились
onloadstart
script
Скрипт выполняется, когда браузер начинает загружать медиа-данные
onpause
script
Скрипт выполняется, когда медиа приостановлено
onplay
script
Скрипт выполняется, когда медиа, собирается начать играть
onplaying
script
Скрипт выполняется, когда медиа начинает играть
onprogress
script
Скрипт выполняется, когда браузер получает медиа-данные
onratechange
script
Скрипт выполняется, когда скорость проигрываемых медиа данных изменилась
onreadystatechange
script
Скрипт выполняется, когда готовое состояние изменилось
onseeked
script
Скрипт выполняется, когда атрибут медиа-элемента seeking больше не true, и поиск закончился
onseeking
script
Скрипт выполняется, когда атрибут медиа-элемента seeking равен true, и поиск начался
onstalled
script
Скрипт выполняется, когда есть ошибки в выборке данных медиа (тупик)
onsuspend
script
Скрипт выполняется, когда браузер выполнял извлечение данных медиа, но остановился перед тем как весь файл медиа был получен
ontimeupdate
script
Скрипт выполняется, когда медиа меняет свою игровую позицию
onvolumechange
script
Скрипт выполняется, когда объем звука медиа изменился, и тогда, когда объем звука установлен в положение "Mute"
onwaiting
script
Скрипт выполняется, когда медиа перестала играть, но как ожидается, возобновится
Атрибуты, перечисленные ниже, поддерживаются всеми тегами HTML 5, с некоторыми исключениями.
Глобальные атрибуты HTML5
Атрибут
Значение
Описание
accesskey
символ
Определяет сочетание клавиш для доступа к элементу
class
имя класса
Определяет имя класса для элемента (используется в таблицах стилей)
contenteditable
true false
Указывает, если пользователь может редактировать содержимое или нет
contextmenu
идентификатор меню
Указывает, контекстное меню для элемента
dir
ltr rtl
Определяет направление текста для содержания в элементе
draggable
true false auto
Указывает, разрешено ли пользователю перетаскивать элемент
dropzone
copy move link
Указывает, что происходит когда перетаскиваемый элемент/данные помещаются в элемент
hidden
hidden
Указывает, что элемент не имеет значения. Скрытые элементы не отображаются
id
идентификатор
Определяет уникальный идентификатор для элемента
lang
код языка
Указывает код языка содержания в элементе
spellcheck
true false
Указывает, если элемент должен иметь свою проверку орфографии и грамматики
style
определение стиля
Задает встроенный стиль для элемента
tabindex
число
Указывает порядок табуляции элемента
title
текст
Указывает дополнительную информацию об элементе
Глобальные атрибуты, которые могут содержать html элементы
Глобальные атрибуты поддерживаются всеми HTML элементами (за исключением нескольких тегов). Глобальные атрибуты позволяют задать дополнительные параметры для тегов. Ниже представлен список всех глобальных атрибутов, поддерживающихся в HTML5.
Атрибут
Значение
Описание
accesskey
символ
Определяет сочетание клавиш для доступа к элементу.
class
имя_класса
Определяет имя класса, указанного в таблице стилей (позволяет связать тег с определенным стилем).
contenteditable
true false inherit
Указывает, может ли пользователь редактировать содержимое данного элемента или нет.
contextmenu
menu_id
Определяет контекстное меню для элемента. Значение должно быть идентификатором для элемента <menu>.
dir
ltr rtl auto
Определяет направление текста в элементе (слева направо или справа налево).
draggable
true false auto
Определяет, может ли пользователь перемещать элемент или нет.
dropzone
copy move link
Определяет, что происходит при перетаскивании элемента.
hidden
hidden
Указывает, что данный элемент должен быть скрытым от просмотра.
id
id
Определяет уникальный идентификатор для элемента.
lang
код_языка
Определяет язык содержимого в элементе (используется для правильного отображения некоторых национальных символов).
spellcheck
true false
Указывает браузеру проверять или нет данный элемент на правописание и грамматику в тексте.
style
свойства
Задает встроенный стиль для элемента.
tabindex
число
Указывает порядок перехода между элементами (при использовании клавиши "tab").
title
текст
Указывает дополнительную информацию об элементе (отображается браузерами в виде всплывающей подсказки).
События html, используемые языком javascript при написании обработчиков событий
События HTML 5 - это специальные глобальные атрибуты, используемые в тегах для вызова обработчиков событий, написаных на различных языках сценариев таких, как javascript и вызываемых, когда на странице происходит какое-либо действие. События позволяют сделать вашу страницу динамической.
Атрибуты событий окна
События, вызываемые на объект окна (применяются с тегом <body>):
Атрибут
Значение
Описание
onafterprint
скрипт
Скрипт запустится после того, как документ будет распечатан.
onbeforeprint
скрипт
Скрипт запустится прежде, чем документ будет распечатан.
onbeforeonload
скрипт
Скрипт запустится до загрузки документа.
onblur
скрипт
Скрипт запустится, когда окно потеряет фокус.
onerror
скрипт
Скрипт запустится, если произойдет ошибка.
onfocus
скрипт
Скрипт запустится, когда окно получит фокус.
onhaschange
скрипт
Скрипт запустится, после изменения документа.
onload
скрипт
Скрипт запустится при загрузке документа.
onmessage
скрипт
Скрипт запустится при срабатывании сообщения.
onoffline
скрипт
Скрипт запустится, когда документ перейдет в автономный режим.
ononline
скрипт
Скрипт запустится, когда документ войдет в сеть.
onpagehide
скрипт
Скрипт запустится, когда окно будет скрыто.
onpageshow
скрипт
Скрипт запустится, когда окно станет видимым.
onpopstate
скрипт
Скрипт запустится при изменении окна истории.
onredo
скрипт
Скрипт запустится, когда документ начнет выполнять повтор.
onresize
скрипт
Скрипт запустится при изменении размеров окна.
onstorage
скрипт
Скрипт запустится при загрузке документа.
onundo
скрипт
Скрипт запустится при выполнении команды отменить в документе.
onunload
скрипт
Скрипт запустится при выходе пользователя из документа.
События формы
События срабатывают на действия внутри HTML-формы (могут применяться ко всем элементам HTML, но чаще всего применяются к элементам формы):
Атрибут
Значение
Описание
onblur
скрипт
Скрипт запустится, когда элемент потеряет фокус.
onchange
скрипт
Скрипт запустится при изменении элемента.
oncontextmenu
скрипт
Скрипт запустится при вызове контекстного меню.
onfocus
скрипт
Скрипт запустится, когда элемент получит фокус.
onformchange
скрипт
Скрипт запустится при изменении формы.
onforminput
скрипт
Скрипт запустится, когда пользователь будет вводить данные в форму.
oninput
скрипт
Скрипт запустится, когда элемент станет получать пользовательский ввод.
oninvalid
скрипт
Скрипт запустится, когда элемент станет недействителен.
onselect
скрипт
Скрипт запустится при выборе элемента.
onsubmit
скрипт
Скрипт запустится при отправке формы.
События клавиатуры
События, вызываемые клавиатурой (могут применяться ко всем элементам HTML):
Атрибут
Значение
Описание
onkeydown
скрипт
Скрипт запустится, когда будет нажата клавиша.
onkeypress
скрипт
Скрипт запустится после того, как клавиша была нажата и отпущена.
onkeyup
скрипт
Скрипт запустится при отпускании клавиши.
События мыши
События, вызываемые действиями мышкой или аналогичными действиями пользователя (могут применяться ко всем элементам HTML):
Атрибут
Значение
Описание
onclick
скрипт
Скрипт запустится по клику мыши.
ondblclick
скрипт
Скрипт запустится после двойного клика мыши.
ondrag
скрипт
Скрипт запустится при перетаскивании элемента.
ondragend
скрипт
Скрипт запустится после операции перетаскивания.
ondragenter
скрипт
Скрипт запустится, когда элемент будет перенесен на допустимую зону падения.
ondragleave
скрипт
Скрипт запустится, когда элемент отпустят в действующий зоне падения.
ondragover
скрипт
Скрипт запустится, если элемент тащат за допустимую зону падения.
ondragstart
скрипт
Скрипт запустится в начале операции перетаскивания элемента.
ondrop
скрипт
Скрипт запустится после перетаскивания элемента при падении.
onmousedown
скрипт
Скрипт запустится при нажатии кнопки мыши.
onmousemove
скрипт
Скрипт запустится, когда указатель мыши начнет перемещаться.
onmouseout
скрипт
Скрипт запустится, когда указатель мыши будет перемещаться из элемента.
onmouseover
скрипт
Скрипт запустится, когда указатель мыши будет перемещаться над элементом.
onmouseup
скрипт
Скрипт запустится при отпускании кнопки мыши.
onmousewheel
скрипт
Скрипт запустится при использовании колеса мыши.
onscroll
скрипт
Скрипт запустится во время прокручивания полосы прокрутки элемента.
События медиа-файлов
События, вызываемые для медиа файлов, таких как видео, изображения и аудио (могут применяться ко всем элементам HTML, но чаще всего применяются к таким элементам, как <audio>, <embed>, <img>, <object>, и <video>):
Атрибут
Значение
Описание
onabort
скрипт
Скрипт запустится при прерывании.
oncanplay
скрипт
Скрипт запустится, когда файл будет готов, чтобы начать проигрывание (когда будет достаточно буферизирован).
oncanplaythrough
скрипт
Скрипт запустится, когда файл может быть воспроизведен полностью (от начала до конца), не останавливаясь для буферизации.
ondurationchange
скрипт
Скрипт запустится при изменении длины продолжительности медиа файла.
onemptied
скрипт
Скрипт запустится, когда произошла какая-то неполадка и файл стал недоступен (например при разрыве связи с интернетом).
onended
скрипт
Скрипт запустится, когда аудио/видео файл дойдет до конца (например для вывода сообщения: спасибо за прослушивание/просмотр).
onerror
скрипт
Скрипт запустится, если возникнет ошибка при загрузке файла.
onloadeddata
скрипт
Скрипт запустится при загрузке данных медиа файла.
onloadedmetadata
скрипт
Скрипт запустится, когда загружены мета-данные (например размер и продолжительность).
onloadstart
скрипт
Скрипт запустится при загрузке файла прежде, чем начнет загружаться на самом деле.
onpause
скрипт
Скрипт запустится, если воспроизведение файла приостановлено (нажали паузу) пользователем или программно.
onplay
скрипт
Скрипт запустится, когда файл готов начать воспроизводиться.
onplaying
скрипт
Скрипт запустится при воспроизведении файла.
onprogress
скрипт
Скрипт запускается, когда браузер находится в процессе получения данных медиа файла.
onratechange
скрипт
Скрипт запускается, каждый раз, при изменении режима воспроизведения (например, когда пользователь переключается на медленное воспроизведение или режим быстрой перемотки).
onreadystatechange
скрипт
Скрипт запускается, каждый раз, при изменении состояния готовности (состояние готовности отслеживает состояние данных файла).
onseeked
скрипт
Скрипт запускается, когда атрибут seeked у тегов audio или video имеет значение "false", т.е.текущая позиция воспроизведения найдена.
onseeking
скрипт
Скрипт запускается, когда атрибут seeking у тегов audio или video имеет значение "true", т.е. текущая позиция воспроизведения перемещается.
onstalled
скрипт
Скрипт запускается, когда браузер не может получить данные медиа файла по любой причине.
onsuspend
скрипт
Скрипт запускается, когда получение данных медиа файла прекращается, до окончания полной загрузки по любой причине.
ontimeupdate
скрипт
Скрипт запускается, когда позиция воспроизведения изменилась (например, когда пользователь выбрал точку воспроизведения на много дальше от текущей).
onvolumechange
скрипт
Скрипт запускается каждый раз при изменении значения громкости звука (включая полное отключение звука).
onwaiting
скрипт
Скрипт запускается, когда медиа файл остановлен, но ожидается возобновление запуска (например, когда файл делает паузу для буферизации оставшихся данных).
Блочные и строчные элементы html
HTML элементы делятся на строчные и блочные, ниже представлены две таблицы со списком тегов разделенных на данные группы.
Строчные элементы
Элемент
Краткое описание
<a>
Создает гиперссылку.
<abbr>
Определяет текст как аббревиатуру.
<audio>
Определяет звуковое содержимое.
<b>
Выделяет текст жирным шрифтом.
<bdo>
Определяет направление отображения текста.
<button>
Создает кнопку.
<canvas>
Определяет область для рисования графики.
<cite>
Определяет заголовок для работы - преобразует текст в курсивный.
<code>
Определяет кусок программного кода - преобразует текст в моноширинный.
<del>
Определяет текст, который был удален из документа - отображается перечеркнутым текстом.
<dfn>
Выделяет определения термина - преобразует шрифт в наклонный.
<em>
Определяет выделенный текст - преобразует текст в курсивный.
<i>
Преобразует текст в курсивный.
<iframe>
Определяет встроенный frame.
<img>
Определяет изображение.
<input>
Создаeт поле для ввода данных.
<ins>
Определяет текст, который был добавлен в документ - отображает текст подчеркнутым.
<kbd>
Определяет текст вводимый с клавиатуры - преобразует текст в моноширинный.
<mark>
Определяет важную часть текста.
<meter>
Определяет скалярное измерение в пределах известного диапазона.
<q>
Определяет короткую цитату.
<rp>
Определяет, что показывать браузеру, который не поддерживает тег <ruby>.
<rt>
Добавляет аннотацию сверху или снизу от символов, заключенных в элементе <ruby>.
<s>
Определяет текст, который больше не является правильным - отображает текст перечеркнутым.
<samp>
Определяет текст, который является результатом вывода компьютерной программы.
<small>
Определяет текст маленького размера.
<select>
Создает выпадающий список.
<span>
Определяет строчный элемент документа.
<strong>
Определяет важный текст - преобразует шрифт в полужирный.
<sub>
Определяет текст в нижнем индексе.
<sup>
Определяет текст в верхнем индексе.
<td>
Создает ячейку таблицы.
<textarea>
Создает многострочное текстовое поле.
<th>
Создает заголовочную ячейку в таблице.
<var>
Определяет переменную - выделяет текст курсивом.
<video>
Добавляет на страницу видео файл.
Блочные элементы
Элемент
Краткое описание
<address>
Определяет контактную информацию автора документа/статьи.
<artical>
Определяет текст как статью, новость и др.
<aside>
Определяет контент в стороне от содержимого страницы.
<blockquote>
Выделяет текст с другого источника, как блочную цитату.
<dd>
Cоздает описание элемента в списке определений.
<div>
Определяет раздел документа.
<dl>
Создает список определений.
<dt>
Oпределяет термин в списке определений.
<figure>
Группирует элементы страницы.
<footer>
Нижняя часть документа.
<form>
Определяет HTML форму.
<h1> - <h6>
Определяют HTML заголовки.
<header>
Задает "шапку" сайта или раздела.
<hr>
Создает горизонтальную линию.
<li>
Определяет элемент списка.
<nav>
Определяет группу ссылок для навигации.
<ol>
Создает нумерованный(упорядоченный) список.
<p>
Определяет абзац.
<pre>
Оставляет содержимое в первоначальном виде.
<ruby>
Определяет небольшую аннотацию (для типографии Восточной Азии).
<section>
Определяет разделы документа.
<table>
Создает таблицу.
<tr>
Создает строку в таблице.
<ul>
Определяет маркированный(неупорядоченный) список.
Свойства css с кратким описанием
Данный справочник предоставляет подробное описание всех CSS свойств с максимально упрощенными примерами, для более легкого понимания работы свойства.
Некоторые свойства CSS из третьей версии были внедрены совсем недавно и пока не поддерживаются ни одним из браузеров и не имеют точного описания работы, как только они будут введены в эксплуатацию, к ним будет добавлено подробное описание с примером.
Указывает порядок расположения элементов по оси Z.
2
Единицы измерения CSS
Единицы измерения CSS используются для указания размеров различных элементов. Есть абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения размера, используемого в родительском элементе. Ниже представлена таблица и подробное описание каждой единицы измерения CSS.
Единица
Описание
Пример
%
проценты
p{border: 5%;}
in
дюйм
p{word-spacing: 2in;}
cm
сантиметры
div {margin-left: 2cm;}
mm
миллиметры
p{font-size: 15mm;}
em
1em равен текущему размеру шрифта. Если текущей размер шрифта составляет 12pt, тогда 2em будет равен 24 pt
p{letter-spacing: 7em;}
ex
1ex равен высоте символа "x" в нижнем регистре указанного шрифта
p{line-height: 3ex;}
pt
1pt равен 1/72 дюйма
body{font-size: 18pt;}
pc
1pc равен 12pt
p{font-size: 20pc;}
px
пиксель - это маленькая точка на экране
p{padding: 25px;}
Абсолютные единицы
Миллиметр - mm, сантиметр - cm и дюйм - in
Само собой разумеется, что это абсолютные единицы измерения. Один cm = 0.39370in, 1in = 2.54cm и 10mm = 1cm. Компьютерные дисплеи плохо вычисляют данные единицы измерения, таким образом у этих величин ограниченное применение и обычно их используют при указании размера для вывода страниц на печать.
Пиксели - px
Пиксель это маленькая точка на экране. Пиксели определяют размер элемента. Использование пикселей дает вам точный контроль над размером элемента, позволяя вам точно вычислить его ширину и высоту, это будет полезным для точной разметки дизайна страницы. Однако, есть несколько минусов использования пикселей, вы должны быть осведомлены о них:
Во-первых, установка размера шрифта с помощью пиксельных единиц не позволяет пользователю изменять размер шрифта с помощью настроек в браузере. Если размер шрифта 12 пикселей, он всегда будет иметь высоту 12 точек, независимо от того, что пользователь установил размер шрифта по умолчанию в браузере. Так что если вы решили указать размер шрифтов, следует подумать об использовании другой единицы измерения.
Во-вторых, когда речь заходит о печатных средствах массовой информации, пиксели не имеют реального значения. При разработке документа для печати, устройство печати должно будет само догадываться о том, что вы имели ввиду с точки зрения физических размеров. Хотя обычно можно просмотреть документ и внести изменения перед печатью.
Точки - pt и пики - pc
Эти единицы измерения чаще всего используются для указания именно размера шрифта, например, в обычном блокноте, мы часто указываем размер текста равный 14, это значение как раз и есть единицы измерения pt. Точка (1pt) равна 1/72 дюйма, в то время как пика (1pc) равна 1/6 дюйма (1pc = 12pt). Документы, предназначенные для печати будут иметь возможность сообщить устройству именно тот размер шрифта, который следует использовать при печати. Цифровым дисплеям, однако, придется самим догадываться, как конвертировать эти единицы в пиксели, и нет никаких реальных универсальных способов узнать, как это будет сделано. Поскольку точки (pt) были использованы с первых дней Интернета, большинство браузеров автоматически могут установить соотношения между пикселями и точками, но это по сути неправильно. Помните, что небольшие дисплеи сегодня могут иметь высокое разрешение, так что определить то, насколько большой «дюйм на экране» будет практически невозможно на устройствах. Для указания размера элементов на веб-страницах следует избегать использования этих единиц.
Относительные единицы
Процент - %
Самая простая единица измерения, это процент (%), она не имеет напрямую никакого отношения к размеру шрифта или элемента в целом и может быть использована в комбинации с другими единицами измерения указывающими величину. Размер установленный в процентах, напрямую зависит от размера родительского элемента, например размер шрифта задается относительно размера шрифта родительского элемента, также высота и ширина выражается в процентах относительно высоты и ширины родительского элемента.
Вычисляемая x-высота - ex
Единица измерения ex используется достаточно редко. В качестве основы для размера 1ex используется высота символа "x" в нижнем регистре указанного шрифта. Большинство браузеров не поддерживает эту единицу измерения должным образом, и она не рекомендуется для использования в документах, предназначенных для браузеров.
Вычисляемая единица - em
Em является относительной единицей измерения. Один em равен 16px. Если em используется для определенного элемента, то за 1em принимается размер шрифта его родителя.
Что ж были описаны все представленные в таблице единицы измерения, среди них нет единиц измерения, которые можно было бы порекомендовать для постоянного использования, с какими вам будет удобнее работать это покажет только дальнейшая практика.
CSS селекторы
Селектор определяет элементы, к которым будет применен блок объявлений, содержащий форматирующие свойства.
В таблице в колонке "CSS" указывается, в какой версии CSS был добавлен данный селектор.
