=познавай=

GetEd!

=развивайся=

ОБРАЗОВАТЕЛЬНЫЙ IT ПРОЕКТ

extreme education

Веб-разработка

Программирование на C#

Системное администрирование

Управление проектами

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

Какие элементы добавлены в HTML5?
Смотрите список самых необходимых новых элементов.

Элемент Описание
<article> Определяет статью
<aside> Определяет контент, находящийся в стороне от главного, но связанный с ним
<bdi> Указывает на фрагмент текста, который должен быть изолирован от изменения направления вывода текста. Это важно для текста содержащего разные языки, читающихся слева на право и справа налево.
<details> Определяет информацию, которую пользователь может скрыть или показать
<dialog> Определяет диалоговое окно, в котором можно выводить сообщение или форму
<figure> Используется для группировки любых элементов, обычно изображений, иллюстраций и подписей к ним
<figurecaption> Подпись к элементу figure
<footer> Определяет подвал или завершение документа или section
<header> Задает начало или заголовок документа или section
<main> Указывает на главный контент документа
<mark> Определяет выделенный текст по тону
<menuitem> Определяет пункт меню, которое пользователь может вызвать из выпадающего меню
<meter> Используется для вывода значений в некотором диапазоне измерений. Применяется для отображения числовых значений: объем жидкости, давления и т.д.
<nav> Определяет блок навигационных ссылок
<progress> Определяет прогресс завершенности задачи.
<section> Определяет независимый тематический блок или секцию
<summary> Определяет видимый заголовок для details
<time> Определяет дату/время
<wbr> Определяет определяет возможный перенос строки в тексте, если этого ширина родительского элемента. Очень полезный элемент.

Абсолютно все элементы можно посмотреть в справочнике HTML.

Новые элементы формы

Элемент Описание
<datalist> Определяет список вариантов, которые можно будет использовать при вводе в input.
<keygen> Определяет генератор шифрования (пара: открытый — закрытый ключ) для передачи данных из формы.
<output> Создает поле вывода вычислений.

Новые типы полей ввода — input:type

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Подробную информацию о новых типах полей ввода можно узнать из главы «HTML5 input — типы».

Атрибуты input HTML5

  • autocomplete
  • autofocus
  • form
  • formaction
  • formmethod
  • formnovalidate
  • formenctype
  • formtarget
  • height и width
  • list
  • min и max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

Подробную информацию о новых атрибутах input полей ввода можно узнать из главы «HTML5 input — атрибуты».

Семантические элементы HTML5

Рассмотрим наиболее популярные элементы:<header>, <nav>, <section>, <article>, <aside> и <footer>.
Эти элементы созданы, чтобы придать значение структуре страницы, другими словами для улучшения семантики структуры страницы. Все эти элементы блочные. Предполагаемых позиций и стилей для этих элементов нет. Элементы могут быть использованы несколько раз на странице, главное чтобы они отражали свое смысловое значение.

структура страницы

<header >

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

Пример
<header>…</header>

<nav>

<nav> или навигация. Сюда попадают навигационные ссылки (меню на странице). Данный элемент должен быть зарезервирован для главных групп навигационных ссылок. Пример: в элемент <nav>  могут попасть главная навигация, оглавление, предыдущая, следующая ссылки, в общем только большие группы навигационных ссылок.

Одноразовые ссылки не должны попадать в элемент <nav>, они должны использовать элемент <a>

Пример
<nav>…</nav>

<section>

<section> (секция). Этот элемент служит для идентификации какой-либо тематической группы контента например: название раздела или рубрики в блоге. Группа может включать в себя заголовок, а может и нет. Другими словами элемент <section> определяет секции на странице. Можно разделить страницу на секции. Причем на странице их может быть несколько.

Пример
<section>…</section>

<article>

<article> (статья) служит для определения независимого самостоятельного блока контента. Блок можно описать как изолированный и повторно используемый. Наглядный пример <article> — отдельный пост (запись) в блоге, который имеет свой заголовок, текст, картинки и т.д. Мы можем создать множество таких записей, используя <article>. Все что можно перенести без потери смысла,  а целиком и повторно, вот здесь тогда лучше использовать <article>.

