Статьи

Взгляд в HTML6 — что это и что он может предложить?

Январь 27, 2018

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

Давайте иметь обзор HTML5

HTML5 предоставил нам несколько очень интересных функций, таких как поддержка аудио и видео, автономное локальное хранилище и, что самое важное, возможность создавать сайты, оптимизированные для мобильных устройств. Кроме того, это дало нам свободу в использовании атрибута type из тегов, таких как <link>и <script>. Что еще? Это помогло разработчикам организовать содержание в более соответствующим образом с использованием новых тегов , как <article>, <section>, и <header>т.д. Тем не менее, HTML5 все еще находится в стадии разработки и не является действительно семантической разметке.

Понимание концепции HTML6

Задумывались ли вы, если бы вы могли выразить теги? Если нет, просто представьте, что вы используете теги, например, <logo></logo>для назначения логотипа на вашей веб-странице, или теги <toolbar<</toolbar>и так далее. Не было бы лучше, если бы вы могли использовать <div>тег, не используя несколько идентификаторов, таких как обертка или контейнер, и, скорее, использовать <wrapper>или <container>напрямую. Проще говоря, вместо использования <div id='container'>вы можете просто использовать <container>. Вот тут и приходит HTML6.

HTML6 — это шестая версия HTML с пространствами имен, которая имеет структуру, подобную XML. Пространства имен XML помогут вам использовать один и тот же тег, не конфликтуя с другим тегом. Например, тот, который используется в XHTML DOCTYPE:

xmlns:xhtml="http://www.w3.org/1999/xhtml"

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

Пример HTML6

<!DOCTYPE html>
<html:html>
    <html:head>
        <html:title>A Look Into HTML6</html:title>
        <html:meta type="title" value="Page Title">
        <html:meta type="description" value="HTML example with namespaces">
        <html:link src="css/mainfile.css" title="Styles" type="text/css">
        <html:link src="js/mainfile.js" title="Script" type="text/javascript">
    </html:head>
    <html:body>
        <header>
            <logo>
                <html:media type="image" src="images/xyz.png">
            </logo>
            <nav>
               <html:a href="/img1">a1</a>
               <html:a href="/img2">a2</a>
             </nav>
        </header>
        <content>
            <article>
                <h1>Heading of main article</h1>
                <h2>Sub-heading of main article</h2>
                <p>[...]</p>
                <p>[...]</p>
            </article>
            <article>
                <h1>The concept of HTML6</h1>
                <h2>Understanding the basics</h2>
                <p>[...]</p>
               </article>
        </content>
        <footer>
            <copyright>This site is © to Anonymous 2014</copyright>
        </footer>
    </html:body>
</html:html>

Глядя на приведенный выше документ HTML6, вы увидите несколько странных <html:x>тегов. Эти нечетные теги являются элементами пространства имен, которые принадлежат спецификации W3C и HTML6 и будут вызывать события браузера. Например, <html:title>элемент изменит строку заголовка вашего браузера, а <html:media>элемент поможет заставить определенное изображение появиться на экране вашего браузера. Самое приятное, что все эти элементы специально определены для пользователей и не имеют ничего общего с браузером. Они являются не более чем хуками для JavaScript и таблиц стилей и помогают сделать ваш пример кода более семантическим.

HTML6 API

Теги HTML6 будут иметь пространство имен html, подобное <html:html>или <html: head>т. Д. Давайте посмотрим на атрибуты каждого тега, используемые в приведенном выше примере документа HTML6.

1. <html: html>

<!DOCTYPE html>
<html:html>// this is equivalent to <html> tag written in previous HTML versions
  <!-- sample of HTML document -->
</html:html>

2. <html: head>

Этот тег эквивалентен <head>тегу. Его целью является получение данных и сценариев, которые настраивают отображение содержимого в <html:body>теге.

<!DOCTYPE html>
<html:html>
  <html:head>
    <!-- Main content would come here, like the <html:title> tag -->
  </html:head>
