Несмотря на то, что HTML5 является наиболее удобным и простым языком веб-разработки, мы до сих пор не можем назвать его действительно семантической разметкой. Без сомнения, HTML5 предоставил нам некоторые очень интересные функции, такие как автономное локальное хранилище, поддержку аудио / видео, возможность оптимизировать веб-сайты для мобильных устройств и многое другое, но его действительно не стоит распространять, поскольку он еще далек от совершенства.
Примите это или нет, большинство вещей в HTML5 все еще являются новыми для реализации, но разработчики, которые работают с HTML5 в течение длительного времени, всегда видят возможности для улучшения. Они часто спрашивают: что дальше? Ну, очевидно, это будет HTML6: шестая ревизия HTML. Хотя HTML6 еще не произвел революцию в мире веб-разработки, но работа над его спецификациями уже началась. Поэтому я думаю, что сейчас самое время взглянуть на то, что может предложить HTML6.
Взгляд на концепцию HTML6
В то время как HTML5 дал нам важные теги, такие как <header>, <article>, <section> и т. Д. Для лучшей организации контента, с другой стороны, HTML6 представляет собой уникальную комбинацию стандартных HTML и XML-подобных пространств имен. Проще говоря, шестая версия HTML дает разработчикам возможность выражать теги. Например, теперь у вас есть возможность использовать теги, такие как <logo> </ logo>, чтобы назначить логотип, или использовать тег <toolbar> </ toolbar> и так далее. Даже вам не нужно иметь несколько идентификаторов, таких как контейнер или оболочка в теге div. Это означает, что вместо использования <div id = ‘ wrapper’> или <div id = ‘ container’>, вы можете напрямую использовать <wrapper>или<контейнер> .
В двух словах, HTML6 позволяет вам использовать теги, которые вы предпочитаете, вместо того, чтобы использовать только определенные теги. Давайте посмотрим на следующий пример документа HTML6:
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>HTML6 Example</html:title>
<html:meta type="title" value="Title">
<html:meta type="description" value="HTML with XML like namespaces">
<html:link src="css/main.css" title="Styles" type="text/css">
<html:link src="js/main.js" title="Script" type="text/javascript">
</html:head>
<html:body>
<header>
<logo>
<html:media type="image" src="images/logo.png">
</logo>
<nav>
<html:a href="/wordpress">WordPress</a>
<html:a href="/responsive">Responsive</a>
<html:a href="/javascript">JavaScript</a>
</nav>
</header>
<content>
<article>
<h1>Heading</h1>
<h2>Sub-heading</h2>
<p>[...]</p>
<p>[...]</p>
</article>
<article>
<h1>Understanding the Concept of HTML6</h1>
<h2>HTML6 basics</h2>
<p>[...]</p>
<html:media src="videos/html6-introduction.mp4">
<p> Fundamentals of HTML6 </p>
</article>
</content>
<footer>
<copyright>This site is © to Anonymous 2015</copyright>
</footer>
</html:body>
</html:html>Если вы ознакомитесь с приведенным выше примером HTML6, вы обнаружите несколько странных тегов <html: x>, которые являются пространствами имен, имеющими такую же структуру, как XML. Эти элементы запускают события браузера и относятся к спецификациям HTML6 и W3C. Например, элемент <html: title> вносит изменения в строку заголовка вашего веб-браузера, в то время как элемент <html: media> позволяет отображать медиа-файл в вашем браузере. Используя эти элементы пространства имен, вы не только можете сделать свой код семантически правильным, но также можете добавить несколько интересных функций на ваш сайт.
HTML6 API
Теги в HTML6 имеют элементы пространства имен, такие как <html: html> , <html: head> или <html: title> и т. Д. Давайте рассмотрим каждый атрибут тега, упомянутый в приведенном выше примере кода, один за другим.
<HTML: HTML>
Эквивалентный текущему тегу <html> , этот тег используется для начала документа в HTML6. Например:
<!DOCTYPE html>
<html:html>
<!-- Rest of the HTML code -->
</html:html>
<html:head>Этот атрибут тега равен тегу <head> в HTML5. Основная цель этого тега — получить скрипты и данные, такие как CSS, JS, RSS-каналы и т. Д., Которые влияют на то, как содержимое будет отображаться в теге <html: body> . Например:
<!DOCTYPE html>
<html:html>
<html:head>
<!-- Main content -->
</html:head>
</html:html>
<html:title>Этот тег похож на тег <title>, написанный в предыдущих версиях HTML, и отвечает за изменение заголовка документа HTML.
<!DOCTYPE html>
<html:html>
<html:head>
<html:title> HTML6 Example </html:title>
</html:head>
</html:html>
<html:meta>Этот тег немного отличается от тега <meta>, который вы используете в HTML5. В отличие от HTML5, нет необходимости использовать стандартные мета-типы в HTML6. Используя этот тег HTML6, вы можете использовать любые метаданные. Позволяя разработчикам хранить контент, этот тег помогает им получать полезную информацию, например описание веб-страницы.
<!DOCTYPE html>
<html:html>
<html:head>
<html:title> HTML6 Example </html:title>
<html:meta type="title" value="Title">
<html:meta type="description" value="HTML with XML like namespaces">
</html:head>
</html:html>
<html:link>Этот тег равен тегу <link> и позволяет связывать внешние сценарии и документы с документом HTML. Он содержит следующие атрибуты:
- href : ссылка на исходный файл.
- кодировка : кодировка символов «UTF-8».
- Тип : MIME-тип документа.
- media : тип устройства, используемого для запуска элемента.
Пример:
<!DOCTYPE html>
<html:html>
<html:head>
<html:title> HTML6 Example </html:title>
<html:link src="css/main.css" title="Styles" type="text/css">
<html:link src="js/main.js" title="Script" type="text/javascript">
</html:head>
</html:html>
<html:body> Подобно текущему тегу <body> , этот тег определяет тело документа HTML. Здесь вы размещаете материалы вашего сайта, такие как текст, изображения, видео и т. Д., Которые видны пользователям.
<!DOCTYPE html>
<html:html>
<html:head>
<html:title> HTML6 Example </html:title>
</html:head>
<html:body>
<!—Your website’s stuff-->
</html:body>
</html:html>
<html:a>Этот тег равен тегу <a>, который вы используете в текущей версии HTML, с той лишь разницей, что для направления ссылки или привязки к веб-странице требуется только один атрибут ‘href’ . Например:
<!DOCTYPE html>
<html:html>
<html:head>
<html:title> HTML6 Example </html:title>
</html:head>
<html:body>
<html:a href=" http://www.google.com ">Visit Google</html:a>
</html:body>
</html:html>
<html:button>Используя тег <html: button> , вы сможете сгенерировать кнопку, с помощью которой пользователь может взаимодействовать со страницей на вашем сайте. Подобно тегу <button> или <input type = «button»>, используемым в более ранних версиях HTML, этот тег имеет один атрибут с именем «disabled» .
<!DOCTYPE html>
<html:html>
<html:head>
<html:title> HTML6 Example </html:title>
</html:head>
<html:body>
<html:button>Press me!</html:button>
</html:body>
</html:html>
<html:media>Тег <html: media> инкапсулирует все теги <media>, такие как <audio> , <video> , <img> , <embed> и т. Д. Используя этот тег, вам не нужно указывать тег для каждого типа файла. Браузер автоматически узнает, как запустить мультимедийный файл, либо по атрибуту типа (если имеется), либо по типу MIME, либо сделав предположение на основании расширения файла.
Пример:
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>HTML6 Example </html:title>
</html:head>
<html:body>
<header>
<logo>
<html:media type="image" src="images/logo.png">
</logo>
</header>
<!—You don’t need to specify a type for a video -->
<html:media src="videos/html6-introduction.mp4">
</html:body>
</html:html>API форм HTML6
В HTML6 формы будут иметь свой собственный API, чтобы разработка форм не могла повлиять на весь HTML-документ. Давайте пройдемся по тегам Forms, указанным в HTML6.
<Форма: форма>
Вы можете использовать этот тег для создания новой формы в HTML6. Он принимает два атрибута, метод (который может быть POST или GET) и действие . Метод атрибут будет посылать данные формы на сервер , а действие покажет форму , где данные должны быть отправлены. По умолчанию атрибут action является текущей страницей, а для метода установлено значение GET . Например:
<!DOCTYPE html>
<html:html>
<html:head>
<html:title> HTML6 Example </html:title>
</html:head>
<html:body>
<form:form method="post" action="/sendmail">
<!-- Form inputs and other stuff-->
</form:form>
</html:body>
</html:html>
<form:input>Тег <form: input> может использоваться для создания нового ввода формы, в котором пользователь может вводить такие данные, как электронная почта, URL, текст, дата, месяц, пароль, файл и т. Д. Возможные атрибуты ввода: автофокус, заполнитель, novalidate, отключено, имя, только для чтения и требуется. Пример:
<!DOCTYPE html>
<html:html>
<html:head>
<html:title> HTML6 Example </html:title>
</html:head>
<html:body>
<form:form method="post" action="/sendmail">
<form:input type="email" placeholder="contact@yoursite.com" autofocus required>
</form:form>
</html:body>
</html:html>
<form:select>Этот тег, который очень близок к тегу <select> в HTML5, позволяет пользователям выбирать из предопределенных значений, таких как календарь, палитра цветов, диапазон и т. Д., Вместо ввода чего-либо. Например:
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>HTML6 Example </html:title>
</html:head>
<html:body>
<form:form method="post" action="/scheduler">
<html:select type="calendar" name="calendar" range="01/02/15-05/04/15">
</form:form>
</html:body>
</html:html>
<form:status>Используя этот тег, вы можете оставить отзыв или обновить статус посетителей вашего сайта. Подобно тегам <meter> и <progress>, которые вы используете в HTML5, тег <form: status> оказывается весьма полезным для отображения индикатора выполнения загрузки или шагов в форме, содержащей несколько страниц.
<!DOCTYPE html>
<html:html>
<html:head>
<html:title> HTML6 Example </html:title>
</html:head>
<html:body>
<form:form method="post" action="/upload">
<form:status type="progress" max="100" value="30">
</form:form>
</html:body>
</html:html>
<form:label>: <Форма этикетки> тег позволяет маркировать входы для пользователей. Он связывает текст со входом и фокусируется на связанном вводе, когда пользователь щелкает. Для атрибута работает для <формы: метка> тега, который должен совпадать с идентификатором элемента формы.
Пример:
<!DOCTYPE html>
<html:html>
<html:head>
<html:title> HTML6 Example </html:title>
</html:head>
<html:body>
<form:form method="post" action="/login">
<form:label for="username">Username</form:label>
<form:input id="username" name="username">
<form:label for="password">Password</form:label>
<form:input id="password" name="password" type="password">
</form:form>
</html:body>
</html:html>
<form:submit><Форма: отправить> тег эквивалентно <входной тип = «отправить»> тагин HTML5 и может быть использован для создания кнопки, пользователь может использовать , чтобы отправить форму. Этот тег принимает два атрибута: имя и значение . Например:
<!DOCTYPE html>
<html:html>
<html:head>
<html:title> HTML6 Example </html:title>
</html:head>
<html:body>
<form:form method="post" action="/login">
<form:label>Login</form:label>
<form:input name="username">
<form:input name="password" type="password">
<form:submit name="submit" value="submit">
</form:form>
</html:body>
</html:html>Типы тегов: обзор
Как и во всех предыдущих версиях HTML, в HTML6 есть два типа тегов — одинарные и двойные. У одного тега нет текстового содержимого. Вместо этого он имеет только атрибуты. Например:
<html:meta type="author" content="k63a">
<html:meta type="author" content="k63a" />В приведенном выше примере оба элемента имеют одинаковую интерпретацию. В отличие от двойного тега, одиночный тег не требует закрывающего тега. Поскольку двойные теги могут иметь некоторое текстовое содержимое, они имеют как открытые, так и закрытые теги. Если у двойного тега нет текстового содержимого, его можно сократить до единственного варианта, который является самозакрывающимся. Например:
<html:link href="./a.html">Text content</html:link>
<!-- This shortand... -->
<foo class="abc" />
<!-- ...means in fact this: -->
<foo class="abc"></foo>Об авторе: —
Ajeet — старший веб-разработчик в WordPressIntegration — он отвечает за написание пользовательского кода JavaScript во время преобразования темы PSD в WordPress . В свободное время он пишет на разные темы, связанные с JavaScript, WordPress и HTML5, чтобы поделиться своим опытом работы с другими. Вы можете следить за WordPressIntegration на Facebook .
Особенность изображения, разработанная Freepik.com