Товаров: 0 (0р.)

Html 5 это: Пять вещей, которые надо знать об HTML5

Содержание

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

Оригинал: http://diveintohtml5.info/introduction.html

Перевод: Влад Мержевич

1. Это не одна большая вещь

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

Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML5 не просто определяет тег <video>, он также сообщает DOM обо всех видео-объектах. Вы можете использовать интерфейс прикладного программирования (API) для поддержки разных видеоформатов, проигрывания ролика, его остановки, отключения звука, отслеживания загрузки файла и многого другого построенного на взаимодействии пользователя и тега <video>.

2. Вам не надо откидывать имеющееся

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

Вот конкретный пример: HTML5 поддерживает все элементы форм, что и HTML4, а также включает новые элементы. Некоторые из них, вроде ползунков и выбора даты, напрашивались давно, другие не столь очевидны. К примеру, поле для ввода адреса электронной почты это рядовое текстовое поле, но современные браузеры для этого поля позволяют упростить набор адреса. Старые браузеры не поддерживают input type=»email», поэтому покажут обычное текстовое поле, и формы будут работать с ним без всяких дополнительных ухищрений. Это позволяет вам уже сегодня улучшить свои формы, даже если некоторые пользователи до сих пор привязаны к IE6.

3. Легко начать

«Обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент <!DOCTYPE> должен всегда располагаться в первой строке кода любой веб-страницы. Предыдущая версия HTML определяла несколько вариантов доктайпа и выбор правильного был делом нелегким. В HTML5 есть только один доктайп:

<!DOCTYPE html>

Смена доктайпа не разрушает существующую верстку, потому что все теги, определенные в HTML4 также поддерживаются и в HTML5. Ко всему прочему, вы можете использовать, и корректно, новые семантические элементы вроде <article>, <section>, <header> и <footer>.

4. Это уже работает

Если вы желаете сделать рисунок, проигрывать видео, улучшить функциональность форм или построить оффлайновое веб-приложение, то обнаружите, что HTML5 прекрасно поддерживается браузерами. Firefox, Safari, Chrome и мобильные браузеры работают с тегом <canvas>, видео, геолокацией, локальным хранилищем и др. Google понимает аннотацию микроданных. Даже Майкрософт, который обычно тащится в хвосте стандартов, поддерживает основные возможности HTML5 в своем браузере Internet Explorer 9.

Все разделы этой книги содержат таблицу совместимости популярных браузеров. Гораздо важнее, что включено обсуждение вариантов для поддержки старых браузеров. Такие технологии HTML5 как геолокация и видео были реализованы с помощью плагинов вроде Gears или Flash. Другие возможности, вроде рисования, могут быть эмулированы через JavaScript. Эта книга рассказывает, как использовать встроенные функции современных браузеров без отбрасывания старых версий.

5. Он уже здесь

Тим Бернерс-Ли изобрел всемирную паутину в начале девяностых. Позже он основал W3C для поддержки веб-стандартов, организацию с более чем пятнадцатилетней историей. Вот что объявил W3C о будущем веб-стандартов в июле 2009:

Сегодня руководство заявило, что когда устав Рабочей Группы XHTML 2 завершится в конце 2009 года, он не будет продлен. Это сделано для повышения ресурсов рабочей группы по HTML. W3C надеется, что это ускорит продвижение HTML5 и разъясняет позицию W3C относительно будущего HTML.

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

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

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

Основы HTML

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<html> <body> <p>Hello World</p> </body> </html>

<html>

    <body>

        <p>Hello World</p>

    </body>

</html>

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

История HTML

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

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

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

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

Интернет сейчас сильно отличается от того, что был в 1999 году, когда вышло последнее крупное обновление HTML 4.01. Сейчас есть такие технологии, которые мы не могли себе представить на рубеже веков.

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

Поэтому был реализован 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.

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

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

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

были удалены устаревшие элементы, такие как center, font и strike;

улучшение правил парсинга сделало его более гибким и совместимым;

появились новые элементы video, time, nav, section, progress, meter, aside и canvas;

новые атрибуты для инпутов, в том числе email, URL, dates и times ;

новые атрибуты, в том числе charset, async и ping;

новые API с офлайн кэшированием и поддержкой drag-and-drop и т.д;

поддержка векторной графики без сторонних программ типа Silverlight или Flash;

поддержка MathML улучшила отображение математических обозначений;

