От автора: приветствую вас на этом блоге. В этом уроке я хотел бы познакомить вас с основами html5, а именно с самыми основными тегами, которые появились в нем и уже используются при создании современных сайтов. Элементы html5 значительно расширяют возможности этого языка, давайте с ними познакомимся.
Новые элементы в html5 — семантикаДля начала я хотел бы упомянуть о так называемых семантических тегах, которые и являются основным нововведением, хотя кроме них есть много новшеств, связанных с формами и их обработкой. Семантика в верстке раньше была просто на нуле, еще во времена таблиц. Сегодня же в эпоху поискового продвижения все больше веб-мастеров начинают осознавать ее важность, потому что даже такие вещи играют роль.
К тому же, сами современные веб-стандарты ориентированы на простоту и понятность кода. Новые элементы, в частности, включают в себя такие теги:
Header – парный тег, который обозначает шапку сайта, статьи или чего-то другого. Лично я поначалу подумал, что этот тег нужно использовать только для обозначения непосредственно шапки сайта.
Позднее же от более опытных людей в сайтостроении я узнал, что тегов header на одной странице может быть несколько. Соответственно, необходимость в идентификаторах или классах для подобных элементов осталась актуальной.
Footer – низ сайта, подвал, или как там его еще можно назвать. Обычно содержит информацию об авторских правах, иногда дополнительное меню и контактную информацию. В случае с этим тегом ситуация такая же, как и с header – он может быть и не одним на странице, этим тегом можно пометить, например, нижнюю секцию в сайдбаре, если она действительно отличается от других.
Nav – это контейнер для ссылок, которые имеют особую важность на веб-странице. Короче говоря, теперь в этот тег стоит заключать главное меню сайта, где содержаться ссылки на важные страницы и рубрики сайта.
Article – контейнер для содержания страницы, будь то статья, новость, новая тема на форуме и т.д.
Aside – все еще ведутся споры, для чего же должен использоваться этот тег. Сначала кто-то считал, что им принято формировать боковую колонку, где располагаются различные виджеты. Более павильным считается такое утверждение – этим тегом следует обрамлять всю информацию, которая является побочной на веб-странице. Например, цитата, блок с навигацией по документу или блок с контекстной рекламой.
Рис. 1. Семантические элементы и новая разметка с их помощью.
Это были основные семантические элементы html5, а теперь давайте разберем другие, которые добавляют дополнительные возможности на веб-странице.
Вставка медиафайловAudio – этот тег тоже парный, он предназначен для легкого и понятного вывода аудиозаписей на экран, а также плеера, в котором их можно воспроизводить. В этот тег дополнительно нужно поместить одиночные теги source, в которых прописать путь к аудиофайлу в разных форматах, чтобы все браузеры могли обработать звук.
Это делается для кроссбраузерности. Достаточно прописать путь к аудиофайлу в расширениях ogg и mp3. Также audio имеет определенные атрибуты. Например, атрибут controls добавляет к аудиозаписи элементы управления – так вы сможете менять громкость и останавливать воспроизведение.
Video – абсолютно идентичный прошлому элемент, за исключением того, что он выводит видео. В него также помещают теги source, где в атрибутах src прописываются пути к файлам.
Стоит сказать, что с видео ситуация чуть посложней. Чтобы оно воспроизводилось во всех браузерах, нужно добавить его сразу в трех форматах – это ogg, mp4 и webm.
В целом, тег имеет такие же атрибуты, как и audio. Дополнительно у него есть атрибут poster, с помощью которого вы можете задать путь к картинке, которая будет видна, если видео не проигрывается. Также с помощью атрибутов width и height можно определить размеры области, в которой будет воспроизводиться видео. Но мне все-таки кажется, что это лучше делать через css.
Что-то я примеров не привожу, а вот со вставкой видео это бы надо сделать.
Тег video не поддерживается вашим браузером.
< video width = "600" height = "450" poster = "video/poster.jpg" controls = "controls" > < source src = "movie.ogv" type = "video/ogg; codecs="theora, vorbis"" > < source src = "movie.mp4" type = "video/mp4; codecs="avc1.42E01E, mp4a.40.2"" > < source src = "movie.webm" type = "video/webm; codecs="vp8, vorbis"" > Тегvideo неподдерживаетсявашимбраузером. < / video > |
Как видите, у нас один и тот же файл – movie. Просто он в разных форматах. Также нужно указать MIME-тип и кодеки. Но это не стоит заучивать и пытаться держать в памяти – просто копируйте.
Figure – тег создан для группировки каких-то элементов. Он неразрывно связан с figcaption. С появлением этих элементов мы можем реализовать то, что раньше делалось другими путями. Например, вставить подпись к изображению. Это можно сделать так:
Подпись к изображению
< figure > < img src = “image . jpg ”> < figcaption > Подписькизображению< / figcaption > < / figure > |
Рис. 2. Подпись к изображению.
Datalist – интересный тег, в который можно вписать с помощью тегов option возможные варианты при наборе пользователем слов в текстовом поле input. Это вы можете наблюдать в поисковике – он сам подсказывает вам возможные варианты. Тут, конечно, системы не столь гениальна – вы просто можете записать пару наиболее частых слов, которые люди могут искать у вас на сайте. Элемент связывается с текстовым полем с помощью атрибута list, в котором нужно указать идентификатор, который мы определили для тега datalist.
Пожалуй, об html5 элементах нужно писать книгу, а не статью, ведь мы не рассмотрели с вами и половины всего, что можно делать с помощью этой технологии. Но, я надеюсь, вам стало понятно – HTML5 это сила и это технология, которая значительно расширяет арсенал возможностей веб-разработчика.
Мы лишь немного коснулись возможностей технологии, также информацию вы можете найти в нашем курсе, посвященном основам HTML5. Он находится в вместе с остальными интересными курсами по сайтостроению.
Как видите, HTML5 дает много новых возможностей, поэтому с этой технологией обязан ознакомиться любой человек, который интересуется сайтостроением. Желаю вам успехов в обучении и не забывайте поглядывать к нам на блог.
Стандарт HTML5 это язык для структурирования и представления материалов в сети Интернет, который был представлен и рекомендован к использованию в 2014 году. На сегодняшний момент практически все браузеры поддерживают большую часть нововведений HTML5 , однако не стоит забывать, что развитие языка продолжается и Консорциум Всемирной паутины продолжает изменять и совершенствовать пятую версию.
Обратите внимание, что начиная пятой версии язык HTML5 представлен не просто как язык структурирования, но и как язык представления, что отражено в семантической верстке, т.е. HTML теперь используется в новом качестве.
Принятие стандарта HTML5 привело к уменьшению разброса существующих технологий верстки. Так, до данного стандарта повсеместно использовались версии 4.01 HTML и стандарты XHTML 1.0 и 1.1, в результате чего страницы были представлены смесью данных технологий, что усложняло работу браузера по интерпретации страниц.Для стандарта HTML5 введен новый doctype:
Рассмотрим основные изменения которые следует учесть в первую очередь:
так и
так и
то в стандарте html5 правильным написанием является:
Перечисление всех изменений в тегах невозможно в рамках одного занятия, поскольку изменения в стандарте затронуло огромное количество тегов, поэтому давайте рассмотрим основные изменения, которые понадобятся нам в работе.
ГиперссылкаПример
которая в предыдущих стандартах вызывала ошибки, поскольку строчных элемент оборачивал блочный, в HTML5 валидна.
Одним из самых популярных вопросов начинающих верстальщиков является: «Как сделать гиперссылку на блоке div? ». И чаще всего отвечали: «Используйте JS». Как видно из примера, в HTML5 можно просто вложить внутрь гиперссылки нужные блоки.
Теги иВ HTML 5 были возвращены теги (делает шрифт жирным) и (курсив). В современной интерпретации, данные теги служат только для визуального оформления и не несут смысловой нагрузки.
Тег smallТег использовался в предыдущих версиях для задания размера шрифта, меньше чем основной текст (антиподом ему был тег big – который увеличивал размер шрифта). Разные отображения в различных браузерах привели к вытеснению данного элемента тегом span, который значительно удобнее в использовании.
В HTML5 тег был возвращен, однако его интерпретация изменилась, теперь он используется для оборачивания текста, который должен быть на странице, однако не должен отвлекать внимания от основного содержимого, и быть как можно менее заметным. Аналог – текст по сноскам, или различные условия акций. Визуально также уменьшает размер шрифта текста, который оборачивает.
Тег addressВ отличие от предыдущих версий HTML в пятой редакции используется только для указания контактных данных автора материалов. Не используйте тег для указания контактных данных на сайте организации (для этого следует применять микроформаты и микроданные).
Как уже упоминалось, в рамках данного урока невозможно рассмотреть все изменения в тегах, выше мы рассмотрели адаптированные теги, теперь перечислим устаревшие:
- , заменены тегом (используется для внедрения объектов);
- — заменили тегом (используется для аббревиатур);
- — заменили тегом (для внедрения проигрывателя в страницу);
- — заменили на ;
- , — заменили на теги И (для вставки листингов программ и кодов);
- — заменили на
Свойства форматирования текста , , , — убрали, вместо них следует использовать CSS для оформления.
Напомним, что многие устаревшие теги поддерживаются браузерами, однако валидацию страницы с устаревшими тегами не пройдут. Именно поэтому после окончания верстки страницы следует проверять ее на валидаторе.
HTML 5 и CSS 3 добавили в верстку огромное количество новых тегов и свойств. Посмотрите возможности анимации с новыми CSS 3 свойствами.
Здравствуйте гости данного блога и мои верные подписчики. С таким скоростным развитием технологий, науки и программирования, как это можно наблюдать сегодня, неудивительно, что запросы потребителей растут. А это значит, что рано или поздно появляются усовершенствованные версии программ, оборудования и главное языков.
Прочтение статьи даст вам четкое понимание границ между html и html 5. К тому же вы сможете оперировать полученными знаниями и верстать все свои сайты уже используя теги html 5.
Я хочу посвятить данную публикацию обсуждению html 5. Мы разберем с вами главные особенности платформы, новые элементы языка и их отличие от старых, а также рассмотрим конкретные примеры кода. А теперь перейдем непосредственно к самому соку!
Главнокомандующий разметкой сайтов, знаменитый htmlПосле прочтения , а также других источников айтишной тематики я думаю, что с уверенностью могу назвать вас «гуру-мастерами». Ведь вам не составит никакого труда рассказать, что из себя представляет язык html и для чего он был создан. Вы молодцы!
Новичкам же в данной области знаний не стоит волноваться. Я специально повторю главные определения.
Итак, для начала стоит запомнить, что html – это язык разметки гипертекста, т.е. текста, в котором содержатся связанные между собой элементы текстового, видео- , аудио- и графического форматов. Данный инструмент необходим для оформления структуры сайтов, форматирования внешнего вида страниц и указания расположения объектов на ней.
Для управления контентом сайта используются теги языка. Что же означает «тег» и для чего он нужен?
Тег – это единица языка разметки, которая способствует заданию на странице сайта определенного отображения конкретного объекта, а также указания его вида (ссылка, картинка и другое).
Элементы языка бывают одиночными и контейнерами (их еще обычно называют парными). Они различаются только тем, что парные внутри себя могут содержать другие элементы: теги или текст.
Каждый элемент обсуждаемого веб-языка имеет свой набор атрибутов. «Еще один термин? А он для чего нужен?» – спросите вы. Увы, но без терминологии никак.
Атрибуты нужны для расширения спектра возможностей отдельного тега, а также для более гибкого управления внешним видом контейнеров. Безусловно, элементы языка разметки спокойно могут существовать и без определения атрибутов. Тогда будет задавать им форматирование по умолчанию.
Ниже я прикрепил таблицу с примерами парных и одиночных распространенных тегов html с их наиболее используемыми атрибутами. К сожалению, привести атрибутов полный список сложно, их слишком много. Для этого лучше обращаться к спецификациям языка.
| Одиночные теги | |
| В данном примере представлен одиночный тег meta, который содержит в себе неотображаемую в браузере информацию. Charset, name и content – это атрибуты элемента, отвечающие соответственно за кодировку документа, наименование метатега и установку значения, заданного до этого в имени. | |
|
Тег отвечает за отображение графических файлов на страницах веб-ресурсов. При помощи атрибута src задается путь к самой картинке, width задает ширину объекта, а height – высоту, alt предназначен для вывода альтернативного текста в случае невозможности загрузить изображение. |
| Парные теги | |
| Как правильно приготовить запеканку? | Тег создает анкор (т.е. ссылку). В href указывается адрес файла, на который произойдет переход, target задает, как именно будет загружаться открытая ссылка (в данном примере она откроется в новой вкладке), title отвечает за всплывающую подсказку при наведении на анкор. |
Как уже рассказывалось в предыдущих моих статьях, не стоит путать html и html 5. Html 5 хоть и в каком-то смысле «родственник» html, но это совершенно новая платформа, основная задача которой поддерживать аудио- и видеофайлы, анимации, отображение геолокаций и многое другое.
Данная спецификация оснащает веб-страницы новыми возможностями и сообщает DOM (объектная модель документа) о наличии новых объектов на ней. Это ускоряет работу загрузки страницы и упрощает работу браузеров.
Огромным преимуществом для разработчиков является то, что с появлением html 5 ничего переучивать не нужно. Он поддерживает все теги html 4 и дополняет их современными. Добавлю также к этому еще один положительный факт. С появлением таких элементов, как и , отпала необходимость использовать устаревшие теги поддержки мультимедиа. К ним относятся: , , , и другие.
А теперь я хочу перечислить основные теги спецификации, к которым относятся article, aside и другие, а также описать для чего они были созданы.
Семантические тегиС появлением платформы html 5 появились и семантические теги. Сейчас простым языком объясню, что это такое.
Ранее при написании веб-сервисов с удобным интерфейсом и выделением шапки сайта, его основной части и «подвала» (место внизу страницы для дополнительной информации или указания авторства) использовалась блочная верстка при помощи div-ов.
Может это и было удобно с одной стороны для девелоперов, однако поисковым системам, а также браузерам приходилось туго. Поэтому было найдено решение в виде семантических тегов.
Эти элементы всего лишь стандартизируют основные единицы сайта едиными для всех ресурсов наименованиями тегов. К ним относятся , и . отвечает за определение на сайте его заголовка или заголовка текста, – за «подвал» внизу интернет-страницы, а – за навигацию сайта.
Для усвоения материала хочу, чтоб вы опробовали практический пример:
Ваш сайт Блог для айтишников
- Пункт меню 1
- Пункт меню 2
Текст первой статьи
Copyright любимый блогер
Данный пример показывает удобство структурирования кода при помощи html 5. Хочу отметить, что на сегодняшний день уважающие себя разработчики используют в своих веб-ресурсах спецификацию html 5 и css3. Они улучшают взаимодействие браузера с
Тег sectionТег section группирует контент по тематике, или, другими словами, определяет раздел документа. Обычно предшествует header , может находиться в footer . Тег section может быть заключен внутрь другого тега section , если необходимо, и содержать любой объем разметки. В обычном html, как правило, вместо тега section используют div .
Тег headerТег header (шапка) обычно содержит заголовок или группирует заголовки, но также может содержать информацию о секции.
Другими словами тег header определяет верхний колонтитул сайта (шапку сайта).
Тег footerТег footer (подвал) обычно содержит информацию о секции, например: автор статьи, дата, авторское право и т.д.
HTMLCopyright 20011 All Rights
Тег navТег nav определяет навигационную область, обычно это список ссылок. Тег nav является родным братом основной section (секции), header (шапки) и footer (подвала).
HTML- Главная
- Скачать
- Архив
- О Нас
Элемент nav можно расположить также, например, в теге header .
Тег asideТег aside определяет контент, который расположен вокруг основного контента. Это может быть боковая панель (sidebar), содержащая ряд ссылок на статьи, на архив, на метки.
Тег articleТег article определяет любую независимую запись (статью) на сайте, или, например, это может быть резюме, описание товара в интернет магазине и так далее.
Тег figureИногда бывает необходимо разместить изображение и прилагающийся к нему текст как единую иллюстрацию. Элемент figure указывает на то, что текст и изображение являются частями единого целого.
HTML Тут я описываю изображениеТег dialog – это та область, где отображается комментарии (беседа, разговор). Тег dialog состоит из следующих частей:
- сам тег dialog , определяющий блок с комментариями
- тег dt определят того кто говорит
- тег dd определяет текст комментария
Итак, давайте объединим наши структурные теги на странице.
Обычный блог Standard Blog
- Главная
- Скачать
- Архив
- О Нас
Lorem ipsum...
TitleLorem ipsum...
Copyright 20011 All Rights
Как вы можете видеть, сами теги более наглядны, чем, если бы вы использовали обычные идентификаторы (id) для тегов div . Также очевидно преимущество в использовании адекватных закрывающих тегов, таких как article . Например, разметка документа становится более понятной (и для поисковиков в том числе), если вместо непонятного блока с id="something" ,(где закрывающий тег еще надо поискать!) использовать тег article .
Стоит ли использовать структурные теги сейчас?Фактически, да, если соблюдать несколько дополнительных моментов. Данные теги будут работать в современных браузерах и, вероятно, в IE6. Но есть несколько моментов, которые необходимо соблюдать, если мы захотим использовать структурные теги html5 сегодня.
Во-первых, так как большинство браузеров не понимает doctype HTML5, то они и не знают о новых тегах в HTML5. К счастью, браузеры довольно восприимчивы, что позволяет им иметь дело с неизвестными тегами. Единственная проблема в том, что неизвестные теги не имеют стилей по умолчанию, и такие теги рассматриваются как встроенные (inline) теги. Но наши новые теги HTML5 структурные и, очевидно, должны быть блочными элементами. Итак, когда мы стилизуем их в css, то нам необходимо включить объявление display:block .
Просто включите небольшую часть кода в ваш CSS и новые теги HTML5 готовы к работе. И, конечно, как только HTML5 окончательно распространиться, описание display:block можно удалить, поскольку это описание будет включено в стили по умолчанию.
Поддержка IEЕсть проблема, если вам требуется поддержка IE. Оказывается, движок IE будет работать с новыми тегами, но не будет признавать любой CSS стиль, примененный к ним. К счастью, исправить это можно, включив небольшой кусок JavaScript. Все что нам понадобится, это включить следующий код:
document.createElement("header"); document.createElement("footer"); document.createElement("section"); document.createElement("aside"); document.createElement("nav"); document.createElement("article");
Данный код можно включите непосредственно в head или подключить через внешний файл.
ЗаключениеТаким образом, вы можете прямо сейчас структурировать ваши документы посредством новых тегов HTML5.