Пример
<article>…</article>

Давайте приведем наглядный пример разметки:

Пример
<section>
<H1>it технологии как искусство<H1>
<p>Жизнь сегодня стремительно набирает скорость, мы уже не представляем свое время без различных гаджетов. На этом фоне информационный поток настолько вырос, что нам постоянно необходимо быть в тренде сегодняшних событий в мире IT. </p>
<article>
<h2>Выход нового IPhone запланирован на январь</h2>
<p>Компания Apple анонсировала выход нового смартфона IPhone в конце января. Предварительные продажи начнутся через официальный сайт компании</p>
</article>
</section>

Теперь у нас получилась полноценная рубрика с тематикой IT  и собственными записями (постами). Мы без проблем можем создать такую же  для спорта, отдыха, вообще  на любую тематику и оформить в отдельную страницу. Стилизовать все можно с помощью атрибута class.

Что же выбрать <div>, <section>, <article>?

На этот вопрос каждый web-программист будет отвечать по своему. Главной хитростью является просмотр содержимого.

Если контент (содержимое) сгруппировано исключительно для стилизации страницы и не несет ценность для всей схемы  документа, то смело используем <div>.

Элементы <article> и <section> создают структуру документа, другими словами его схему.

Если содержимое добавляется к структуре документа и может быть независимо перенесено, необходимо использовать элемент <article>.

Если содержимое тематически организованно в группу используйте элемент <section>. Можно также сказать, что <section> является разделом для вложенных блоков . В то время как <article> является полностью законченным блоком, имеется ввиду блок по смыслу контента.

<aside>

<aside> служит для отображения такого типа содержимого, как боковые панели, различные вставки, пояснения. Интуитивно мы хотим сделать <aside> слева или справа от главного содержимого, но важно помнить, что элемент <aside> является блочным и соответственно начинается с новой строки и занимает всю свободную ширину. Так что надо приложить некоторые усилия для правильного позиционирования, которое мы разберем чуть позже. В переводе aside (в сторону ) выносит контент в сторону от главного контента, но в тоже время связан с содержимым, которое его окружает. Пример: мы пишем пост в <article> и указываем в каком городе мы когда-то были. Вот именно информацию о городе можно положить в элемент <aside>.

Пример
<aside>…<aside>

<footer>

<footer> служит для обозначения конца страницы, статьи, раздела или сегмента (секции). Подвал, он есть подвал. Обычно этот элемент находится в нижней части его родителя. Чаще всего <footer> включает в себя следующий контент: информацию об авторских правах, компании разработчике сайта, контактную информацию, карту сайта (site map), связанные документы и ссылки.

Пример
<footer>…</footer>

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

Элемент Описание
<article> Определяет статью
<aside> Определяет контент, находящийся в стороне от главного, но связанный с ним
<details> Определяет детали, которые пользователь может скрыть или показать
<figure> Используется для группировки любых элементов, обычно изображений, иллюстраций и подписей к ним
<figurecaption> Подпись к элементу figure
<footer> Определяет подвал или завершение документа или section
<header> Задает начало или заголовок документа или section
<main> Указывает на главный контент документа
<mark> Определяет выделенный текст по тону
<nav> Определяет блок навигационных ссылок
<section> Определяет независимый тематический блок или секцию
<summary> Определяет видимый заголовок для details
<time> Определяет дату/время

Полный список элементов можно посмотреть в справочнике HTML5 элементов — Reference HTML5.

Знакомство с HTML5

Что нового в HTML5?

Простое объявление DOCTYPE.

Пример

<DOCTYPE! html >

Задать кодировку(charset) очень легко.

Пример

<meta charset=“UTF-8” >

Пример базовой структуры.

Пример

<DOCTYPE! html >
<html><head>
<meta charset=“UTF-8” >
<title>
Здесь идет название веб-страницы
</title>
</head>

<body>
Здесь идет контент документа
</body>
</html>

Семантика или смысловое значение элементов

