Поглед на HTML6 – какво е това и какво може да предложи?

Преглед на HTML6 HTML е прост език за уеб разработка, който продължава да разгръща нови версии и е започнал работа по шестата си версия. HTML5 текущата версия на HTML се счита за една от най-търсените версии в сравнение с всички предишни версии на HTML.

Нека да направим бърз преглед на HTML5

HTML5 ни даде някои много вълнуващи функции като аудио и видео поддръжка, офлайн локално съхранение и най-важното възможност за изграждане на оптимизирани за мобилни уебсайтове. Освен това тои ни даде свобода да използваме атрибут на тип от тагове като <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:

1 xmlns: XHTML = „http://www.w3.org/1999/xhtml“

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

Пример за HTML6

01	<!DOCTYPE html>
02	<html:html>
03	    <html:head>
04	        <html:title>Поглед в HTML6</html:title>
05	        <html:meta type="title" value="Page Title">
06	        <html:meta type="description" value="HTML пример с имена">
07	        <html:link src="css/mainfile.css" title="Styles" type="text/css">
08	        <html:link src="js/mainfile.js" title="Script" type="text/javascript">
09	    </html:head>
10	    <html:body>
11	        <header>
12	            <logo>
13	                <html:media type="image" src="images/xyz.png">
14	            </logo>
15	            <nav>
16	               <html:a href="/img1">a1</a>
17	               <html:a href="/img2">a2</a>
18	             </nav>
19	        </header>
20	        <content>
21	            <article>
22	                <h1>Заглавие на основната статия</h1>
23	                <h2>Подзаглавие на основната статия</h2>
24	                <p>[...]</p>
25	                <p>[...]</p>
26	            </article>
27	            <article>
28	                <h1>Концепцията на HTML6</h1>
29	                <h2>Концепция на основите</h2>
30	                <p>[...]</p>
31	               </article>
32	        </content>
33	        <footer>
34	            <copyright>This site is &copy; to Anonymous 2014</copyright>
35	        </footer>
36	    </html:body>
37	</html:html>

Разглеждайки горния HTML6 документ, ще видите някои странни <html: x> тагове. Тези странни тагове са елементи с пространство на имена, които принадлежат на спецификациите W3C и HTML6 и ще задействат събития в браузъра. Например елементът <html: title> ще промени лентата на заглавието на вашия браузър, а елементът <html: media> ще помогне да се покаже определеното изображение на екрана на вашия браузър. Най-хубавото е, че всички тези елементи са специално определени за потребителите и нямат нищо общо с браузъра. Те не са нищо повече от куки за JavaScript и стилов лист и помага да направите примера на кода си по-семантичен.

HTML6 API

HTML6 таговете ще имат html за пространството на имената като <html: html> или <html: head> и т.н.

1. <html:html>

1	<!DOCTYPE html>
2	<html:html>// това е еквивалентно на <html> таг, написан в предишни версии на HTML
3	  <!-- HTML документ -->
4	</html:html>

2. <html:head>

1	<!DOCTYPE html>
2	<html:html>
3	  <html:head>
4	    <!-- Основното съдържание ще е тук, като <html:title> таг -->
5	  </html:head>
6	</html:html>

Този маркер е еквивалентен на <head> тага. Целта му е да се получат данни и скриптове, които настройват как се показва съдържанието в маркера <html: body>.

3. <html:title>

1	<!DOCTYPE html>
2	<html:html>
3	  <html:head>
4	    <html:title>Преглед на HTML6</html:title>
5	  </html:head>
6	</html:html>

Както подсказва името, той ще промени заглавието на HTML документа и е подобен на маркера <title>, използван в по-ранните версии на HTML. Този маркер се използва от браузърите за промяна на лентата на заглавията, любими и т.н.

4. <html:meta>

1	<!DOCTYPE html>
2	<html:html>
3	  <html:head>
4	    <html:title>Преглед на HTML6</html:title>
5	    <html:meta type="description" value="HTML example with namespaces">
6	  </html:head>
7	</html:html>