благодаря JS Web worker API, JS теперь может работать в фоновом режиме;

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

глобальные атрибуты типа tabindex, repeat и id теперь можно применять ко всем элементам.

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

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

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

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

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

объекты на странице могут двигаться вместе с курсором;

интерактивные медиа типа игр можно запускать прямо в браузерах без подключения дополнительного ПО или плагинов. Для аудио и видео теперь также не нужны плагины;

браузеры могут отображать интерактивную 3D графику с помощью графического процессора компьютера.

Отбросив необходимость в сторонних плагинах, 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 автоматически подсвечивается.

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

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

Будущее HTML и HTML5

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

РАЗНИЦА МЕЖДУ HTML 4 И HTML 5 | СРАВНИТЕ РАЗНИЦУ МЕЖДУ ПОХОЖИМИ ТЕРМИНАМИ — ТЕХНОЛОГИЯ

HTML 4 против HTML 5HTML 4 и HTML 5 — это две версии языка гипертекстовой разметки, сокращенно HTML.В основном он используется для создания статических веб-страниц. За прошедшие годы были выпущены ра

HTML 4 против HTML 5

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

HTML 4

Версия HTML 4 поддерживает такие функции, как создание сценариев, расширенные таблицы, таблицы стилей, встраивание объектов, улучшенная поддержка смешанного текста и текста с направлением справа налево. Доступность для людей с ограниченными возможностями также улучшена за счет улучшений форм.

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

В HTML 4 были добавлены различные новые функции, специально для людей с ограниченными возможностями:

• Лучшее различие между презентацией и структурой документа. Это поощряет использование таблиц стилей, а не атрибутов HTML и элементов представления.

• Объект может иметь текстовое описание с использованием разметки.

• Добавление ключей доступа, активные метки и улучшенные формы.

• Добавление элемента MAP или механизма карты изображений, а также на стороне клиента.

• Поддержка атрибутов lang и title для всех элементов.

• Длинные описания изображений, рамок, таблиц и т. Д.

• Широкий выбор целевых носителей, позволяющий использовать их с таблицами стилей.

• Улучшенные заголовки, таблицы, механизмы и группы столбцов.

HTML 5

HTML 5 — это последняя версия HTML. В 2004 году HTML был разработан W3C, но после этого они больше сосредоточились на XHTML и XML. Итак, была сформирована новая группа под названием WHATWG или рабочая группа по технологиям веб-гипертекстовых приложений, которая работала над HTML 5.

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

Хотя спецификация HTML 5 еще не доработана, есть некоторые элементы, которые можно использовать, если ваш браузер поддерживает их. Например, элемент холста используется для рисования графики вместе со сценариями. Этот элемент поддерживается IE 8, Firefox, Opera и Safari.

Поскольку это новейшая спецификация, многие браузеры в ближайшем будущем будут поддерживать ее. Самое лучшее в HTML 5 — это то, что он обратно совместим. Если вы разработчик веб-приложений, вы можете изучить HTML 5, поскольку он поддерживает различные теги и атрибуты для приложений. Например, некоторые новые обработчики событий в HTML 5 — это ondrag, ondrop, ondragstart и ondragend.

Разница между HTML 4 и HTML 5

• Обработка ошибок была кодифицирована и полностью заново открыта в HTML 5. Это помогает разработчикам браузеров стандартизировать и сокращать время, а также деньги для единообразного отображения вещей на веб-странице. Это невозможно в HTML 4.

• HTML 5 превратил браузер в платформу приложений с помощью JavaScript, CSS и HTML. Было добавлено множество элементов непосредственно из HTML 4, таких как

Основы HTML — Изучение веб-разработки

HTML (Hypertext Markup Language) — это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.

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

Моя кошка очень раздражена

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

<p>Моя кошка очень раздражена</p>

Анатомия HTML элемента

Давайте рассмотрим элемент абзаца более подробно.

Главными частями нашего элемента являются:

  1. Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, «p»), заключённого в открывающие и закрывающие угловые скобки.  Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
  2. Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
  3. Контент (Content): Это контент элемента, который в данном случае является просто текстом.
  4. Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

Элементы также могут иметь атрибуты, которые выглядят так:

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

Атрибут всегда должен иметь:

  1. Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
  2. Имя атрибута, за которым следует знак равенства.
  3. Значение атрибута, заключённое с двух сторон в кавычки.

Вложенные элементы

Вы также можете располагать элементы внутри других элементов — это называется вложением. Если мы хотим заявить, что наша кошка очень раздражена, мы можем заключить слово «очень» в элемент <strong> , который указывает, что слово должно быть сильно акцентированно:

<p>Моя кошка <strong>очень</strong> раздражена. </p>

Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент <p>, затем элемент <strong>, потом мы должны закрыть сначала элемент <strong>, затем <p>. Приведённое ниже неверно:

<p>Моя кошка <strong>очень раздражена.</p></strong>

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

Пустые элементы

Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмём  элемент <img>, который уже имеется в нашем HTML:

<img src="images/firefox-icon. png" alt="Моё тестовое изображение">

Он содержит два атрибута, но не имеет закрывающего тега </img>, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.

Анатомия HTML документа

Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя тестовая страница</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="Моё тестовое изображение">
  </body>
</html>

Здесь мы имеем:

  • <!DOCTYPE html> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
  • <html></html> — элемент <html>. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
  • <head></head> — элемент <head>. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
  • <body></body> — элемент <body>. В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.
  • <meta charset="utf-8"> — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
  • <title></title> — элемент <title>. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.

Давайте снова обратим наше внимание на элемент изображения:

<img src="images/firefox-icon. png" alt="Mоё тестовое изображение">

Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута src (source, источник), который содержит путь к нашему файлу изображения.

Мы также включили атрибут alt (alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:

  1. У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.
  2. Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте src, сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:

Альтернативный текст — это «пояснительный текст». Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст «My test image» («Моё тестовое изображение») не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет «The Firefox logo: a flaming fox surrounding the Earth» («Логотип Firefox: огненный Лис вокруг Земли»).

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

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

Заголовки

Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков <h2> (en-US)–<h6> (en-US), хотя обычно вы будете использовать не более 3-4 :

<h2>Мой главный заголовок</h2>
<h3>Мой заголовок верхнего уровня</h3>
<h4>Мой подзаголовок</h4>
<h5>Мой под-подзаголовок</h5>

Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше  элемента <img>.

Абзацы

Как было сказано раньше, элемент <p> предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:

<p>Это одиночный абзац</p>

Добавьте свой образец текста (вы создавали его в статье Каким должен быть ваш веб-сайт?) в один или несколько абзацев, расположенных прямо под элементом <img>.

Списки

Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:

  1. Ненумерованные списки — это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент <ul>.
  2. Нумерованные списки — это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент <ol>.

Каждый пункт внутри списков располагается внутри элемента <li> (list item, элемент списка).

Например, если мы хотим включить часть следующего фрагмента абзаца в список:

<p>Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе ... </p>

Мы могли бы изменить разметку на эту:

<p>Mozilla, мы являемся мировым сообществом</p>

<ul>
  <li>технологов</li>
  <li>мыслителей</li>
  <li>строителей</li>
</ul>

<p>работающих вместе ... </p>

Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.

Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — <a> — a это сокращение от «anchor» («якорь»). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:

  1. Выберите некоторый текст. Мы выбрали текст «Манифест Mozilla».
  2. Оберните текст в элемент <a>, например так:
    <a>Манифест Mozilla</a>
  3. Задайте элементу <a> атрибут href, например так:
    <a href="">Манифест Mozilla</a>
  4. Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку:
    <a href="https://www.mozilla.org/ru/about/manifesto/details/">Манифест Mozilla</a>

Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите https:// или http:// часть, называемую протоколом. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.

href сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как hypertext reference («гипертекстовая ссылка»).

Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.

Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете посмотреть её здесь):

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

Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу Обучение HTML: руководства и уроки.

Особенности языка разметки html5

Alla Rud 02.11.2016 1 9294 на прочтение 4 минуты

HTML (HyperText Markup Language) — наиболее популярный инструмент разметки, который уже долгое время не теряет свою актуальность среди разработчиков. HTML5 –  новая версия HTML стандарта и языка разметки, которая выпущена для улучшение языка, для работы с новыми мультимедийными элементами и приложениями. HTML5 обеспечивает удобную читаемость программ для человека и обработки для браузеров. Имеет поддержку части тэгов HTML4 и языка JavaScript.

Для каких целей создан HTML5? Прежде всего, это отказ от плагинов наподобие Flash, и использование новых элементов HTML5. Второе, это снижение потребности использовать JavaScript и дополнительный код. Обеспечение согласованной работы между веб-браузерами и устройствами. А также для того, чтобы сделать весь процесс разработки как можно более упрощенным, прозрачным и легким.