Важно понять, что же такое семантика в HTML. Само понятие семантики означает раздел лингвистики, которое изучает смысловое значение языка. HTML в первую очередь создан для передачи значения содержимого на страницу, в не зависимости от его стиля или визуального оформления. Семантические код HTML проще в управлении, так как ясно дает понять, для чего служит каждый фрагмент контента.
Сейчас у всех появился небольшой туман в голове, давайте с этим разбираться. Мы будем изучать новые элементы, которые появились в HTML5, и поговорим какой тип контента они передают. Давайте рассмотрим новое понятие семантические элементы. Итак можно сказать, что семантические элементы HTML ясно определяют свой контент (если это таблица, то <table> и т.д.).

Возьмем для примера элемент <p>. Этот элемент имеет семантическое значение. Он несет в себе тип контента — абзац.
Теперь давайте разберем элементы <div> и <span>. Эти элементы не несут в себе семантического смысла или значения. Они служат только для стилизации контента.  <div> и <span> являются просто контейнерами для визуального оформления. Однако и очень важными элементами, потому что позволяют применить наборы стилей к нашему контенту.

Теперь все стало немного понятнее.

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

Новые семантические элементы:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <footer>

Новые атрибуты элементов управления формы: number, date, time, calendar. range.
Новые графические элементы:

  • <svg>
  • <canvas>

Новые мультимедиа элементы:

  • <video>
  • <audio>

HTML5 API

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

  • Geolocation — геолокация
  • Drag and Drop — перемещение элементов
  • Local storage — локальное хранилище
  • Application Cache — кэш приложения
  • Web Workers
  • SSE

И в заключении знакомства с HTML5 скажем, что рекомендации по стандарту HTML5 были опубликованы организацией W3C 28 октября 2014г. Документы по стандарту постоянно обновляются. Последнюю версию можно посмотреть по ссылке.

Атрибуты input HTML5

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

  • autocomplete
  • autofocus
  • form
  • formaction
  • formmethod
  • formnovalidate
  • formenctype
  • formtarget
  • height и width
  • list
  • min и max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

а также следующие атрибуты для элемента form:

  • autocomplete
  • novalidate

Атрибут novalidate

Атрибут novalidate является атрибутом элемента form. Этот атрибут указывает браузеру на то, что поля ввода не нужно проверять перед отправкой. Приведем пример с полем input type:email, когда поле проверяется на символ @(собаки). Если в форме указать novalidate, то проверки не будет.

Пример:

<form novalidate>
Укажите ваш email!<br>
<input type="email" name="usermail"  size="30" >
<input type="submit" value="ok">
</form>

Укажите ваш email!



Атрибут autocomplete

Атрибут autocomplete является атрибутом элемента form, так и атрибутом элемента input. Атрибут сообщает браузеру, следует ли включить (on) автозаполнение формы или элемента или выключить (off). Если установлено в положение включить (on) браузер будет автоматически предлагать варианты в поле из значений введенных ранее.

Пример:

<form  method="post" autocomplete="on" target="_blank" action="http://geted.ru/cgi-bin/forms/testpost2.php">
Имя:<br>
<input type="text" name="firstname" style="width:auto" size="30" ><br>
Фамилия<br>
<input type="text" name="lastname" style="width:auto" size="30" autocomplete="off"><br>
<input type="submit" value="ok">
</form>

Укажите имя и фамилию, затем нажмите ОК. Обновите страницу и снова попробуйте указать данные. Браузер предложит вам значения в поле Имя.

Имя:

Фамилия



Атрибут autofocus

Атрибут autofocus указывает в какое поле необходимо поставить фокус при входе на страницу.

Пример:

<form  method="post" autocomplete="on" action="http://geted.ru/cgi-bin/forms/testpost2.php">
Имя:<br>
<input type="text" name="firstname"  size="30" ><br>
Фамилия<br>
<input type="text" name="lastname"  size="30" autocomplete="off"><br>
<input type="submit" value="ok">
</form>

В примере фокус автоматически устанавливается в поле фамилия

Имя:

Фамилия



Атрибут required

Атрибут required указывает браузеру, что поле должно быть обязательно заполнено. Если поле не заполнено, при нажатии на кнопку Отправить пользователь увидит сообщение об обязательном заполнении поля, и данные из формы не будут отправлены. Другими словами атрибут required определяет обязательное для заполнение поле.