Този маркер е малко по-различен от маркера <meta>, използван в най-новата версия на HTML. С този HTML6 маркер можете да използвате всякакъв вид метаданни. И така, за разлика от HTML5, няма да се налага да използвате стандартните мета типове в HTML6. Той помага за натрупване на информация като описание на уеб страница, като съхранява съдържание.

5. <html:link>

1	<!DOCTYPE html>
2	<html:html>
3	  <html:head>
4	    <html:title>Преглед на HTML6</html:title>
5	 <html:link src="js/mainfile.js" title="Script" type="text/javascript">
6	  </html:head>
7	</html:html>

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

  • charset: „UTF-8“ кодиране на символи.
  • href: Тя съдържа връзка към вашия изходен файл.
  • media: Това определя вида на устройството, на което вашият артикул ще се изпълнява, например „смартфон“ или „таблет“.
  • type: MIME типът на документа.

6. <html:body>

1	<!DOCTYPE html>
2	<html:html>
3	  <html:head>
4	    <html:title>Преглед на HTML6</html:title>
5	  </html:head>
6	  <html:body>
7	    <!-- Тук е поставено съдържанието на вашия уебсайт -->
8	  </html:body>
9	</html:html>

Това е точно като маркера <body>, който сте използвали в текущата версия на HTML. Тук се поставят всички неща на вашия уеб сайт като текст, медия и други.

7. <html:a>

1	<!DOCTYPE html>
2	<html:html>
3	  <html:head>
4	    <html:title>Преглед на HTML6</html:title>
5	  </html:head>
6	  <html:body>
7	    <html:a href="http://web-tourist.net">Отидете на web-tourist.net!</html:a>
8	  </html:body>
9	</html:html>

Този маркер е подобен на етикета <a> и се използва за представяне на връзка към друга уеб страница. Въпреки това, за разлика от <a> тага, <html: a> взема само един атрибут ‘href’, който насочва връзката към страницата, която трябва да посетите.

8. <html:button>

1	<!DOCTYPE html>
2	<html:html>
3	  <html:head>
4	    <html:title>Преглед на HTML6</html:title>
5	  </html:head>
6	  <html:body>
7	    <html:button>Натисни Тук</html:button>
8	  </html:body>
9	</html:html>

Този маркер е еквивалентен на <button> тага или <input type = „button“> използван в текущата и по-старата версия на HTML. Този маркер ви позволява да създадете бутон, който да помогне на потребителя да извърши някакво взаимодействие на страницата на вашия сайт.

9. <html:media>

01	<!DOCTYPE html>
02	<html:html>
03	  <html:head>
04	    <html:title>Преглед на HTML6</html:title>
05	  </html:head>
06	  <html:body>
07	    <!-- Изображението щеше да бъде тук -->
08	    <html:media src="img1/logo.jpg" type="image">
09	    <!-- Видеото не се нуждае от тип -->
10	    <html:media src="videos/slide.mov">
11	  </html:body>
12	</html:html>

Този маркер обгръща всички <media> тагове като <img>, <video>, <embed> и др. Използвайки <html: media> таг, вече не е нужно да указвате маркер за всеки от типа на файла. Маркерът <html: media>, който използвате, ще бъде изпълнен от браузъра въз основа на атрибута type (ако е предоставен), или просто ще предположи въз основа на разширението на файла или от типа „MIME“.

Преглед на типовете маркери

Подобно на текущата и предишната версия на HTML, HTML6 ще има и два типа тагове, като единични и двойни маркери. Единичните маркери няма да съдържат текстово съдържание и по-скоро ще имат само атрибути. Например:

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

В сравнение с двойния маркер, не е необходимо да затваряте своя единичен маркер. Двойните маркери имат отварящ и затварящ маркер, тъй като имат малко текстово съдържание. Но в случай, че двойните маркери нямат текстово съдържание, можете да го намалите до „самозатварящ се един вариант“. Например:

1	<html:link href="./a.html">Текстово съдържание</html:link>
2	<!-- Това съкращение... -->
3	<foo class="xyz" />
4	<!-- ...означава всъщност това: -->
5	<foo class="xyz"></foo>

Заключение

HTML6 все още не е наличен. Тази публикация ще ви помогне да добиете предостава за някои от основните понятия на HTML6. През това време може да прочетете уроците по HTML.

Вашият коментар