Пять вещей, которые надо знать об HTML5.

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

Первое - это стандарт HTML5, документ, лежащий на сайте W3C, в котором описаны все новые теги, атрибуты, новые API, и ряд сопутствующих документов, в которые вынесены некоторые дополнительные детали, вроде API для Canvas.

Второе - это «большой», маркетинговый, трендовый HTML5, зонтик для целого поколения новых технологий, включающий как непосредственно спецификацию HTML5, так и множество модулей CSS3, различные API для JavaScript, да и сам новый стандарт для JavaScript - ECMAScript5.

Рассмотрим некоторые ключевые особенности html5:

Он более простой, более простая структура элементов на странице, что упрощает создание и отладку кода.

Он предоставляет стандартные элементы для медиа объектов, которые ранее требовали установки отдельных плагинов, которые приходилось постоянно обновлять.

В нем есть своя интеграция с интерфейсами, которые могут понадобиться в современных приложениях. Как пример можно привести геолокацию, которая позволяет браузеру определить местоположение пользователю (его координаты). Ранее это можно было сделать только через GPS.

Что дает HTML5?

Для разработчиков html5 помогает писать понятный семантический код. Позволяет управлять многими процессами на странице своими стандартными методами, без использования javascript или сторонних плагинов и сервисов. Это означает, что решаются некоторые проблемы кроссбраузерности, поскольку браузеры одинаково реализуют новые возможности.

Также html5 делает удобной работу в сети и для обычных пользователей. Например, увеличивается скорость работы, использование браузера становится более удобным. Для того, чтобы смотреть ролики из youtube не нужно устанавливать дополнительные плагины и постоянно обновлять их.

Цели HTML5

Кратко цели html5 можно назвать так:

Ликвидация плагинов, таких как Flash, для общих функций, которые необходимы каждому. Построить собственную поддержку для таких вещей, как аудио, видео и т.д.

Снижение потребности в JavaScript и дополнительном коде, благодаря использованию новых html5 элементов.

Обеспечение согласованности между браузерами и устройствами.

Сделать все это настолько прозрачным, насколько это возможно.

Новые возможности HTML5

Новых функциональных возможностей в html5 очень много. Сегодня даже самые последние версии современных браузеров поддерживают полностью все функции html5. Поэтому в данной статье мы рассмотрим лишь основные возможности html5.

Новые элементы html5

Новые элементы html5 позволяют быстрее создавать разметку для страницы, она становиться проще, более понятна и упрощается процесс отладки. Вот некоторые новые теги:

и

для любых видов меню

для сайдбаров или связного контента

для статей

практически то же, что и div

и теги позволяют проигрывать видео без плагинов

для рисование на странице использую javascript

для вставки внешнего контента на страницу

Наряду с тем, что появились новые теги часть существующих тегов в HTML5 приобретает новое значение. Так, если раньше выбор между i и em (аналогично b и strong) был чаще в пользу более короткого написания, то сегодня это теги с различной смысловой нагрузкой, даже если по умолчанию они имеют одинаковое представление курсивом или жирным начертанием.

Другая часть нововведений касается непосредственно вопросов доступности: здесь, прежде всего, речь идет об aria- и role-атрибутах, позволяющих разметить предназначение и роли контента. Эта информация впоследствии, к примеру, может использоваться программами для чтения с экрана (screen reader).

Надо сказать, что обеспечение доступности не самая тривиальная задача, и в HTML5 чуть ли не впервые уделено столь большое внимание этому вопросу.

Еще одним преимуществом html5 является наличие в нем продвинутых функций, включая интеграцию API. Это упрощает написание кроссбраузерного кода на javascript для сложных приложений. Вот некоторые из них:

Audio and video позволяет проигрывать видео в браузере без плагинов.

Geolocation: определяет положение посетителя.

Drag and drop: например, для загрузки файла перетаскиванием его в браузер.

Application cache: обеспечивает поддержку открытия сайтов offline.

Web workers: запускает JavaScript в фоновом режиме

Server sent events: позволяет серверам обновлять веб-страницы в браузере после того, как они уже были загружены, проще и эффективнее, чем AJAX и JavaScript.

Offline data storage: позволяет хранить данные локально в браузере, независимо от cookies

Примеры использования html5

Давайте посмотрим на html5 в действии! HTML5 позволяет создавать новую, более простую и чистую разметку для страниц. Код становится более контентоориентированным и его проще читать и понимать. Вот пример простой веб-страницы на html5:

Page Title

Nav Link 1

Nav Link 2

Nav Link 3

Article Header

Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.

Article Subhead

Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.

Sidebar Content

Copyright Your Name Here 2014. All Rights Reserved.

< ! doctype html > < html lang = "en" > < head > < meta charset = "utf-8" > < title > < / title > < meta name = "author" content = "" / > < meta name = "description" content = "" / > < link rel = "stylesheet" href = "assets/css/style.css" / > < ! -- [ if lt IE 9 ] > < ! [ endif ] -- > < / head > < body > < header > < h1 > < a href = "/" > Page Title < / a > < / h1 > < nav > < ol > < li > < a href = "" > Nav Link 1 < / a > < / li > < li > < a href = "" > Nav Link 2 < / a > < / li > < li > < a href = "" > Nav Link 3 < / a > < / li > < / ol > < / nav > < / header > < article > < h1 > Article Header < / h1 > < p > Etiam pretium odio eu mi convallis vitae varius neque pharetra . Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas . < / p > < h2 > Article Subhead < / h2 > < p > Vestibulum lacus erat , volutpat vel dignissim at , fringilla ut felis . < / p >