Пример:

<form  method="post" autocomplete="on" action="http://geted.ru/cgi-bin/forms/testpost2.php">
Имя:<br>
<input type="text" name="firstname" required  size="30" ><br>
Фамилия<br>
<input type="text" name="lastname" size="30" autocomplete="off"><br>
<input type="submit" value="ok">
</form>

В примере поле: имя является обязательным для заполнения.

Имя:

Фамилия



Атрибут placeholder

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

Пример:

<form  method="post" >
Имя:<br>
<input type="text" name="firstname" size="30" placeholder="Иван"><br>
Фамилия<br>
<input type="text" name="lastname"  size="30" placeholder="Петров"><br>
<input type="submit" value="ok">
</form>

Имя:

Фамилия



Атрибуты min и max

Атрибуты min и max определяют минимальное и максимальное значение в поле ввода. Другими словами мы накладываем ограничение на поле ввода. При нажатии на кнопку отправить, браузер проверяет ограничения на поле ввода. И если данные не соответствуют, то выводится сообщение и форма не отправляется.

Пример:

&lt;form&gt;
Введите число от 1 до 5.&lt;br&gt;
&lt;input type=&quot;number&quot; name=&quot;quant&quot; min=&quot;1&quot; max=&quot;5&quot;&gt;
<br>
<input type="submit" value="ok">
&lt;/form&gt;

Введите число от 1 до 5.



Атрибут multiple

Атрибут используется с input:type=color и input:type=file. Атрибут multiple (множество) позволяет выбрать множество элементов.

Пример:

&lt;form&gt;
Укажите файл для отправки&lt;br&gt; <br>
&lt;input type=&quot;file&quot; name=&quot;user_file&quot; multiple&gt;
&lt;br&gt;
&lt;input type=&quot;submit&quot; value=&quot;ok&quot;&gt;
&lt;/form&gt;

Укажите файлы для отправки



Атрибут step

Атрибут step указывает шаг перехода на следующее значение. Атрибут step может быть совместно определен с атрибутами min и max.
Атрибут step используется в следующих типах полей ввода: number, date, range, datetime-local, month, time and week.

Пример:

<form>
<input type="number" min="2" max="10" step="2">
<br>
<input type="submit" value="ok">
</form>




Атрибут pattern

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

Пример:

<form>
Введите номер автомобиля! 
<input type="text" pattern="\D\d\d\d\D\D"></br>
<input type="submit" value="ok">
</form>

Пример указан шаблон \D\d\d\d\D\D — это означает, что можно ввести символы в формате т354тт без учета регистра.

Введите номер автомобиля!



Атрибут form

Атрибут form прикрепляет поле ввода к указанной форме. Определение формы происходит по ее id.

Пример:

<form  method="post" id="regform" action="http://geted.ru/cgi-bin/forms/testpost2.php" target="_blank" >
Имя:
<input type="text" name="firstname" style="width:auto;" size="30" ></br>
<input type="submit" value="ok">
</form>
Фамилия<br>
<input type="text" name="lastname" style="width:auto;" size="30"  form="regform"><br>
Имя:



Фамилия

Атрибут formaction

Атрибут formaction определяет куда данные направятся для обработки(url файла). Атрибут formaction переписывает атрибут action указанный в форме. Данный атрибут применяется только для type:submit или type:image.

Пример:

<form  method="post" id="regform" action="" >
Имя:<br>
<input type="text" name="firstname" size="30" ><br>
Фамилия<br>
<input type="text" name="lastname"  size="30" ><br>
<input type="submit" value="ok" formaction="http://geted.ru/cgi-bin/forms/testpost2.php" >
</form>

В примере форма должна обрабатываться на текущей странице, но мы переписали url обработчика с помощью formaction.

Имя:

Фамилия



Атрибут formmethod

Атрибут formmethod определяет метод отправки данных: GET или POST. Переписывает метод отправки указанный в элементе form. Данный атрибут применяется только для type:submit или type:image.

Пример:

<form  method="get" action="" >
Имя:
<input type="text" name="firstname" style="width:auto;" size="30" >
Фамилия
<input type="text" name="lastname" style="width:auto;" size="30" ></br>
<input type="submit" value="ok" formaction="http://geted.ru/cgi-bin/forms/testpost2.php" formmethod="post" >
</form>

