5 html


HTML и HTML5 – в чем разница?

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

HTML и HTML5 – в чем разница?

Основы HTML

HTML код указывает браузеру, как рендерить контент. Разметка представляет собой базовую структуру страниц. На протяжении десятилетий HTML считался краеугольной технологией в интернете наряду с CSS и JS. Стандарты HTML и CSS регулируются консорциумом всемирной сети.


Из названия следует, что HTML нельзя назвать языком программирования. Это язык разметки, используемый для организации данных в интернете. HTML документы состоят из HTML элементов, представленных в виде тегов. Теги записываются в угловых скобках и разделяют контент на категории. Простой пример HTML структуры с сообщением «Hello World» выглядит следующим образом:

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

История HTML

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

Последнее крупное обновление с 1990-х было направлено на интернационализацию языка, а также на то, чтобы упростить программистам со всего мира возможности для улучшения HTML. Как часть этих усилий, в качестве официальной кодировки HTML была принята Universal Coded Character Set. Этот шаг улучшил отображение множества символов и акцентов, которые есть в человеческих языках и диалектах.

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

HTML или HTML5: эволюция веб-разработки


Интернет сейчас сильно отличается от того, что был в 1999 году, когда вышло последнее крупное обновление HTML 4.01. Сейчас есть такие технологии, которые мы не могли себе представить на рубеже веков. Смартфоны, планшеты и другие мобильные устройства – это новые вызовы для инженеров и разработчиков ПО. Ускоряющаяся глобализация сделала стандартизацию интернет технологий приоритетной задачей для всех с долей в мировой экономике. Мировое потребление интернета растет год за годом, и используемые технологии по прогнозам будут развиваться все быстрее и быстрее.

HTML и HTML5 – в чем разница?

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

HTML – плод совместных усилий World Wide Web Consortium или W3C и Web Hypertext Application Technology Working Group или WHATWG. В 2006 организации объединились, чтобы снизить зависимость от плагинов, улучшить обработку ошибок и заменить скрипты на разметку. Как следствие, HTML5 сильно упростил процесс создания веб-приложений.

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


Постепенное внедрение

HTML4 являлся стандартом на протяжении 15 лет, поэтому многие разработчики до сих пор им пользуются. Браузеры еще долго будут поддерживать этот стандарт. Старые браузеры могут «игнорировать» новый HTML5 код при рендеринге контента. По факту все современные браузеры хорошо поддерживают HTML5 спецификацию: Chrome, Firefox, Opera и Safari. HTML5 постоянно развивается, поэтому браузеры в новых версиях добавляют поддержку новых свойств. К нашему счастью, все основные браузеры одновременно добавляют поддержку новых свойств, как только те выходят.

Можете проверить свой браузер на поддержку HTML5 с помощью HTML5test.

HTML и HTML5 – в чем разница?

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

HTML или HTML5: что нового?

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

На изображении ниже показаны основные свойства HTML5, разбитые по категориям.


HTML и HTML5 – в чем разница?

Какие преимущества для пользователей есть в HTML5 по сравнению с HTML?

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

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

Какие преимущества для веб-разработчиков есть в HTML5 по сравнению с HTML?

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

1. Одинаковая обработка ошибок

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

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

В жизни HTML ошибки неизбежны. По данным Rebuildingtheweb в 90% страниц присутствуют ошибки в коде. Обработчик ошибок просто необходим для правильного отображения сайтов. Как следствие, закодированная обработка ошибок экономит разработчикам браузеров много времени и денег. Нельзя занижать преимущества четко заданного алгоритма парсинга.


2. Улучшенная поддержка свойств для веб-приложений

Другой целью HTML5 было – заставить браузеры работать, как платформы приложений. Сайты стали намного сложнее, поэтому разработчики научились обходить расширения браузеров и другие серверные технологии. HTML5 позволяет контролировать производительность сайта. Множество хаков на Flash и JS, используемых в HTML4, вошли в новую спецификацию языка. Эти изменения обеспечивают более плавный и быстрый пользовательский опыт.

3. Усовершенствованная семантика элементов

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

4. Максимальная поддержка мобильных устройств

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

Другие заметные улучшения

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


1. Поддержка пользовательских data-атрибутов

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

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

2. Больше никаких кук

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

Объект localStorage принадлежит к глобальному пространству имен window, то есть он доступен из любой точки скрипта. В локальное хранилище можно помещать только строки, однако с помощью методов JSON.stringify() и JSON.parse() можно с легкостью помещать туда все новые данные. Есть и другой объект sessionStorage, позволяющий хранить данные до тех пор, пока пользователь не закрыл окно браузера.


3. Автофокус на полях формы

Атрибут автофокуса позволяет разработчикам указать поле, которое получит фокус после загрузки страницы. В одном документе можно указать атрибут autofocus только для одного элемента, пользователь может переписывать значение, выбирая другое поле. Например, если добавить атрибут autofocus к полю Last Name, как показано на скриншоте ниже, то после загрузки страницы поле Last Name автоматически подсвечивается.

HTML и HTML5 – в чем разница?

4. В тегах script and link больше не нужно указывать атрибут type

В HTML5 подразумевается, что теги script и link ссылаются на скрипты и стили, то есть необходимость в использовании атрибута type отпала.

Будущее HTML и HTML5

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

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

Источник: https://www.keycdn.com/

Редакция: Команда webformyself.


5 html

webformyself.com

Введение

Я, разработчик 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.


Если я не вставлю в документ <!DOCTYPE html>, будет ли работать 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 из разметки на рисунке:

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

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

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

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

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

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

  • Color;
  • Date;
  • Datetime-local;
  • Email;
  • Time;
  • Url;
  • 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 код. Он определяет область, в которой вы можете рисовать:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как уничтожить объект web worker?

Зачем в HTML 5 введены события server-sent?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое WebSQL?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Перевод статьи «40 important HTML 5 Interview questions with answers» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Описание типа документа HTML5

В первой строке каждого HTML5-документа всегда дается описание типа документа. Это описание ясно указывает, что далее следует HTML5-содержимое, и выглядит следующим образом:

Первое, что бросается в глаза в описании типа документа HTML5 — это его поразительная простота. Сравните его, например, с неуклюжим описанием типа документа, который требуется использовать веб-разработчикам при работе со строгим XHTML 1.0:

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

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

Все это порождает непростой вопрос: если HTML5 — живой язык, то зачем тогда для страницы вообще нужно описание типа документа?

Ответ на этот вопрос таков: описание типа документа продолжает использоваться по историческим причинам. При обработке страницы с отсутствующим описанием типа документа большинство браузеров (включая Internet Explorer и Firefox) переходят в режим совместимости (quirks mode). В этом режиме они пытаются отобразить страницу с учетом ошибок в правилах, которые использовались в более ранних версиях. Проблема с этим состоит в том, что режим совместимости одного браузера может отличаться от режима совместимости другого браузера, вследствие чего страницы, разработанные для одного браузера, на другом браузере будут, скорее всего, отображаться с ошибками, такими как неправильный размер шрифта, нарушенная структура оформления и т.п.

А обнаружив на странице описание типа документа, браузер знает, что обработку этой страницы требуется выполнять, следуя более строгим правилам режима стандартов (standards mode), который обеспечивает единообразное форматирование и структуру страницы при ее отображении любым современным браузером. За некоторыми исключениями, браузеру совершенно безразлично, какой именно тип документа указан в описании. Он просто проверяет, что страница имеет какое-либо описание типа документа. Описание типа документа HTML5 просто самое короткое действительное описание типа документа, которое задействует режим стандартов браузера.

Кодировка символов

Кодировка — это стандарт, указывающий компьютеру, каким образом преобразовывать текст в последовательность байтов при записи текста в файл (а также, как выполнять обратное преобразование при открытии файла). По историческим причинам в мире существует множество разных кодировок. В настоящее время практически на всех веб-сайтах используется компактная и быстрая кодировка UTF-8, поддерживающая все символы других алфавитов, которые вам когда-либо могут потребоваться.

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

HTML5 делает эту задачу легкой. Для этого нужно лишь вставить элемент <meta> в самом начале блока <head> (или, если элемент <head> не используется, сразу же после кода описания типа документа):

Инструменты для веб-разработки, такие как Dreamweaver или Expression Web, вставляют этот элемент автоматически при создании страницы. Эти инструменты также обеспечивают сохранение файлов в кодировке UTF. Но при создании веб-страницы с помощью обычного текстового редактора, чтобы обеспечить сохранение файлов в правильной кодировке, может потребоваться выполнить дополнительные шаги.

Язык

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

Чтобы указать язык для какого-либо содержимого, используется атрибут lang в любом элементе разметки с заданием кода требуемого языка. Код для русского языка — ru, а для английского — en. Коды для других языков можно узнать на странице people.w3.org/rishida/utils/subtags.

Вставить в веб-страницу информацию о языке легче всего через элемент <html>:

Информация о языке также может быть полезной, если страница содержит текст на разных языках, который нужно прочитать с помощью программы чтения экранного текста. В таком случае атрибут lang с кодом соответствующего языка вставляется в нужном месте документа, например, в элементы <div>, охватывающие текст на разных языках. Таким образом, программа чтения экранного текста способна определить, какой текст она может читать.

Добавление таблицы стилей

Практически в каждой странице должным образом разработанного профессионального веб-сайта используются таблицы стилей. Для указания требуемой таблицы стилей используется элемент <link> в блоке <head> документа HTML5:

Этот способ похож на указание таблиц стилей в традиционных HTML-документах, но немного проще. Так как существует единственный язык каскадных таблиц стилей — CSS, то в добавлении атрибута type=»text/css», который требовался ранее, больше нет надобности.

Добавление JavaScript-кода

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

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

Атрибут language=»JavaScript» не является обязательным, т. к. если не указан какой-либо другой язык сценариев (а поскольку JavaScript — единственный широко-поддерживаемый язык сценариев для HTML, то вероятность такого развития ничтожно мала), браузеры автоматически предполагают, что используется JavaScript. Но даже ссылаясь на внешний файл с кодом JavaScript, все равно нужно помнить о закрывающем теге </script>. Если упустить этот тег по недосмотру или при попытке укоротить код, используя синтаксис пустых элементов, то страница не будет работать должным образом.

Если вы уделяете много времени тестированию своих страниц с JavaScript в Internet Explorer, может быть полезным добавление метки MOTW (Mark of the Web — метка особенности сети) в блок <head> сразу же после строки кодировки. Делается это таким образом:

Эта строка кода указывает Internet Explorer обрабатывать страницу таким образом, как будто бы она была загружена с удаленного веб-сайта. В противном случае IE переключается в особый режим блокировки, выводит предупреждение безопасности в строке сообщений и отказывается исполнять любой код JavaScript до тех пор, пока вы не нажмете кнопку «Разрешить заблокированное содержимое».

Все другие браузеры не обращают внимания на метку MOTW и используют одни и те же настройки безопасности как для страниц, загружаемых с удаленных веб-сайтов, так и для локальных файлов HTML.

professorweb.ru

Что такое HTML5?

Зто зависит от того, о чем идет речь. Выражение «HTML5» используют в трех разных значениях:

Спецификация HTML5

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

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

    Ключевые понятия:

  • Его разработали для обеспечения взаимодействия страниц в разных браузерах. Сегодня мы используем различные браузеры (к примеру, на работе у нас может стоят IE, в телефоне — Safari или Opera, а дома -Firefox) и было бы неразумно и досадно, если бы сайт не работал бы в чем-то из них.
  • Все производители браузеров — – Opera, Mozilla (Firefox), Apple (Safari), Microsoft (Internet Explorer), Google (Chrome) — все они сотрудничают между собой, равно как и с еще кучей органицазий и частных лиц: с Netflix, Adobe, IBM, HP, BBC и многим другими.
  • Он разработан, чтобы расширить возможности современного веба, не нарушая при этом работы уже существующих веб-страниц.
  • Он может соревноваться с плагинами типа Microsoft Silverlight и Adobe Flash, которые сами по себе были созданы, чтобы закрыть дыры в окаменелом стандарте HTML4.

HTML5 и его друзья

в дополнение к самому ядру HTML5, WHATWG разработали другие спецификации, такие как Web Workers, Web Sockets, Web Database. Все они дополняют его новыми свойствами и функциями, полезными для приложений, игр и тому подобного.

Многое из их содержимого изначально было частью самого ядра, но по некоторым производственным и организационным причинам было выведено из него. Вся группа вместе называется Web Applications 1.0.

3. Новые «супер-веб-технологии»

Часто большинство людей, налеких от веб-разработки (а часто и не очень сведущие разработчики), говоря «HTML5», подразумевают целый ряд технологий: ядро HTML5, его дополнения — и еще уйму вообще никак не связанных с ними технологий, таких как геолокация (способность вашего браузера «распознавать» ваше местонахождение), ориенацию устройства, события касания, анимацию CSS3 (которая может заменять несложную Flash-анимацию), SVG (способ отображения графики четко и гладко на экране любого размера), и недавно вошедший сюда WebGL, позволяющий использовать популярные библиотеки 3D-графики в веб, внося трехмерность в веб-гарфику и браузерные игры.

Многое из этого разработано W3C, а WebGL, к примеру, создан Khronos Group.

Также важно не забывать, что так называемые «демо-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 это изменится, но еще не сегодня и не завтра.

Перевод — Дежурка. Автор оригинальной статьи — Bruce Lawson, один из соавторов книги Introducing HTML5.

www.dejurka.ru

Что нового в HTML5

Что нового в HTML5. Drogin.ru

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

Очень важный плюс состоит в том, что вам ничего не стоит перейти на HTML5, даже если вы так полюбили HTML4: всё потому что в новом стандарте ничего не было вырезано — вам не придется переучиваться. Достаточно просто начать и по желанию использовать новые элементы.

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

Новинка в HTML5:

  1. Великолепные формы. Дополнительные возможности к функционалу и внешнему виду форм — вот что нового подготовил для нас новый HTML. Были добавлены множество новых значений, которые значительно упрощают работу с формой. Многие из них способны заменить собой некоторые скрипты и сделать код чище, не теряя в валидности. Среди прочих можно увидеть такие сочные новинки как: ползунок для прокрутки, выбор даты — неплохо, правда? Появился подсказывающий текст, позволяющий создать вполне уютный интерфейс формы. Он активируется во время активации формы и исчезает по истечению времени, либо по клику на него.Проблема формы email-почты частенько была проблемой у устаревших браузеров — они просто отказывались работать с ней. Теперь же этот приятный элемент доступен для всех, а если ваш браузер неактуален — будет выведена простая текстовая форма, взамен формы с типом email.

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

  2. Танк мультимедии — canvas. Canvas — это новый тег в HTML5. Его возможности многогранны. Пожалуй, это прорыв и главный огромный жирный плюс для этого стандарта. Этот тег позволяет делать такие крутые элементы как:
    • рисование
    • проигрывание видео
    • построение оффлайновых веб-приложения
    • создание и работа с геолокацией
    • создание локального хранилища
    • и даже создание игр!

    Несомненно — вы поражены, если не знали об этих возможностях до сих пор!

    Все эти возможности до HTML5 можно было реализовать только за счёт громоздкого Flash, Gears или же JavaScript. Теперь это доступно без применения этих плагинов и скриптов! Только чистый html без сложностей и нагрузки на сайте.

    Самое интересное, что всё это УЖЕ доступно даже на IE9! Более того, уже идёт разговор о решении проблемы поддержки Canvas устаревшими браузерами.

    Я обязательно сделаю ещё один пост про создание игр на HTML5 — это будет очень круто, я уверен! Можете посмотреть пример игры по этой ссылке. Впечатляет, не правда ли?

  3. Автофокус. Наверняка все мы замечали поисковую форму Google, при заходе на неё. Как только мы зашли на страницу — форма поиска уже активирована и готова к набору поискового запроса.Раньше этот эффект создавался только с помощью JavaScript. В HTML5 это стало гораздо проще и надёжнее: достаточно указать к нужной форме данный атрибут:

    После этого фокус будет активен для этой формы. Если по ошибке было введено 2 атрибута — он не будет работать.

  4. Микроданные. Этот атрибут позволит добавить немного семантики на нашу страницу. В нём можно указать, к примеру, что какая-либо из картинок имеет доступ под специальной лицензией. Это положительно влияет на сайт, если микроданные поддерживаются. В противном случае — этот атрибут будет проигнорирован.
  5. История с API. По большей части это способ манипулировать историей браузера. HTML5 принес нам новый способ добавления записей в историю браузера, а также реакцию на удаление этих записей из стека, при возвращении назад (кнопка браузера «назад»). Таким образом, URL может выполнять свою работу как уникальный идентификатор для текущего ресурса, даже в нагруженных скриптами приложениях, которые не всегда полностью обновляют страницу.

 

HTML5 - какие новые теги? Drogin.ru

  • <article> используется для контента типа новость, статья, запись блога, форум и т.п.
  • <aside> полезен для размещения рубрик, ссылок на архив, меток и прочего. Обычно находится сбоку от контента и имеет привычное нам имя «сайдбар»
  • <audio> предназначен для воспроизведения аудио-файлов на странице.
    Имеет атрибуты:

    1. Воспроизводит аудио-файл с этим атрибутом сразу после загрузки страницы.
    2. Добавляет панель управления к аудио-файлу. Вид и функции панели задаются исходя из браузера. Может содержать: воспроизведение, паузу, перемотку, уровень громкости и другие элементы навигации.
    3. Зацикливает воспроизведение аудиозаписи.
    4. Используется, чтобы выключить звук воспроизводимой аудиозаписи.
    5. Позволяет загрузить аудио-файл вместе с страницей и последующим воспроизведением. При конфликте с autoplay, игнорируется.
    6. Позволяет задать путь к аудиозаписи.
  • <command> позволяет задать команду к кнопке. Имеет вид переключателя.
    Может иметь атрибуты:

    1. Позволяет активировать команду.
    2. Задаёт — доступна команда или нет.
    3. Позволяет задать адрес картинки как команду.
    4. Этот атрибут нужен для указания названия команды
    5. Позволяет задать имя группы переключателей
    6. Определяет тип команды. Возможны значения: checkbox, command, radio. По умолчанию установлено command.
  • С помощью тега <datalist> создаётся целый список параметров, которые связаны с текстовым полем по ID. Идентификатор нашего datalist должен быть таким же, как и у параметра list.
  • Используется для хранения информации, которую можно скрыть или показать по требованию пользователя.

    Имеет один параметр, который определяет то или иное действие:

  • Тег <dialog> был создан для создания всплывающих и модальных окон . Поддерживается в Chrome, Safari и Opera.
  • <embed> используется для загрузки и отображения видео-файлов, флэш—роликов и прочих файлов, которые браузер не может понять. Зачастую сопровождается установкой какого-либо вспомогательного плагина в браузер.

    Может иметь атрибуты:

    1. Определяет способ выравнивания на странице.
    2. Задаёт ширину и высоту блока, соответственно.
    3. Позволяет скрыть объект.
    4. Позволяет задать горизонтальный отступ от блока.
    5. Адрес, где можно скачать плагин.
    6. Позволяет задать путь к файлу.
    7. Задаёт тип объекта.
    8. Позволяет задать вертикальный отступ от блока.
  • <figure> позволяет группировать самые разные объекты.
  • <header> применяется для создания «шапки» сайта. Обычно там находится заголовок.
  • <hgroup> используется для группировки всех заголовков страницы. Внутри располагаются теги заголовков <h1> — <h6>.
  • <mark> помечает текст как важный. Никак не отличается визуально от остального текста.
  • Используется для группировки ссылок и задаёт навигацию по сайту. Возможно несколько тегов <nav>.
  • <section> обозначает раздел документа. Используется для таких блоков, как новости, контакты. Часто содержит заголовок.
  • <time> используется для определения таких параметров, как дата и время.

    Имеет два параметра:

    1. Задаёт параметры даты и времени.
    2. Больше не является валидным.
  • <video> предназначен для воспроизведения видео-файлов на странице.

    Имеет точно такие же атрибуты, как и тег <audio>.

 

Как включить HTML5

Подключить HTML5 очень просто — и это только сопутствует переходу на него. Нам потребуется простая одна строчка в самом начале нашего документа:

Вот и всё! Поздравляю с переходом на HTML5 — теперь можно воспользоваться всеми преимуществами стандарта.

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

 

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

 

Дорога появляется под стопами идущего

drogin.ru

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

Если взглянуть на недавнюю историю веб-разработки, то можно с уверенностью сказать, что её нынешний виток берёт начало с конца 2013 – начала 2014 годов, когда была официально принята новая спецификация языка гипертекстовой разметки HTML5.

Основным новшеством стандарта стала семантизация блоков информации на веб-страничках, которая окончательно ознаменовала собой отход от устаревшей табличной вёрстки. Современная блочная вёрстка с использованием HTML5 предусматривает использование специальных блоков, которые отвечают за размещение в них тех или иных фрагментов веб-страницы: шапки (<header>), меню (<nav>), статьи (<article>), любой значимой секции (<section>), подвала (<footer>) и т.п.

Кроме семантизации большой вклад HTML5 внёс в развитие поддержки мультимедиа. Появилась возможность штатно воспроизводить видео (<video>), звуковые файлы (<audio>) и даже создавать интерактивные области для исполнения скриптов (<canvas>). Фактически эти новые теги практически везде заменили собой устаревший тег <object>, который использовался для вставки различных флеш-плееров.

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

Полная шпаргалка по HTML5. Мэт Бэннер

Формы

Формы
<form>…</form> Теги, использующиеся для создания форм. Дополняются атрибутами, от которых зависит итоговый внешний вид формы.
method=»» Атрибут указывающий HTTP-метод, который определяет как будут отправлены данные из формы (прим. от переводчика «GET» или «POST»).
autocomplete Атрибут включающий/выключающий автозаполенение формы.
accept-charsets Задаёт допустимые кодировки текста при отправке формы.
<fieldset>…</fieldset> Задаёт допустимые кодировки текста при отправке формы.
<legend>…</legend> Заголовок элемента fieldset.
action=»url» Задаёт путь для передачи данных из формы.
enctype=»» Указывает способ шифрования данных для передачи их на сервер. Используется только с методом POST
novalidate Отключает валидацию формы перед отправкой.
target Указывает, где должен отобразиться ответ после отправки формы. Допустимые значения: _blank, _self, _parent, _top.
<label>…</label> Надпись, позволяющая пользователю понять, что нужно вводить в то или иное поле.
<input /> Создаёт поле определённого типа для ввода данных пользователем.

HTML форма

Ссылки

Гиперссылки
<a href=»»>…</a> Создаёт обычную гиперссылку с заданным анкорным текстом.
<a href=»tel://###»>…</a> Ссылка с кликабельным номером телефона. Отлично подходит для мобильных пользователей.
<a href=»#name»>…</a> Якорная ссылка, ведущая пользователя к определённому блоку с укакзанным идентификатором на странице.
<a href=»mailto:»>…</a> Ссылка, создающая электронное письмо на заданный EMail-адрес.
<a name=»»>…</a> Ссылка, указывающая на уникальное место в документе (прим. от переводчика: вместо «name» в HTML5 правильнее использовать «id»).

Код ссылки и оформленная кнопка

Поля ввода

Атрибуты полей ввода
type=»» Определяет тип поля ввода, типа, текст, пароль, время/дата, чекбокс и т.п.
value=»» Значение поля ввода.
maxlength=»» Максимальное количество символов допустимое для ввода.
step=»» Числовые интервалы для ввода в поле.
height=»» Высота в пикселях для элемента <input>.
pattern=»» Проверяет введённые данные на соответствие определённому значению для обеспечения корректности ввода.
max=»» Максимальное значение для элемента <input>.
disabled Отключает возможность ввода для элемента <input> в форме.
<select>…</select> Создаёт выпадающий список для выбора нужной опции.
name=»» Имя формы.
size=»» Ширина поля ввода в символах.
required Атрибут элемента <input>, проверяющий заполнено ли поле перед отправкой формы.
width=»» Ширина поля ввода в пикселях.
placeholder=»» Подсказка для пользователя, отображающая пример значения поля <input>.
min=»» Минимальное значение для элемента <input>.
autofocus Определяет фокус на элементе после загрузки страницы.
<textarea>…</textarea> Определяет большое поле для ввода текста длинных сообщений.

Поля ввода форм

Базовые теги

Стандартная структура документа
<html>…</html> Эти теги используются только в начале и в конце HTML-документа. Он также известен как «корневой элемент». Использование этих тегов сообщают, что веб-страничка написана на HTML5 и все остальные теги внутри них являются отформатированным при помощи HTML текстом.
<head>…</head> Используется для группирования специфической информации о странице. Сюда включаются теги заголовка, МЕТА-описания, а также ссылки на скрипты и таблицы стилей.
<title>…</title> Используется для создания тега заголовка страницы. Внутрь тега помещается заголовок, который используется как поисковыми системами, так и пользователями.
<body>…</body> Между этими тегами помещается весь контент страницы, предназначенный для пользователей. Сюда относится текст, изображения и графические элементы.
Пример кода типичной веб-страницы:
<base /> Задаёт базовый URL и определяет основу для всех относительных ссылок в документе.
<meta /> Включает дополнительную информацию о странице. Сюда относятся описания, указание автора, даты публикации, ключевых слов и другие невидимые пользователю данные.
<link /> Создаёт ассоциации с внешними документами, например, таблицами стилей.
<style>…</style> Используется для включения в документ информации о стилях оформления страницы, которые обычно написаны на CSS.
<script>…</script> Включает скрипты или ссылки на них.

Пример внешнего вида кода HTML-страницы:

Холст

HTML-элемент <canvas> используется для рисования графики «на лету» посредством скриптинга (чаще всего на JavaScript).