Люди, плохо знакомые со сферой веб-дизайна, часто слышат слово “разметка” и задаются вопросом, что оно означает и как отличается от более широко известного термина “код”. В основном язык разметки предназначен для обработки, определения и представления информации о тексте; теги стилей и текстовые аннотации записываются в файлах стилей, чтобы упростить работу с текстом для компьютера. Исторически сложилось, что термин “разметка” произошел от английского marking-up , а сам процесс от manuscript marking-up – процесса разметки рукописи перед отдачей ее в печать. Здесь речь пойдет о наиболее часто используемом языке разметки – HTML. Несколько лет назад для этого языка было выпущено обновление под названием HTML5. В этом руководстве мы расскажем, что такое HTML5 и поведаем о различиях между HTML и HTML5.

Что такое HTML?

HTML можно назвать основным языком Всемирной паутины. Большинство веб-страниц, размещенных в Интернете, написаны в какой-либо из вариаций HTML. С помощью него разработчики определяют то, как мультимедиа, текст или гиперссылки будут отображаться среди другого контента в браузере. Начиная от элементов, которые устанавливают связи с вашим документом (гипертекстом), до элементов которые делают эти документы интерактивными (например формы) – все это является составными частями HTML.

Стандарт HTML был разработан W3C или Консорциумом Всемирной Паутины в 1997 году. В HTML для определения структуры текста используются теги; теги и элементы выделяются с использованием символов < и >. Вот лишь некоторые из примеров для ранее упомянутых тегов – это заголовки, таблицы, абзацы и т. д. В свою очередь, браузеры отвечают за визуализацию содержимого страницы с помощью этих тегов. HTML не был единственным стандартом веб-разработки. В первые дни развития Интернета все теги контента и стили присутствовали на одном гигантском, громоздком (и довольно сложном) языке. Со временем W3C пришла к решению о необходимости разделения контента и стиля страницы; Это привело к созданию таблиц стилей или CSS. В настоящее время теги, которые используются для определения стиля текста (например FONT), нежелательны и почти не используются, на их место пришли таблицы стилей и только теги определения содержимого (например H1) по-прежнему составляют ядро ​​HTML.

С течением времени в HTML было много обновлений, и в настоящее время его новейшей версией является HTML5. HTML5, конечно прежде всего является языком разметки, но он приобрел множество функций в отличии от HTML и устранил некоторые из строгостей, присутствовавших в XHTML. Хотя HTML5 обновляется практически каждый день, однако новых выпущенных пронумерованных выпусков нет. Основным различием между HTML и HTML5 может стать то, что ни аудио, ни видео не являются составной частью HTML, тогда как они оба могут рассматриваться как неотъемлемые части HTML5.

Чтобы полностью ответить на вопрос что такое HTML, нужно затронуть и этапы его развития. Так как с течением времени он неоднократно изменялся.

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

• SVG, canvas и другая виртуальная векторная графика поддерживаются в HTML5, тогда как в HTML использование векторной графики стало возможным только при использовании его в сочетании с различными технологиями, такими как Flash, VML, Silver-light и т.д.
• HTML5 использует базы данных SQL и кеш приложений для временного хранения данных, тогда как в HTML для этого используется только кэш браузера.
• Еще одно отличие между HTML и HTML5, о котором стоит упомянуть: первый не позволяет запуск JavaScript в коде (вместо этого он работает в потоке интерфейса браузера), тогда как последний обеспечивает полную поддержку JavaScript для запуска в фоновом режиме.
• HTML5 не основан на SGML, и это позволяет ему иметь улучшенные правила синтаксического анализа, которые обеспечивают улучшенную совместимость.
• В HTML5, в тексте могут использоваться встроенные MathML и SVG, тогда как это невозможно в HTML.
• Некоторые из устаревших элементов были полностью удалены: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, tt.
• HTML5 поддерживает новые виды элементов управления, к примеру, dates and times, email, number, range, tel, url, search и т.д.
• В HTML появилось много новых элементов. Вот некоторые из самых важных: summary, time, aside, audio, command, data, datalist, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video.

Основные преимущества HTML5 для разработчиков

HTML5 предоставляет для разработчиков больше гибкости при разработке дизайна сайтов, и в этой сфере есть значительные улучшения, о которых стоит упомянуть:

Постоянная обработка ошибок:

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

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

Улучшенная семантика для элементов:

Для упрощения и улучшения понимания кода были внесены улучшения в семантические роли различных существующих элементов. Section, article, nav и header – это новые элементы, которые заменили большинство из ныне устаревших div элементов. Это сделало процесс обработки ошибок менее сложным.

Расширенная поддержка функций веб-приложений:

Одной из главных целей HTML5 было создание возможности функционирования браузеров в качестве платформы для приложений. Веб-сайты в прошлом были намного менее сложными, но со временем громоздкость возрастала. HTML5 предоставляет разработчикам расширенный контроль над производительностью своих сайтов. Раньше разработчикам приходилось использовать обходные пути, поскольку многие серверные технологии и браузерные расширения отсутствовали. Теперь, при использовании HTML5 нет смысла использовать какие-либо JS или Flash расширения (как это было в HTML4), поскольку в HTML5 присутствуют элементы, которые обеспечивают все эти функции.

Создание мобильных сайтов стало проще:

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

Элемент canvas:

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

Используя элемент canvas разработчики могут рисовать с помощью скриптов (например JavaScript) графические изображения с применением различных цветов. Стоит упомянуть, что canvas это обычный графический контейнер и для показа изображения необходимо выполнение скрипта. Вот пример использования JavaScript в сочетании с canvas:

var c = document.getElementById(“TestCanvas”); var context = c.getContext(“2d”); context.fillStyle = “#FF0000”; context.fillRect(0,0,140,75);

Элемент m enu :

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

Тег используется для простоты предоставления команд меню на мобильных приложениях и приложениях рабочего стола. Здесь показано возможное применение тега :

Hello!

Настраиваемые атрибуты данных :

Добавление пользовательских атрибутов было возможно и до появления HTML5, но оно было связано с определенным риском, к примеру, в HTML4 пользовательские атрибуты могли приводить к остановке рендера страницы или что еще хуже, могли стать причиной неправильной работы документа. Атрибут data-* в HTML5 поставил точку в решении этой часто встречающейся проблемы. Этот атрибут имеет несколько предназначений, но основной целью его введения было хранение дополнительной информации о разных элементах. Теперь, благодаря этому атрибуту могут быть включены пользовательские данные, что дает разработчикам больше возможностей сделать привлекательные и эффективные страницы, без лишних запросов на сервер или вызовов Ajax.

(Возможное) прощание с Cookies:

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

Шпаргалка HTML5

Если вы еще не знаете что такое HTML5 и с чем его едят, шпаргалка может быть отличным подспорьем при его изучении. Используйте приведенную ниже таблицу стилей HTML, для более продуктивного начала работы с HTML. Эта шпаргалка показывает наиболее часто используемые теги HTML.

Преимущества HTML5 для обычного пользователя

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

Мобильные браузеры теперь работают более стабильно, чем стандартные приложения. До появления HTML5 ситуация была иная.

Сегодня ставка на адаптивные сайты (дружелюбные к мобильным устройствам) очень высока, так как почти 30 процентов пользователей мобильных устройств не хотят загружать специальные приложения. Это стало еще одним преимуществом HTML5, к примеру, если пользователь хочет использовать услуги компании, но не хочет загружать специальное приложение, он может просто зайти на сайт компании, чтобы сделать это.

Искоренение необходимости использования Adobe Flash позволяет разработчикам обеспечить более эстетичный пользовательский интерфейс. Использование JavaScript и MPEG4 в сочетании с HTML5 сделало жизнь пользователей намного лучше.

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

Заключение

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

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

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

Как известно, HTML (HyperText Markup Language ) - это язык разметки веб-страниц. Его главная задача - интерпретация передаваемой по сети информации в виде читабельного контента. Посредством HTML мы видим интернет именно таким, какой он есть на сегодняшний день, т.е. красивым, цветастым и многогранным. Ну а появление новой версии HTML - это бесспорно великое событие, которое еще долгое время будет будоражить умы интернет сообщества.

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

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

К примеру, в HTML5 можно наблюдать определенное количество новых элементов - появились section, nav, header, article и footer . Напомним, что ранее существовал только один элемент - div . Стандартный img , теперь дополнен тэгами audio и video . Один из самых важных атрибутов id дополнен tabindex и repeat . Помимо этого полностью упраздняются давно вышедшие из моды элементы типа font, center и т.п.

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

Теперь давайте немного остановимся на структуре и разметке языка HTML5.

Как известно, старая версия полностью опиралась на элемент div . Иными словами, все, что было связанно с сайдбарами, навигационными панелями, менюшками, разделами и т.п. подчинялось именно этому элементу. В HTML5 появились альтернативные варианты, что, вне всякого сомнения, сделало структуру веб-страницы более наглядной и функциональной.

• header (не путаем с head) - можно задавать не только заголовок страницы, но и подзаголовки;
• nav - элемент предназначен исключительно для ссылок навигации, что в высшей степени удобно при создании внутристраничной навигации по сайту, а так же и для межстраничных переходов.
• section - данный элемент интерпретируется как секция общего пользования. Допустим, его можно использовать тогда, когда требуется в заранее определенном блоке текста задать специальный заголовок или параграф.
• article - посредством этого элемента можно задать независимые зоны текстового наполнения страницы. К примеру, выделение важных публикаций из архива, трансляция текущих новостей, последние сообщения на форуме и т.д. и т.п. Помимо этого, элемент article можно использовать и в обычном режиме - т.е. определять им весь контент страницы.
• footer - самый нижний элемент страницы или же "завершающий блок секции". Представляется в виде колонтитула. Там могут размещаться информационные сообщения касательно вышеопубликованного контета (например, копирайты) и т.п. вещи.

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

• aside - этот контейнер можно использовать для материалов, которые считаются вспомогательными. К примеру, цитаты, сноски отделенные от основного повествования, колонки с пояснительным текстом и т.п.
• dialog - контейнер, позволяющий красиво оформить диалог.
• figure - контейнер, позволяющий описать любое графическое изображение с текстовой подписью.

А как насчет нескольких слов касательно мультимедийных элементов?

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

Другой момент - посредством этих элементов отпадает потребность в использовании сторонних продуктов (плагинов) для просмотра и прослушивания мультимедийного контента.

Касательно интерактива, HTML5 тоже не остался в долгу - тут тоже появились новые элементы. Вот некоторые из них:

• details - посредством этого элемента можно паковать необязательную информацию.
• datagrid - используется для демонстрации данных таблицы. От стандартных таблиц отличается тем, что посетитель страницы может самостоятельно управлять отображением информации, т.е. убирать таблицу, перемещать колонки и т.п.
• menu, command - элементы, которые непосредственно относятся к визуальному представлению всех менюшек имеющихся на сайте.

Еще одно новшество - это элементы отвечающие за уровень текста. К примеру, в новой версии можно задавать такие параметры, как, скажем, прогресс какого-либо процесса (progress ), динамическое отображение времени (time ), дат и т.п.

Ну и в заключение парочка слов про новшества связанные с API!

Первым делом бросается в глаза расширение существующих DOM интерфейсов и добавление новых API - данные можно хранить в браузере, реализована технология Drag-and-drop, стало доступным рисование в онлайне и т.д.

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