В примере данные из формы должны отправляться методом get. Это указано в элементе form, но мы переписали метод передачи с помощью атрибута form method.

Имя:

Фамилия



Атрибут formtarget

Атрибут formtarget в каком окне открывать ответ на запрос. Этот атрибут переписывает атрибут target указанный в элементе form.

Пример:

<form  method="post" action="http://geted.ru/cgi-bin/forms/testpost2.php" >
Имя:<br>
<input type="text" name="firstname" style="width:auto;" size="30" >
Фамилия<br>
<input type="text" name="lastname" style="width:auto;" size="30" ></br>
<input type="submit" value="ok"  formtarget="_blank" >
</form>

Изначально ответ на запрос открывался бы в текущем окне, т.к. по умолчанию target указано _self. Мы переопределили открытие в новом окне с помощью атрибута formtarget, установив значение _blank.

Имя:

Фамилия



Атрибут formenctype

Атрибут formenctype определяет то, как должны быть закодированы при отправке на сервер (только с методом POST). Атрибут formenctype переписывает атрибут enctype элемента form.
formenctype используется только с type:submit и type:image.

Пример:

<form  method="post" action="http://geted.ru/cgi-bin/forms/testpost2.php" >
Имя:<br>
<input type="text" name="firstname" style="width:auto;" size="30" >
Фамилия<br>
<input type="text" name="lastname" style="width:auto;" size="30" ></br>
<input type="submit" value="ok"  formenctype="multipart/form-data" >
</form>

Имя:

Фамилия



Атрибут list

Атрибут list связывает значение с элементом datalist. В datalist указаны возможные значения, и браузер предлагает их выбрать.

Пример:

<form >
<input list="cars">
<datalist id="cars">
<option value="BMW">
<option value="MERCEDES">
<option value="AUDI">
</datalist>
</form>



Атрибуты height и width

Атрибуты height и width определяют высоту и ширину элемента input. Используются только с атрибутом type=»image».

Пример:

<form  method="post" target="_blank" action="http://geted.ru/cgi-bin/forms/testpost2.php" >
Имя:<br>
<input type="text" name="firstname" style="width:auto;" style="width:auto;" size="30" >
Фамилия<br>
<input type="text" name="lastname" style="width:auto;" style="width:auto;" size="30" ></br>
<input type="image" style="outline-color:white!important;" src="" width="50" height="50" alt="Отправить"   >
</form>

В примере в качестве кнопки «Отправить» мы указали картинку. Мы задали стиль:outline-color:white!important, чтобы убрать синее свечение input.

Имя:

Фамилия


Атрибуты Input

Атрибут value (значение)

Задает первоначальное значение для элемента input

Пример

<form>
<input type="text" name="firstname" value="Mikle">
</form>


Атрибут size (размер)

Атрибут size определяет размер — количество символов для поля ввода данных. Размер только визуальный, size не ограничивает вас и вы можете ввести больше символов.

Пример

<form>
Поле с размером в 20 символов
<input type="text" name="firstname" size="20">
</form>

Поле с размером в 20 символов

Атрибут disabled (отключено)

Атрибут disabled отключает элемент input. Вы не можете внести данные в поле или кликнуть на него. Также поле с этим атрибутом не отправляется на веб-службу.

Пример

<form>
<input type="text" name="firstname" size="20" disabled>
</form>


Атрибут readonly (доступно только для чтения)

Атрибут readonly позволяет только посмотреть данные в элементе input. Начальные данные в input определяются с помощью атрибута value. Атрибут readonly запрещает редактирование поля input.

Пример

&lt;form&gt;
<input type="text" name="firstname" value="Mikle" size="20" readonly>
&lt;/form&gt;


Атрибут maxlength (максимальная длина)

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

Пример

&amp;lt;form&amp;gt;
<form>
Максимальный размер поля - 10 символов. <br>
<input type="text" name="firstname"  size="10" maxlength="10">
</form>
&amp;lt;/form&amp;gt;

Максимальный размер поля — 10 символов.