Какие же основные преимущества  HTML5?

  • применения более простого вида кода, например, div заменены более совершенными элементами.
  • дизайнерские решение, которые позволяют сделать индивидуальное решения для сайта. Также улучшен пользовательский интерфейс, он стал более понятным и функциональным. Валидацию форм можно осуществлять с помощью классических средств HTML-разметки.
  • можно использовать новые поля ввода для разных целей, например, поиска.
  • новая более совершенная семантика HTML5 дает возможность быстрее и проще различать футер, заголовки, панель навигации. Для этого используются разработанные по новому теги для упрощенного назначения основных элементов в разметке.
  • элементы HTML5 делают более видимым семантическое ядро страниц. Для этого используют стандартные коды.
  • удобное юзабилити. С HTML5 можно использовать новые элементы, в том числе <canvas>, <audio>, <video>. Сделаны улучшения для интеграции с SVG. Теперь можно не использовать плагины, к примеру, Flash.
  • установку музыки, чартов, видео и рисунков можно производить без использования сторонних программ.
  • улучшена структура документов, для этого используют новые теги: <header>, <section> и <article>.
  • восприятие разметки страницы:  исходный код стал простым и понятным.
  • разработаны доски общений, вики и drag-n-drop, для того чтобы улучшить клиентскую часть приложения. .
  • значительно увеличена скорость отклика страницы (используются хранилища localStorage и sessionStorage, которые частично заменили куки).
  • используется Geolocation API, а полученные данные могут применяться в приложениях.
  • HTML5 имеет поддержку  MathML (математическая разметка для формул) и SVG (форма  изображений, масштабируемая векторная графика).

Также среди нововведений HTML5 стоит выделить следующие элементы: Figure – рисунок; Header – заголовок страницы; Section – крупный блок страницы; Footer – нижняя часть страницы; meta charset = «UTF-8» — обновление кодировки страницы; Nav – навигация по сайту; Aside – дополнительный контент в виде боковой колонки; Article – статья, основная часть контента.

HTML5 помогает поисковикам найти ценную информацию на сайте.

Например: <articlе>  показывает поисковикам ценную часть контента на сайте, более важную чем то, что указано в <footer>. Эти теги позволяют легко найти важные части контента на страницах ресурса.

HTML5 позволяет машинам «читать» изображение и анимацию. Этого не было раньше.

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

CSS-фреймворки для адаптивного веб-дизайна описаны детально здесь.

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

Для всех сайтов на HTML предлагаем качественный и быстрый хостинг с тестовым периодом. Обращайтесь! 

7 причин уже сейчас перейти на HTML5

 

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

1. HTML5 – новый этап стандартизации веба.

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

На самом деле, HTML5 это все тот же язык разметки, понятный браузерам, в который просто добавили дополнительные инструменты для работы с объектами и мультимедиа. По сути это просто новая версия уже давно используемого в Интернете стандарта HTML4, стандартизированного Консорциумом W3C в 1997 году. Таким образом, с точки зрения разработчиков, HTML5 – это не есть что-то принципиально новое, на чем нужно будет учиться работать. Новый стандарт просто расширил возможности разработчиков. Теперь среда HTML5 позволяет реализовать те визуальные «фишки» и опции, которые раньше были доступны только благодаря технологии Flash.

Сам разговор о том, приживется или нет технология HTML5 в веб-разработке, лишен всякого смысла: распространение HTML5 – это новый этап стандартизации веб-технологий W3C. Известен даже предположительный срок, когда должна осуществиться полная доработка всех компонентов HTML5 – 2014 год. После этого Консорциум W3C объявит рекомендацию всем разработчикам о применении нового стандарта верстки. Так же, как это когда-то произошло с HTML4 в 1997 году и его предшественниками еще раньше. Вопрос выбора альтернативы даже не стоит – все браузеры будут поддерживать HTML5 по умолчанию.

2. Физические законы в «цифре».

Какими возможностями обладает HTML5? По сути это пустая оболочка, в которую можно внедрить что угодно. Благодаря таким инструментам, как Box2D, Canvas, на сайте можно реализовать 3D-модели объектов, которые будут перемещаться и взаимодействовать друг с другом по физическим законам.

http://www.thisshell.com/