Элемент <CANVAS>
Атрибуты
width=»» Ширина холста (по умолчанию 300 пикселей).
height=»» Высота холста (по умолчанию 150 пикселей).
Методы
string Опциональная строка, содержащая любые аргументы, передающиеся DataURL.
object getContext(строка contextID).
2D-контекст
Атрибуты
canvas Объект холста (только для чтения).
methods Сохранение (save()) и восстановление (restore()).
Рисование изображений
Методы
drawImage(Object image, float dx, float dy [optional] float dw, float dh); Значением может быть объект типа изображение, число с плавающей запятой (координаты точки x и y) и (опционально) числа с плавающей запятой для обозначения ширины и высоты.
Стиль линий
Атрибуты
linewidth=»» Число с плавающей запятой, обозначающее толщину линии (по умолчанию: 1.0).
linecap=»» Строка, указывающая тип края линии. Доступны значения «butt» (обычный прямоугольный край), «round» (заокругленный край), «square» (квадратный край (в отличие от «butt» по краям добавляются квадраты, увеличивающие общую длину линии) (по умолчанию: «butt»).
lineJoin=»» Строка, указывающая тип соединения линий. Доступны значения «round» (заокругленный угол), «bevel» (обрезанный угол), «miter» (острый угол) (по умолчанию: «miter»).
MiterLimit=»» Число с плавающей запятой, задающее ограничение на добавление соединению линий заострения угла (по умолчанию: 10).
Трансформация
Методы
scale(float x, float y) Числа с плавающей запятой, обозначают величину увеличения по ширине и высоте (прим. от переводчика).
rotate(float angle) Число с плавающей запятой, обозначающее угол вращения в радианах (прим. от переводчика).
translate(float x, float y) Числа с плавающей запятой, задают координаты точки отсчёта для текущего контекста рисования (прим. от переводчика).
transform(float m11, float m12, float m21, float m22, float dx, float dy) Числа с плавающей запятой, образуют три пары и задают: координаты нового вектора Ox, координаты нового вектора Oy, координаты новой точки отсчёта координат.
setTransform (float m11, float m12, float m21, float m22, float dx, float dy) Числа с плавающей запятой, означают те же параметры, что и в transform. Данная функция предназначена для сброса и переназначения ранее применённой трансформации (прим. переводчика).
Композитинг
Атрибуты
globalalpha=»» Число с плавающей запятой, обозначающее прозрачность объекта от 0 до 1 (по умолчанию: 1.0).
globalCompositeOperation=»» Строка, указывающая тип поведения перекрывающих друг друга изображений. Доступны значения:

  • «source-over» (новое изображение поверх более раннего);
  • «source-in» (отображается только часть изображения, где есть наложение. При этом отображается часть верхней фигуры);
  • «source-out» (отображается часть верхнего изображения без области пересечения);
  • «source-atop» (отображается всё старое изображение и часть нового, которая накладывается на него);
  • «destination-over» (новое изображение рисуется под более ранними);
  • «destination-in» (отображается только часть изображения, где есть наложение. При этом отображается часть нижней фигуры);
  • «destination-out» (отображается часть нижнего изображения без области пересечения);
  • «destination-atop» (отображается новая фигура и часть пересекающейся с ней нижней поверх неё);
  • «lighter» (отображаются все фигуры, но цвет в месте пересечения изменяется по принципу сложения);
  • «darker» (отображаются все фигуры, но цвет в месте пересечения изменяется по принципу вычитания);
  • «copy» (отображаются только самая верхняя фигура);
  • «xor» (отображаются все фигуры, но в месте пересечения появляется прозрачная область);

(по умолчанию: «source-over»).

Цвета, стили и тени
Атрибуты
strokeStyle=»» Любой стиль (RGB, RGBa, название) указания цвета линий обводки (по умолчанию: black).
fillStyle=»» Любой стиль (RGB, RGBa, название) указания цвета заливки (по умолчанию: black).
shadowOffsetX=»» Число с плавающей запятой, задающее смещение тени по горизонтали (по умолчанию: 0.0).
shadowOffsetY=»» Число с плавающей запятой, задающее смещение тени по вертикали (по умолчанию: 0.0).
shadowBlur=»» Число с плавающей запятой, задающее степень размытия тени (по умолчанию: 0.0).
shadowColor=»» Любой стиль (RGBa или название) указания цвета тени (по умолчанию: transparent black).
Методы
createLinearGradient(float x0, float y0, float x1, float y1) Числа с плавающей запятой, задают координаты начальной и конечной точки линейного градиента.
createRadialGradient(float x0, float y0, float r0, float x1, float y1, float r1) Числа с плавающей запятой, задают координаты начальной и конечной точки радиального градиента, а также радиус окружностей.
createpattern(object image, string repetition) Создаёт заливку заданным изображением с одним из вариантов повторения: repeat (по всей плоскости), repeat-x (повторение только по горизонтали), repeat-y (повторение только по вертикали), no-repeat (без повторения).
Текст
Атрибуты
font=»» Шрифт (по умолчанию: 10px sans-serif).
textAlign=»» Горизонтальное выравнивание текста: start (по начальной точке), end (по конечной точке), left (по левому краю), right (по правому краю), center (по центру) (по умолчанию: start).
textBaseline=»» Вертикальное выравнивание текста: top (по верхнему краю), hanging (над центральной линией для символов Юникода), middle (по середине), alphabetic (над центральной линией), ideographic (под центральной линией для символов Юникода), bottom (по нижнему краю) (по умолчанию: alphabetic).
Методы
fillText(string text, float x, float y, (опционально) float maxwidth) Строка задаёт нужный текст, числа с плавающей запятой, задают координаты начальной точки надписи и (опционально) максимальную её ширину.
measureText(string text) Возвращает объект TextMetrics, содержащий ширину текста в пикселах когда он будет нарисован (прим. переводчика).
Интерфейс TextMetrics
width Ширина TextMetrics, зависящая от контекста.
Прямоугольники
Методы
clearRect(float x, float y, float w, float h) Числа с плавающей запятой, обозначают координаты начальной точки, а также ширину и высоту прямоугольника, который нужно очистить.
fillRect(float x, float y, float w, float h) Числа с плавающей запятой, обозначают координаты начальной точки, а также ширину и высоту прямоугольника, который нужно залить цветом.
strokeRect(float x, float y, float w, float h) Числа с плавающей запятой, обозначают координаты начальной точки, а также ширину и высоту прямоугольника, который нужно обвести.
Пути
beginPath(); Объявляет начало пути.
closePath(); Объявляет конец пути.
fill(); Объявляет заливку фигур, определённую свойством fillStyle (может использоваться в качестве closePath, поскольку закрывает все контуры) (здесь и далее прим. переводчика).
stroke(); Делает видимыми контуры нарисованных фигур.
clip(); Обрезает всё, что не относится к заданной фигуре.
moveTo(float x, float y) Числа с плавающей запятой, задают координаты начальной точки для рисования.
lineTo(float x, float y) Числа с плавающей запятой, задают координаты точки, к которой нужно провести линию из текущей позиции.
quadraticCurveTo(float cpx, float cpy, float x, float y) Числа с плавающей запятой, задают координаты контрольной точки, к которой будет изгибаться кривая, и конечной точки плавной кривой Безье.
bezierCurveTo(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y) Числа с плавающей запятой, задают координаты двух контрольных точек, к которым будет изгибаться кривая, и конечной точки кривой Безье.
arcTo(float x1, float y1, float x2, float y2, float radius) Числа с плавающей запятой, задают координаты крайней точки схождения линий и конечной точки дуги, а также радиус её скругления.
arc(float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise) Числа с плавающей запятой, задают координаты центра круга, его радиус, начальный и конечный угол рисования, а также (опционально) направление рисования против часовой стрелки.
rect(float x, float y, float w, float h) Числа с плавающей запятой, обозначают координаты начальной точки, а также ширину и высоту прямоугольника, который нужно нарисовать.
isPointInPath(float x, float y) Числа с плавающей запятой, обозначают координаты проверяемой на принадлежность к пути точки.
Манипуляции с пикселями
createImageData(float sw, float sh / ImageData imagedata); Создаёт объект ImageData заданной ширины и высоты или идентичный ранее созданному объекту с именем «imagedata».
getImageData(float sx, float sy, float sw, float sh); Возвращает массив с данными о цвете заданных точек холста. При этом, если используются только координаты, массив будет одномерным (4 элемента, соответствующие цвету в формате RGBa). Если же ширина и высота захватываемой области больше 1, то массив будет представлять собой матрицу с данными о каждой точке в выбранной области.
putImageData(ImageData imagedata, float dx, float dy, [опционально] float dirtyX, float dirtyY, float dirtyWidth, float dirtyHeight); Помещает на холст объект ImageData в заданных координатах (левый верхний угол). Опционально указываются координаты левого верхнего угла относительно изображения в imageData, от которого будут рассчитываться размеры изображения и размеры вставляемого изображения.
Интерфейс ImageData
Width Ширина объекта (по умолчанию только для чтения)
Height Высота объекта (по умолчанию только для чтения)
Data CanvasPixelArray – массив всех пикселей изображения (по умолчанию только для чтения)
Интерфейс CanvasPixelArray
Length Неопределённая длина массива пикселей (по умолчанию только для чтения)

Символы

  • &#34; &quot; – кавычки: "
  • &#60; &lt; – меньше: <
  • &#160; &nbsp; – неразрывный пробел
  • &#64; – собачка: @
  • &#8482; &trade; – торговая марка: ™
  • &#38; &amp; – амперсанд: &
  • &#62; &gt; – больше: >
  • &#169; &copy; – копирайт: ©
  • &#149; &bull; – маркер-точка: •

Неподдерживаемые теги HTML5

Общие теги

Форматирование текста
<strong>…</strong> Создаёт сильный акцент на чём-либо (в браузере отображается жирным шрифтом).
<b>…</b> Тоже создаёт акцент с жирным выделением текста, но менее эффективен чем предыдущий.
<em>…</em> Тег акцентирования, который отображает текст в браузере в виде курсива.
<i>…</i> Альтернативный способ создать курсивный текст, который в основном используется для выделения реплик или имён.
<cite>…</cite> Служит для выделения связанной информации курсивом. Хорошо подходит для цитат и определений.
<pre>…</pre> Выдаёт моноширинный текст с фиксированными пробелами между символами.
<del>…</del> Служит для вывода дополнительной информации. Отображается зачёркнутым.
<ins>…</ins> Изначально используется для отображения текста, добавленного в контент. Отображается подчёркнутым.
<blockquote>…</blockquote> Обычно используется для вставки больших цитат.
<q>…</q> Сокращённый вариант вставки тега цитирования.
<br /> Создаёт разрыв строки для вывода фрагментов текста в несколько рядов.
<hr /> Создаёт горизонтальную линию-разделитель. Используется для визуального отделения новой мысли или секции на странице.
<sub>…</sub> Подстрочный текст, который вполовину меньше основного и размещается на пол-строки ниже.
<sup>…</sup> Надстрочный текст, который вполовину меньше основного и размещается на пол-строки выше.

Форматирование текста

Списки

<ol>…</ol> Создаёт последовательно нумерованный список.
<ul>…</ul> Создаёт неупорядоченный маркированный список (по умолчанию, маркер – точка).
<li>…</li> Определяет каждый элемент нумерованного или маркированного списка.
<dl>…</dl> Создаёт список с определениями.
<dt>…</dt> Создаёт термин, который никак не выделяется по умолчанию.
<dd>…</dd> Выдаёт определение для созданного термина.

Списки

Структура документа

<h1 — h6>…</h1 — h6> Создаёт один из шести уровней заголовка на странице. Первый – самый основной и крупный, а шестой – самый мелкий.
<div>…</div> Универсальный блочный контейнер, использующийся для размещения секций страницы или вставки любых элементов оформления.
<span>…</span> Строчный контейнер для изменения стиля определённого текста в строке.
<p>…</p> Используется для организации текста в параграф.

Структура документа

Обработчики

  • onscroll – активируется при использовании прокрутки;
  • onseekend – срабатывает при перемотке видео или аудио в новую позицию;
  • onseeking; – срабатывает во время перемотки видео или аудио в новую позицию;
  • onstalled – срабатывает при возникновении ошибки в работе медиафайла;
  • onstorage – при загрузке документа;
  • onsuspend – при блокировке медиафайла браузером;
  • ontimeupdate – при изменении позиции проигрывания;
  • onvolumechange – при изменении уровня громкости;
  • onwaiting – при постановке проигрывания на паузу;
  • onbeforeonload – перед событием загрузки;
  • oncanplay; – при готовности медиафайла к воспроизведению;
  • oncanplaythrough – при полной загрузке медиафайла;
  • oncontextmenu – при вызове контекстного меню;
  • ondrag – при захвате и перетаскивании элемента;
  • ondragend – при отпускании захваченного элемента;
  • ondragenter – при перетаскивания элемента в область drag-n-drop;
  • ondragleave – при покидании области drag-n-drop;
  • ondragover – при проносе захваченного элемента через область drag-n-drop;
  • ondragstart – при начале операции drag-n-drop;
  • ondrop; – при отпускании захваченного элемента;
  • ondurationchange – при изменении длительности медиафайла;
  • onemptied – если медиафайл был удалён;
  • onerror – при возникновении ошибки;
  • onhaschange – при изменениях в документе;
  • oninvalid – при введении неверных данных;
  • onloadeddata – при загрузке данных;
  • onloadedmetadata – при загрузке мета-данных;
  • onloadstart – при начале загрузки медиаданных браузером;
  • onplay – при воспроизведении медиафайла;
  • onended; – при достижении проигрывания до конца;
  • onformchange – при изменении в форме;
  • onforminput – при вводе данных в форму;
  • oninput – при отправке формы;
  • onmessage – при появлении сообщения об ошибке;
  • onplaying – при начале воспроизведении медиафайла.

Объекты и фреймы

Объекты
<object>…</object> Тег, описывающий вставляемый объект (аудио, видео, PDF и т.п.).
height=»» Высота объекта.
width=»» Ширина объекта.
type=»» Тип вставляемого объекта.
usemap=»» Имя изображения-карты на стороне пользователя, ассоциированного с объектом.
Фреймы
<iframe>…</iframe> Строчный фрейм, позволяющий встраивать в документ информацию из внешних источников.
name=»» Имя фрейма.
src=»» Адрес объекта, отображаемого в фрейме.
srcdoc=»» HTML-контент фрейма.
width=»» Ширина фрейма.
<param /> Дополнительные параметры для кастомизации содержимого фрейма.
<embed>…</embed> Контейнер для внешних приложений или плагинов. Может использовать атрибуты height, width, src и type.

Пример

Изображения

<img /> Тег, использующийся для вставки изображения.
src=»url» Ссылка или имя файла изображения, которое нужно вывести.
alt=»text» Альтернативный текст, который используется для пояснения изображённого поисковым системам и пользователям.
height=»» Высота изображения в пикселях или процентах.
width=»» Ширина изображения в пикселях или процентах.
align=»» Определяет выравнивание изображения относительно остального контента на странице (устаревший атрибут).
border=»» Задаёт толщину рамки, если она есть (устаревший атрибут).
vspace=»» Определяет отступ от левого или правого края изображения (устаревший атрибут).
hspace=»» Определяет отступ от верхнего или нижнего края изображения (устаревший атрибут).
<map>…</map> Задаёт интерактивное изображение с кликабельными областями.
<map name=»»>…</map> Имя карты изображения.
<area /> Задаёт кликабельную область изображения на карте.

Пример

Новые теги

<header>…</header> Заглавный блок документа.
<footer>…</footer> Нижний блок документа или секции.
<main>…</main> Основной контент документа.
<article>…</article> Выделяет статью в документе.
<aside>…</aside> Для второстепенного контента и боковых панелей.
<section>…</section> Определяет блок-секцию документа.
<details>…</details> Дополнительные данные или информация, которую пользователь может отображать или скрывать.
<dialog>…</dialog> Блок или окно для диалога.
<figcaption>…</figcaption> Заголовок для элемента <figure>.
<figure>…</figure> Контентный блок для вывода диаграмм, фото, иллюстраций и т.п.
<mark>…</mark> Подсвечивает выделенный текст.
<nav>…</nav> Группирует навигационные ссылки.
<menuitem>…</menuitem> Пункт выпадающего меню.
<meter>…</meter> Шкала измерения заданного масштаба.
<progress>…</progress> Прогресс задачи. Обычно используется для шкалы прогресса.
<rp>…</rp> Отображает текст в браузерах без поддержки арабских языков.
<rt>…</rt> Отображает текст справа налево.
<ruby>…</ruby> Пометки для арабских языков.
<summary>…</summary> Отображает краткое описание для элемента <details>.
<bdi>…</bdi> Выводит часть текста в отличном от основного направлении.
<wbr /> Строка без контента.

Выпадающие списки

Используется внутри тега <select>
name=»» Заголовок для группы выпадающего списка.
size=»» Количество опций в списке.
multiple Позволяет выбор нескольких опций одновременно.
required Требует обязательного выбора перед отправкой формы.
<optgroup>…</option> Используется для группировки опций.
<option>…</optgroup> Обозначает одну из доступных в выпадающем списке опций.
Атрибуты опций
value=»» Обозначает значение выбранной опции.
selected Определяет выбранную по умолчанию опцию.
<button…</button> Отображает кликабельную кнопку для принятия опции.

Пример формы:

Таблицы

<table>…</table> Этот тег включает в себя весь контент таблицы.
<caption>…</caption> Описание таблицы и информации в ней.
<thead>…</thead> Заголовки для контента в каждой колонке.
<tbody>…</tbody> Основная секция таблицы с информацией.
<tfoot>…</tfoot> Подвал таблицы.
<tr>…</tr> Ряд таблицы.
<th>…</th> Ячейка с единичным заголовком.
<td…</td> Обычная ячейка с контентом.
<colgroup>…</colgroup> Группа колонок с общим форматированием.
<col /> Описание формата колонки.

Пример форматирования таблицы:

Базовое СЕО

Какие HTML-теги влияют на СЕО?

  • контекстная подсветка с <mark>;
  • понижение важности со <small>;
  • цитирование с <q> и <blockquote>;
  • вставка, удаления и правки с <ins>, <del> и <s>;
  • организация опций в группы с <optgroup>;
  • группировка опций в <datalist>.

Разрушение мифов об HTML5

Миф №1 – HTML5 ничем не помогает при ранжировании

  • HTML5 имеет преимущество над предыдущими реализациями в плане СЕО.
  • Специфические элементы позволяют поисковым машинам и ботам понять значения этих элементов. Поэтому их также называют семантическими элементами.

Миф №2 – HTML5 не подходит для видео

  • Некоторые веб-мастера до сих пор предпочитают использовать флеш для встраивания видеоконтента.
  • HTML5 позволяет Вам добавлять заголовки, подписи и субтитры для видео, которые являются дружественными к SEO.
  • Кстати, те же параметры можно использовать и для изображений (поясняющие тексты, заголовки и т.п.).

Миф №3 – Нужно использовать только заголовок H1

  • Вы можете использовать заголовок H1 для каждой новой секции контента на странице.
  • Нужно включать в статью любые заголовки, которые Вы считаете уместными.
  • Используйте традиционную иерархию заголовков (H2, H3, H4 и т.д.).

SEO, Search Engine Optimization

Послесловие

Мэт Бэннер в формате небольшой книжечки (я бы даже сказал брошюры) постарался вместить очень большой объём информации. Однако, в процессе перевода мною были замечены некоторые неточности и недостатки в описаниях. Где можно я дал дополнительные пояснения, однако, сильно что-либо менять без согласия автора я не могу.

Надеюсь, что Мэт, приславший нам свою книгу, прислушается к нашим замечаниям и со временем внесёт необходимые правки в оригинал. А пока, думаю, и того материала, что уже есть вполне достаточно. Если что-то будет Вам неясно, обязательно спрашивайте в комментариях – будем разбираться вместе!

www.bestfree.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.