что такое seo - введение в seo seo термины - обзор терминов и понятий, непосредственно касающихся c seo полезные термины - обзор терминов и понятиев, связаных с seo

27.01.14 15.5K Введение

Я, разработчик ASP.NET MVC , недавно искал работу, и на собеседовании много вопросов из тех, что мне задавали, касались HTML5 и его особенностей.

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

Эти вопросы не являются ключом к успеху при поиске работы, но они, несомненно, помогут вам ориентироваться в теме.

Удачной охоты.

Какая связь между SGML, HTML, XML и XHTML?

SGML (Standard generalized markup language — стандартный обобщённый язык разметки) – это стандарт, который определяет разметку документа.

HTML – это язык разметки, который описывается с помощью SGML.

Итак, с помощью SGML было создано DTD (определение типа документа), на которое ссылается и которого должен придерживаться HTML. Поэтому вы всегда можете найти декларацию «DOCTYPE » в начале страницы HTML, которая определяет, какое DTD будет использовать браузер при разборе кода страницы.

Разбор кода по стандарту SGML был связан с определёнными трудностями, поэтому был создан XML, чтобы облегчить эту процедуру. XML использует SGML.

Например, в SGML вы должны использовать открывающие и закрывающие теги, тогда как в XML вы можете использовать самозакрывающиеся теги, которые закрываются автоматически (например, “” ).

XHML был создан из XML и использовался в HTML 4.0 . Поэтому, например, в HTML, основанном на SGML, тег
недопустим, а в XHTML он допускается. Вы можете использовать XML определение документа, как показано в следующем примере:

Вкратце, SGML стоит в основе всего. Старые версии HTML основаны на SGML, а HTML 4.0 использует XHTML, построенный на основе XML. Что такое HTML 5?

HTML 5 – это новый стандарт HTML, главной целью которого является предоставление любого контента без использования дополнительных плагинов, таких как Flash, Silverlight и т.д. Он содержит всё необходимое для отображения анимации, видео, богатого графического интерфейса и прочего.

HTML5 – это результат совместной работы World Wide Web Consortium (W3C) и Web Hypertext Application Technology Working Group (WHATWG).

В HTML 5 нам не нужно DTD. Почему?

HTML 5 не использует SGML или XHTML. Это полностью новая разработка, поэтому вам не нужно ссылаться на DTD. В HTML 5 вам нужно использовать следующую декларацию doctype, которая позволяет браузеру идентифицировать документ как HTML 5.

Если я не вставлю в документ , будет ли работать HTML 5?
Нет, браузер не сможет идентифицировать документ как HTML 5, и теги HTML 5 не будут работать корректно.

Какие браузеры поддерживают HTML 5?

Практически все браузеры, как Safari, Google Chrome, Firefox, Opera, Internet Explorer поддерживают HTML 5.

Как изменилась структура страницы при переходе с HTML 4 или предыдущих версий на HTML 5?

Обычно веб-страница содержит заголовки, подвал, навигацию, основной контент и боковой блок. Поэтому когда мы хотим представить эти блоки в HTML 4 с подходящим наименованием, мы, скорее всего, будем использовать теги DIV . Но в HTML 5 введены более понятные элементы для этих блоков, что позволило сделать код HTML более читаемым.

Ниже приведено описание этих элементов HTML 5 из разметки на рисунке:

• : Представляет блок заголовка страницы;
• : Подвал страницы;
• : Навигационные элементы страницы;
• : Основной контент страницы (статья);
• : Используется внутри статьи, чтобы разделить статью на секции;
• : Представляет боковой блок страницы.

Что такое элемент datalist в HTML 5?

Элемент datalist в HTML 5 помогает реализовать функцию автозаполнения в поле для ввода, как показано на рисунке ниже:

Ниже приведён код HTML для элемента DataList:

Какие новые элементы форм введены в HTML 5?

В HTML 5 введены десять новых важных элементов форм:

• Color;
• Date;
• Datetime-local;
• Email;
• Time;
• Range;
• Telephone;
• Number;
• Search.

Давайте разберём эти элементы по порядку.

Если вы хотите отобразить диалоговое окно выбора цвета:

Если вы хотите отобразить диалоговое окно календаря:

Если вы хотите отобразить календарь с локальным временем:

Если вы хотите создать HTML поле для ввода с проверкой адреса электронной почты, можно задать тип поля «email »:

Для проверки URL-адреса используйте тип «url », как показано ниже:

Если вы хотите отобразить поле для ввода чисел в заданном диапазоне, используйте тип «number »:

Если вы хотите отобразить ползунок, используйте тип «range »:

Хотите сделать поле для поиска:

Хотите принимать только время:

Если вы хотите сделать поле для ввода номеров телефона:

Что такое элемент output в HTML 5?

Элемент output требуется, когда вы хотите отобразить сумму двух введённых чисел в виде текста.

Например, у вас есть два поля для ввода и вы хотите сложить числа из этих двух полей и отобразить их сумму в виде текста.

Ниже приведён пример использования элемента output в HTML 5:

+ =

Вы можете заменить «parseInt » на «valueAsNumber » для простоты. Также вы можете использовать атрибут «for» элемента output для повышения читаемости.

Что такое SVG?

SVG означает scalable vector graphics (масштабируемая векторная графика). Это текстовой язык графики, с помощью которого можно рисовать изображения в виде текста, линий, точек и т.п., что позволяет создавать лёгкие и быстро обрабатываемые браузером изображения.

Можно ли сделать простое SVG изображение, используя HTML 5?

Допустим, мы хотим отобразить простую линию, как показано на рисунке ниже, используя HTML 5 и SVG:

Ниже приведён код HTML 5. Вы можете видеть тэг SVG, который заключает в себя тэг line , отображающий линию:

Что такое канва в HTML 5?

Канва – это область HTML документа, в которой вы можете рисовать.

Итак, как же нарисовать простую линию при помощи канвы?

• Определите область канвы;
• Получите доступ к контексту канвы;
• Нарисуйте изображение.

Определение области канвы

Чтобы определить область канвы, вам потребуется следующий HTML код. Он определяет область, в которой вы можете рисовать:

Получение доступа к области канвы

Прежде чем приступить к рисованию в области канвы, нужно получить ссылку на контекст канвы. Ниже приведён код, позволяющий это сделать:

var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");

Рисование изображения

Теперь, когда у вас есть доступ к контексту объекта, можно начинать рисовать по канве. Поэтому сначала вызываем метод «move » и начинаем с точки 10, 10, используем метод «line », чтобы нарисовать линию, и, наконец, применяем к ней штриховку:

ctx.moveTo(10,10); ctx.lineTo(200,100); ctx.stroke();

Ниже приведён полный код:

function DrawMe() { var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d"); ctx.moveTo(10,10); ctx.lineTo(200,100); ctx.stroke(); }

Вы должны получить результат, как на следующем рисунке:

В чём разница между канвой и SVG?

Замечание : Если вы посмотрите на предыдущие два вопроса, то поймёте, что и канва, и SVG применяются для отображения графики в браузере. Поэтому задавая этот вопрос, интервьюер хочет узнать, когда вы будете использовать то или другое .

SVG	Канва
SVG действует по принципу «нарисовал и запомнил ». Другими словами любая фигура, нарисованная с помощью SVG, запоминается, допускает манипуляции над собой, и браузер может нарисовать её снова.	Канва действует по принципу «нарисовал и забыл ». После того, как что-то нарисовано, вы не можете получить доступ к этому изображению и манипулировать им.
SVG подходит для создания графики такой, как в программах CAD, где пользователь может манипулировать однажды нарисованным изображением.	Канва хороша для сценариев «нарисовал и забыл », таких как анимация и игры.
Медленный формат, т.к. ему требуется запоминать координаты для будущих манипуляций.	Более быстрый формат, т.к. нет надобности запоминать что-либо.
Мы можем создать обработчик событий, связанный с нарисованным объектом.	В этом случае мы не можем привязать обработчик событий к объектам рисунка, т.к. у нас нет ссылки на них.
Не зависит от разрешения.	Зависит от разрешения.

Как нарисовать прямоугольник, используя элементы Canvas и SVG в HTML 5?

HTML 5 код прямоугольника с помощью SVG

HTML 5 код прямоугольника с помощью канвы:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.rect(20,20,150,100); ctx.stroke();

HTML 5 код круга с помощью SV:

HTML 5 код круга с помощью канвы:

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = "green"; context.fill(); context.lineWidth = 5; context.strokeStyle = "#003300"; context.stroke();

Манипуляции с нарисованным изображением в SVG:

var timerFunction = setInterval(DrawMe, 20); alert("ddd"); function DrawMe() { var circle = document.getElementById("circle1"); var x = circle.getAttribute("cx"); var newX = 2 + parseInt(x); if(newX > 500) { newX = 20; } circle.setAttribute("cx", newX); }

Что такое селекторы в CSS?

Селекторы помогают выбрать элемент, к которому вы хотите применить стиль. В качестве примера ниже приведён простой стиль «intro», который применяет красный цвет фона к HTML элементу:

.intro { background-color: red; }

Чтобы применить стиль «intro » к элементу div, мы можем использовать атрибут «class », как показано в следующем блоке кода:

My name is Shivprasad koirala.

I write interview questions.

Как можно применить стиль CSS, используя значение ID?

Допустим, у вас есть HTML тэг параграфа с id «mytext », как показано в следующем примере:

Это вопросы по HTML, которые могут задать на собеседовании.

Вы можете создать стиль, используя селектор «# » и значением свойства «id », чтобы применить стили CSS к соответствующему тэгу параграфа. Поэтому, чтобы применить стиль к элементу «mytext » мы можем использовать селектор «#mytext », как показано ниже:

#mytext { background-color: yellow; }

Коротко рассмотрим некоторые важные селекторы

Установка жёлтого фона для всех параграфов и заголовков h1 :

p,h1 { background-color:yellow; }

Установка жёлтого фона для всех параграфов внутри элемента div :

div p { background-color: yellow; }

Установка жёлтого фона для всех параграфов, следующих за элементом div :

div+p { background-color: yellow; }

Установка жёлтого фона для всех элементов с атрибутом «target »:

a { background-color: yellow; } ASP.NET interview questions c# interview questions .NET interview questions with answers

Установка жёлтого фона полей для ввода при получении ими фокуса:

input:focus { background-color: yellow; }

Установка стиля гиперссылок, в зависимости от их статуса:

a:link {color: green;} a:visited {color: green;} a:hover {color: red;} a:active {color: yellow;}

Как использовать разбивку контента по колонкам в CSS?

Разбивка по колонкам в CSS помогает вам разделить ваш текст на вертикальные колонки.

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

Здесь нам на помощь придёт разбивка по колонкам HTML 5.

Чтобы реализовать разбивку по колонкам, вам потребуется определить следующее:

На сколько колонок требуется разбить текст?

Для определения количества колонок используется свойство column-count . Префиксы «webkit » и «moz » необходимы для браузеров Chrome и Firefox соответственно.

Moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari и Chrome */ column-count:3;

Какой промежуток сделать между колонками?

Moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari и Chrome */ column-gap:20px;

Хотите ли вы нарисовать линию между колонками, и если да, какой толщины?

Moz-column-rule:4px outset #ff00ff; /* Firefox */ -webkit-column-rule:4px outset #ff00ff; /* Safari и Chrome */ column-rule:6px outset #ff00ff;

Ниже приведён полный код примера:

.magazine { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:20px; -moz-column-rule:4px outset #ff00ff; /* Firefox */ -webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */ column-rule:6px outset #ff00ff; }

Затем вы можете применить этот стиль к тексту, используя атрибут «class »:

Здесь следует ваш текст, который вы хотите разбить на 3 колонки:

Расскажите о блочной модели CSS

Блочная модель CSS – это прямоугольное пространство вокруг элемента HTML, в котором определяются границы, поля и отступы.

Границы – определяют максимальную область, в которой будет содержаться элемент. Мы можем сделать границу видимой, невидимой, определить высоту и ширину элемента и т.п. Поля – определяют расстояния между границами и элементом.

Отступы – определяют расстояния между границами и соседними элементами.

В качестве примера, ниже приведён простой CSS код, который определяет блок и значения границ, полей и отступов:

Поэтому, если мы применим этот код CSS к элементу div, приведённому в следующем блоке кода, результат будет такой, как показано на рисунке ниже. Я добавил элементы «Some text » и «Some other text », чтобы продемонстрировать свойство «margin » (отступ).

Some text Some other text

Расскажите о некоторых текстовых эффектах в CSS 3

Здесь интервьюер ожидает от вас рассказа об одном из двух эффектов, появившихся в CSS 3.

Ниже приведены оба эффекта:

Эффект тени текста

Specialtext { text-shadow: 5px 5px 5px #FF0000; }

Эффект разрыва слов:

.breakword { word-wrap: break-word; }

Что такое web workers и зачем они нужны?

Рассмотрим следующий «тяжёлый » цикл for , который выполняется миллиард раз:

function SomeHeavyFunction() { for (i = 0; i < 1000000000; i++) { x = i + x; } }

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

В итоге это может привести к зависанию браузера и сообщению об ошибке, как показано на рисунке ниже:

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

Для этого и предназначена технология web workers , позволяющая исполнять файлы JavaScript асинхронно.

Какие ограничения накладываются на поток Web Worker?

Потоки web worker не могут изменять HTML элементы, глобальные переменные и некоторые свойства окон, такие как window.location . Вы можете использовать типы данных javascript, вызовы XMLHttpRequest и прочее.

Так как же создать поток web worker в JavaScript?

Чтобы создать поток web worker, мы должны передать имя файла JavaScript в конструктор Worker.

var worker = new Worker("MyHeavyProcess.js");

Чтобы отправить сообщение объекту web worker , можно использовать метод «postMessage », как в приведённом ниже коде:

worker.postMessage();

Когда web worker посылает сообщение, мы можем получить его на вызывающей стороне с помощью события «onmessage».

worker.onmessage = function (e) { document.getElementById("txt1").value = e.data; };

Тяжёлый цикл помещён в javascript файл «MyHeavyProcess.js », ниже приведён его код.

Когда этот код пожелает отправить сообщение, он использует метод «postMessage », а любое сообщение, полученное от вызывающей стороны, получается при помощи события «onmessage »:

var x =0 self.onmessage = function (e) { for (i = 0; i < 1000000000; i++) { x = i + x; } self.postMessage(x); };

Как уничтожить объект web worker? Зачем в HTML 5 введены события server-sent?

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

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

Поэтому вместо pull-запросов было бы здорово иметь какое-нибудь push-решение. Проще говоря, когда сервер получает обновление, он рассылает его браузерам клиентов. Это может быть достигнуто с помощью «SERVER-SENT СОБЫТИЙ ».

Сначала браузер должен связаться с источником на сервере, который будет посылать обновления. Допустим, у нас есть страница «stock.aspx », которая рассылает обновления котировок.

Чтобы связаться со страницей, мы должны использовать привязку к объекту источника события, как показано в коде ниже:

var source = new EventSource("stock.aspx");

Нам также потребуется привязать функцию, которая будет получать сообщения, когда сервер будет рассылать обновления. Для этого нам нужно привязать функцию к событию «onmessage », как показано в следующем коде:

source.onmessage = function (event) { document.getElementById("result").innerHTML += event.data + "
"; };

Наконец, со стороны сервера нам нужно рассылать события. Ниже приведён список важных событий, с командами, которые должны рассылаться со стороны сервера.

Например, если мы хотим отправить данные, ниже приведён код ASP.NET , чтобы сделать это. Пожалуйста, обратите внимание, что заголовок «ContentType » установлен в «text/event-stream »:

Response.ContentType="text/event-stream"; Response.Expires=-1; Response.Write("data: " + DateTime.Now.ToString()); Response.Flush();

Чтобы попросить клиент повторить запрос через 10 секунд.

Response.Write("retry: 10000");

Если вы хотите привязать обработчик события на стороне клиента, используйте метод «addEventListener », как показано ниже.

source.addEventListener("message", function(e) { console.log(e.data); }, false);

Следующее сообщение сервера вызовет javascript функцию «message »:

event: message data: hello

Расскажите о концепции локального хранилища в HTML 5

Часто нам нужно хранить информацию о пользователе на его локальном компьютере. Допустим, пользователь наполовину заполнил большую форму, и неожиданно пропадает интернет соединение.

Поэтому хорошо было бы хранить эту информацию локально у пользователя, а когда интернет соединение восстановится, пользователь использовал бы её и отправил на сервер.

Современные браузеры имеют хранилище, называемое «Локальным хранилищем » («Local storage »), где вы можете хранить эту информацию.

Как мы можем добавлять и удалять данные из локального хранилища?

Данные добавляются и удаляются из локального хранилища с помощью пары «ключ-значение ». Ниже приведён пример кода добавления страны «India » с ключом «Key001 »:

localStorage.setItem(“Key001”,”India”);

Получить данные из локального хранилища можно с помощью метода «getItem », передав ему значение ключа:

var country = localStorage.getItem(“Key001”);

Также вы можете хранить объекты JavaScript, как показано ниже:

var country = {}; country.name = “India”; country.code = “I001”; localStorage.setItem(“I001”, country); var country1 = localStorage.getItem(“I001”);

Если вы хотите хранить данные в формате JSON, вы можете использовать функцию «JSON.stringify »:

localStorage.setItem(“I001”,JSON.stringify(country));

Какой срок жизни у локального хранилища?

Локальное хранилище не имеет срока жизни. Данные будут храниться до тех пор, пока пользователь не удалит их из своего браузера, либо вы не удалите их, используя код JavaScript.

В чём разница между локальным хранилищем и cookies?

	Cookies	Локальное хранилище
Сторона клиента / Сторона сервера	Данные доступны как на стороне клиента, так и на стороне сервера. Cookies пересылаются на сервер при каждом запросе	Данные доступны только на стороне браузера клиента. Сервер не может получить доступ к данным локального хранилища до тех пор, пока они не отправлены на сервер методом POST или GET
Размер	4095 байт для каждой cookie	5 Мб для каждого домена
Срок хранения	Cookies имеют срок хранения. После истечения этого срока, cookie удаляются	Срока хранения не существует. Данные будут храниться до тех пор, пока пользователь не удалит их из своего браузера, либо вы не удалите их, используя код JavaScript

Что такое хранилище сессии и как его создать?

Хранилище сессии похоже на локальное хранилище, но данные действительны на протяжении сессии. Проще говоря, данные удаляются, как только вы закрываете браузер.

Чтобы создать хранилище сессии, вам нужно использовать конструкцию «sessionStorage.имяпеременной». В следующем коде мы создаём переменную «clickcount ».

Если вы обновите страницу в браузере, счётчик увеличится. Но если вы закроете браузер и откроете его снова, переменная «clickcount » снова установится в ноль:

if(sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount = 0; }

В чём разница между хранилищем сессии и локальным хранилищем?

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

Что такое WebSQL?

WebSQL – это реляционная база данных, работающая на стороне браузера клиента. Внутри браузера есть реляционная СУБД, в которой вы можете выполнять SQL запросы.

Является ли WebSQL частью спецификации HTML 5?

Нет. Многие относят его к HTML 5, но WebSQL не является частью спецификации HTML 5. Спецификация основана на SQLite.

Так как же можно использовать WebSQL?

Для начала нам нужно открыть базу данных, с помощью функции «openDatabase », как показано ниже. Первый аргумент – это имя базы данных, далее версия, простое текстовое название и размер базы данных.

var db=openDatabase("dbCustomer","1.0","Customer app’, 2 * 1024 * 1024);

Выполнять запросы можно с помощью функции «transaction », вызывая внутри неё метод «executeSql »:

db.transaction(function (tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS tblCust(id unique, customername)"); tx.executeSql("INSERT INTO tblcust (id, customername) VALUES(1, "shiv")"); tx.executeSql("INSERT INTO tblcust (id, customername) VALUES (2, "raju")"); }

В случае если вы выполняете запрос «select », вы получаете данные в коллекцию «results », которую можно обходить и отображать результаты на странице:

db.transaction(function (tx) { tx.executeSql("SELECT * FROM tblcust", , function (tx, results) { for (i = 0; i < len; i++) { msg = "

" + results.rows.item(i).log + "

"; document.querySelector("#customer).innerHTML += msg; } }, null); });

Что такое кэш приложения в HTML5?

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

Кэш приложения помогает вам определить, какие файлы должны быть кэшированы, а какие нет.

Так как же нам реализовать кэш приложения в HTML 5?

Нам необходимо создать файл «манифеста ». Файл «манифеста » помогает вам определить, как должно работать кэширование. Ниже приведена структура файла «манифеста »:

CACHE MANIFEST # version 1.0 CACHE: Login.aspx

• Все файлы «манифеста» начинаются со строки CACHE MANIFEST;
• # (хэш тэг) помогает указать версию файла кэша;
• Команда CACHE определяет, какие файлы должны быть кэшированы;
• Заголовок «ContentType» файла должен быть «text/cache-manifest».

Ниже приведён манифест кэша, выведенный с помощью ASP.NET C#:

Response.ContentType = "text/cache-manifest"; Response.Write("CACHE MANIFEST n"); Response.Write("# 2012-02-21 v1.0.0 n"); Response.Write("CACHE: n"); Response.Write("Login.aspx n"); Response.Flush(); Response.End();

После того, как манифест кэша создан, следующий этап – указать ссылку на файл манифеста на странице HTML, как показано ниже:

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

Как обновить кэш приложения браузера?

Кэш приложения обновляется при смене номера версии, указанного после тэга «# », как показано в следующем коде:

CACHE MANIFEST # version 2.0(new) CACHE: Login.aspx Aboutus.aspx NETWORK: Pages.aspx

Что такое fallback в кэше приложения?

Команда fallback в кэше приложения помогает вам указать файл, который должен быть отображён, когда сервер недоступен.

Например, в манифесте, приведённом ниже, мы говорим, что если кто-то заходит в «/home», когда сервер недоступен, то должна быть возвращена страница «homeoffline.html »:

FALLBACK: /home/ /homeoffline.html

Что такое network в кэше приложения?

Команда network определяет файлы, которые не должны быть кэшированы. Например, приведённый ниже код говорит, что страница «home.aspx» никогда не должна кэшироваться, и не должна быть доступна в автономном режиме:

NETWORK: home.aspx

Данная публикация представляет собой перевод статьи «40 important HTML 5 Interview questions with answers » , подготовленной дружной командой проекта

Хорошо Плохо

Это — не статья для супер-гуру-вебмастеров. И даже не для начинающих веб-разработчиков. Эта статья задумывалась как памятка об HTML5 для журналистов и аналитиков.

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

Также важно не забывать, что так называемые "демо-HTML» с самим HTML5 не имеют ровным счетом ничего общего. Например, во многом из Google Doodles используется DHTML — технология HTML 4 начала 2000х.

Зачем придумали HTML5?

HTML4 трещал по швам под напором новых видов приложений. Многие вещи были просто недоступны и требовали плагинов типа Adobe Flash или Microsoft Silverlight. Приходилось идти на всяческие уловки и ухищрения, использовать нестандартные, недокументированные приемы, что было не очень-то надежной основой для сайтов, созданных для заработка.

Как много браузеров поддерживают HTML5?

Смотря как посмотреть. Если исходить из того, что HTML5 произошел от HTML4, то все барузеры поддерживают какие-то свойства HTML5.

А с другой стороны, если вы хотите знать, какие браузеры содержат все свойства ядра HTML5 — то ни один. Они все обеспечивают выполнение некоторых частей спецификации (которая насчитывает более 700 страниц), но ни один не поддерживает все одновременно.

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

Кто является движущей силой HTML5?

Началось все в 2004 году, в Opera, под руководством Яна Хиксона. Постепенно присоединились и другие браузеры. Хиксон ушел из Оперы в Google, где продолжает работать над спецификацией.

Будет справедливо сказать, что производители браузеров совместно координируют работу над спецификацией, равно как и W3C и многие другие организации и частные лица. Говоря обобщенно, процессом руководят потребности веб-разработчиков.

Кто пользуется HTML5?

Множество людей и компаний: Boston Globe Newspaper ; Nationwide Building Society , Yell.com и сотни других. На HTML5gallery.com собрано множество сайтов, применяющих HTML5-технологии.

Когда будет завершена работа над HTML5?

Возможно, в 2012 году. А может и в 2022. Это не так важно, важно другое: он сегодня уже поддерживается браузерами, а, следовательно, мы можем использовать его уже сегодня.

Сказать, что мы не можем пользоваться HTML5, потому что его развитие не завершено — это все равно, что сказать, что мы не можем говорить на русском языке, потому что он все еще развивается.

Правда ли, что HTML5 несовместим с Internet Explorer?

Абсолютная ерунда. IE9 хорошо поддерживает HTML5. В более старые браузеры можно добавить поддержку некоторых API с помощью JavaScript -технологии polyfilling, а также плагинов Flash и Silverlight. Элемент canvas может работать некорректно в версиях IE ниже 9. В основном, причиной проблем в старых браузерах является медленный движок JavaScript. Для отображения видео в старых браузерах можно использовать резервный Flash-вариант.

Стоит отметить, что многие возможности HTML5, такие, как атрибут contenteditable, позволяющий пользователю редактировать содержимое объекта, были придуманы Microsoft и включены уже в IE5.

Правда ли, что HTML5 предназначен для мобильных устройств?

Совершенно нет. В основе HTML5 лежат определенные принципы разработки , один из которых гласит о повсеместном его применении:

«Элементы должны разрабатываться для повсеместного использования... Элементы, по возможности, должны работать независимо от платформы, устройства и носителя.»

С другой стороны, есть особенности HTML5, которые особенно полезны в свете использования мобильных устройств. Если рассматривать «настоящий» HTML5, очень полезной окажется, к примеру, возможность продолжать работать с сайтом в оффлайне с помощью технологии Application Cache (“Appcache”).

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

Если рассматривать HTML5 в значении «новые супер-веб-технологии», то огромным плюсом является геолокация.

Вытеснит ли HTML5 Adobe Flash?

Нет — по крайней мере, я на это надеюсь. Многие годы Flash оставался единственной возможностью внедрить видео на страницу. Теперь, с появлением HTML5, появилось соперничество, в котором будут развиваться обе технологии, что просто замечательно для разработчиков.

Apple приняли решение не включать поддержку Flash своими iOS устройствами, что дает огромный толчок видео HTML5. Однако, стоит заметить, что iOS — не самая лучшая платформа и для HTML5.

Flash в любом случае остается полезным кросс-браузерным инструментом. к тому же, следует понимать, что Flash — это больше, чем просто видео. Некоторые простые его функции, используемые в играх, перехвачены HTML5 canvas, а часть примитивных анимаций, для которых он ранее использовался, перекочевала в CSS3. Однако, из соображений удобства создателей тонкой анимации, используемой в играх и мультфильмах, конечно, лучше пользоваться Flash , в котором куда более удобный интерфейс, упрощающий разработчикам многие рабочие моменты. Со временем, когда будут разработаны удобные оболочки для работы с canvas это изменится, но еще не сегодня и не завтра.

Комментарии

емеля
4 октября 2011 в 22:29

html1 *THUMBS UP*

Olga Ответ:
октября 5, 2011 at 11:26 дп

Wdtime.ru Ответ:
февраля 20, 2016 at 10:32 пп

Полный список структурных тегов HTML 5 — wdtime.ru/blog/strukturnye-tegi-html-5

маргарита
5 октября 2011 в 14:01

емеля — дурачок, вы что, сказки не читали? :-D

Бублик
25 ноября 2011 в 14:47

жаль что некоторые пользователи немогут понять что есть браузеры лучше internet explorera:(

Olga Ответ:
ноября 25, 2011 at 4:03 пп

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

Бублик Ответ:
ноября 25, 2011 at 4:11 пп