В качестве примера реализации анимированных физических объектов можно привести сайт нашего агентства, где работы представлены в виде анимированных многогранников.

http://pirogov.ru/

Эту «фишку» можно использовать где угодно и как угодно, все ограничивается только фантазией разработчиков. Можно сделать промо-сайт с wow-эффектом, где интерактивные объекты будут располагаться прямо поверх основного контента.

3. «Многослойность» сайта.

Благодаря HTML5, можно внедрить сложную анимацию на корпоративный сайт, как это в последнее время стало распространенным. При этом анимированные компоненты не будут смешиваться с содержимым страницы, они будут как бы на разных «слоях» и будут ограничиваться контурами объекта, а не областью его движения/трансформации. Чтобы лучше понять разницу, приведем простой пример. Если в качестве анимированного объекта, перемещающегося поверх сайта, сделать автомобиль, то при реализации с использованием технологии Flash кликабельным будет весь прямоугольник, в который вписан контур машины, даже если визуально там будет находиться текст основного содержания страницы. HTML5 работает более корректно и позволяет избежать данного “побочного эффекта“. Даже при отклонении в 10 пикселей от объекта анимации сайт будет воспринимать нажатие как работу с другим «слоем».

http://beta.rallyinteractive.com/

4. Анимация без границ.

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

http://nizoapp.com/

http://wheelsofsteel.net/

5. Третье измерение.

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

http://www.nikebetterworld.com/product

http://benthebodyguard.com/

6. Работа с видео без сбоев.

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

http://www.360langstrasse.sf.tv/page/

7. Работа без перезагрузки внутренних страниц.

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

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

http://artofflightmovie.com/ 

удержать пользователя. Посмотрите на Facebook или ВКонтакте: основное меню остается практически неизменным при клике на его разделы, а вся информация подгружается в отдельном блоке. Таким образом, пользователю не приходится ждать, когда произойдет полная перезагрузка страницы.

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

 Евгений Фонталин


Данный материал является частной записью члена сообщества Club.CNews.
Редакция CNews не несет ответственности за его содержание.

Вступление: пять вещей которые вам нужно знать про HTML5

Вступление: пять вещей которые вам нужно знать про HTML5 | Погружение в HTML5

Вы здесь: Главная ‣ Погружение в HTML5 ‣

Вступление: пять вещей которые вам


нужно знать про HTML5

❧

1. Это не единое целое

Вы можете спросить: «Как же я могу начать использовать HTML5, если старые браузеры не поддерживают его?». Но в самом вопросе уже заключается неточность. HTML5 — это не единое целое; это набор индивидуальных спецификаций. Поэтому в целом невозможно определить «поддержку HTML5», потому что по сути это бессмыслица. Но вы можете определить поддержку отдельных технологий, как например: canvas, видео или геолокацию.

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

2. Вам не придется ничего выбрасывать

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

Вот конкретный пример: HTML5 поддерживает все элементы управления формами HTML4, но он также включает в себя и новые элементы. Некоторые из них долгожданные дополнения вроде слайдера и выборки даты; другие более утонченные. Например, поле для ввода email выглядит точно так-же как текстовое, но мобильные браузеры изменят раскладку экранной клавиатуры, чтобы пользователю было легче вводить email адрес. Старые браузеры, которые не поддерживают новый формат будут интерпретировать его как обычное текстовое поле и всё также будет работать без каких-либо скриптовых хаков или особой верстки. Наличие обратной совместимости означает, что что вы уже сегодня можете улучшить, к примеру, свои формы, даже если некоторые ваши посетители застряли в прогрессе на IE6.

3. Очень легко начать

«Обновление» на HTML5 так-же просто как и смена doctype. Doctype уже должен быть первой строкой вашей HTML страницы. Прошлые версии HTML определяли множество типов doctype, и выбор подходящего конкретно для вашей задачи мог оказаться непростой задачей. В HTML5 есть только один doctype: gt;

Обновление doctype на HTML5 никак не нарушит существующую разметку, потому что все теги определенные в HTML4 будут поддерживаться в HTML5. Но это позволит вам использовать — и валидировать — новые семантические элементы, такие как, например 4. Это уже работает

Если вы хотите вы рисовать с помощью canvas, проигрывать видео прямо на сайте, использовать более удобные формы или создавать веб приложения, которые могут работать офлайн, вам будет полезно знать, что в HTML5 всё это уже поддерживается и работает. Chrome, Firefox, Safari, Opera и мобильные браузеры уже давно поддерживают canvas, видео, геолокацию, автономный режим и другие возможности. Google первым включил поддержку микроформатов. Даже Microsoft — широко известный тем, что всегда запаздывает с поддержкой новых стандартов — поддерживает большинство функций HTML5 в недавно вышедшем Internet Explorer 9.

Каждая глава этой книги включает в себя все известные несовместимости в отдельных браузерах. Но, что более важно, каждая глава включает в себя широкое обсуждение возможностей для случая, если вам необходима поддержка старых браузеров. Такие функции HTML5 как видео и геолокация сначала были реализованы с помощью технологий Gears и Flash. Другие функции вроде canvas можно полностью реализовать с помощью JavaScript. Эта книга научит вас как использовать встроенные возможности современных браузеров, при этом не оставляя без внимания пользователей старых.

5. Он пришел, чтобы остаться

Тим Бернерс-Ли изобрел всемирную паутину в начале девяностых. Позже, он основал W3C чтобы управлять веб-стандартами, чем эта организация и занималась на протяжении более чем 15 лет. Вот что сказал W3C о будущем веб-стандартов в июле 2009: «Сегодня, Директор сделал анонс, что когда фаза работы XHTML 2 Working Group закончится, как и было запланировано, в конце 2009, её работа не будет продолжена. Делая это, и увеличивая ресурсы HTML Working Group, W3C надеется ускорить разработку HTML5 и обозначить позицию W3C касательного будущего HTML.»

HTML5 пришел, чтобы остаться. Давайте погружаться.

Знаете ли вы?

В содружестве с Google Press, издательство O’Reilly распространяет эту книгу в множестве форматов, включая бумажный вариант, ePub, Mobi, и DRM-free PDF. Платная версия называется «HTML5: Up & Running» и доступна в магазинах.

Если вам понравился проект и вы хотите выразить признательность, вы можете купить книгу на Amazon или Ozon по этим аффилиатским ссылкам или купить электронную версию напрямую в O’Reilly. Вы получите книгу, автор — вознаграждение. Сейчас он не принимает прямые пожертвования.

❧

«Дизайн — это не только то, как это выглядит и как чувствуется.
Дизайн — это еще и то, как это работает.» — Стив Джобс

Copyright MMIX–MMXI Марк Пилгрим и К°

Что такое HTML5 и что с ним делать? | от GemmV | Adalab

HTML5 — это язык программирования, аббревиатура которого расшифровывается как Hyper Text Markup Language. Это система, которая позволяет изменять внешний вид веб-страниц, а также вносить коррективы в их внешний вид. Он также используется для структурирования и представления контента для Интернета.

С помощью HTML5 такие браузеры, как Firefox, Chrome, Explorer, Safari и другие, могут знать, как отображать конкретную веб-страницу, знать, где находятся элементы, где размещать изображения и где размещать текст.

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

Основное преимущество HTML5 по сравнению с его предшественником (HTML4) заключается в том, что вы можете добавлять мультимедийное содержимое без использования Flash или другого медиаплеера. Благодаря HTML5 пользователи могут получать доступ к веб-сайтам без подключения к Интернету. К этому добавляется функция перетаскивания, а также онлайн-редактирование документов, популяризированное Google Docs.Кроме того, вот возможности, которые у вас есть при использовании HTML5:

МУЛЬТИМЕДИЙНЫЕ ЭЛЕМЕНТЫ

Используя теги

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

ГЕОЛОКАЦИЯ

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

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

ПРИЛОЖЕНИЯ

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

Большинство веб-приложений запускаются из облака. Типичным примером являются почтовые клиенты, такие как Gmail, у которых также есть мобильное приложение.

ПРЕИМУЩЕСТВА

ЭТО БЕСПЛАТНО

Вам не нужно специальное программное обеспечение, чтобы начать программировать в HTML5, вы даже можете начать программировать в блокноте, сохранить документ в формате HTML и просматривать его в любом браузере. Однако вы можете использовать бесплатный редактор кода, такой как Notepad+++, Atom, Eclipse, который предлагает базовые функции, такие как цветовая дифференциация между тегами и содержимым.Настоятельно рекомендуется использовать редактор кода вместо текстового файла, так как он не отделяет теги от контента и может быть более сложным для внесения исправлений.

СТРУКТУРА

Благодаря включению новых тегов, таких как:

,
или