</html:html>

3. <html: title>

Как следует из названия, он изменит заголовок документа HTML и будет похож на <title>тег, использовавшийся в более ранних версиях HTML. Этот тег используется браузерами для изменения строки заголовка, избранного и т. Д.

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>A Look Into HTML6</html:title>
  </html:head>
</html:html>

4. <html: meta>

Этот тег несколько отличается от <meta>тега, использованного в последней версии HTML. Используя этот тег HTML6, вы можете использовать любые метаданные. И поэтому, в отличие от HTML5, вам не придется использовать стандартные мета-типы в HTML6. Это помогает накапливать информацию, такую ​​как описание веб-страницы, путем хранения контента.

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>A Look Into HTML6</html:title>
    <html:meta type="description" value="HTML example with namespaces">
  </html:head>
</html:html>

5. <html: ссылка>

Этот тег поможет вам связать внешние документы и скрипты (такие как CSS, JS и т. Д.) С документом HTML. Это похоже на <link>тег, используемый в HTML5. Этот тег включает следующие атрибуты:

  • кодировка: кодировка символов «UTF-8».
  • href: содержит ссылку на ваш исходный файл.
  • media: определяет тип устройства, на котором будет работать ваш элемент, например, «смартфон» или «планшет».
  • Тип: MIME-тип документа.
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>A Look Into HTML6</html:title>
 <html:link src="js/mainfile.js" title="Script" type="text/javascript">
  </html:head>
</html:html>

6. <html: body>

Это так же, как <body>тег, который вы использовали в текущей версии HTML. Это место, где размещены все материалы вашего сайта, такие как текст, медиа и другие.

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>A Look Into HTML6</html:title>
  </html:head>
  <html:body>
    <!-- This is where your website content is placed -->
  </html:body>
</html:html>

7. <html: a>

Этот тег похож на <a>тег и используется для представления ссылки на другую веб-страницу. Однако, в отличие от <a>тега, <html:a>используется только один атрибут ‘href’, который направляет ссылку на страницу, которую вы должны посетить.

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>A Look Into HTML6</html:title>
  </html:head>
  <html:body>
    <html:a href="http://siteurl">Go to siteurl.com!</html:a>
  </html:body>
</html:html>

8. <html: button>

Этот тег эквивалентен <button>тегу или <input type="button">используется в текущей и более старых версиях HTML. Этот тег позволяет создать кнопку, которая поможет пользователю выполнить некоторые действия на странице вашего сайта. У него один атрибут отключен.

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>A Look Into HTML6</html:title>
  </html:head>
  <html:body>
    <html:button>Click Here</html:button>
  </html:body>
</html:html>

9. <html: media>

Этот тег итоговое все <media>теги , как <img>, <video>, <embed>и т.д. С помощью <html:media>тега вы больше не должны указать тег для каждого типа файла. Используемый <html:media>вами тег будет выполняться браузером на основе атрибута типа (если он указан), или он просто сделает предположение на основе расширения файла или «MIME-типа».

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>A Look Into HTML6</html:title>
  </html:head>
  <html:body>
    <!-- Image would come here -->
    <html:media src="img1/logo.jpg" type="image">
    <!-- Video doesn't need a type -->
    <html:media src="videos/slide.mov">
  </html:body>
</html:html>

Обзор типов тегов

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

<html:meta type="author" content="z13a">
<html:meta type="author" content="z13a" />

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

<html:link href="./a.html">Text based content</html:link>
<!-- This shortand... -->
<foo class="xyz" />
<!-- ...means in fact this: -->
<foo class="xyz"></foo>

Вывод

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


Автор био: Майк Свон работает с Markupcloud Ltd., которая является одной из
лучших PSD для WordPress компаний по всему миру. Он всегда стремится делиться информацией, связанной с последними тенденциями в Интернете.

87
Share: