HTML6 即將到來 – HTML6 中的新功能

HTML6 即將到來，HTML6 中最有可能發生的變化以及 HTML6 中的新功能，HTML6 中的新功能。本文將幫助您深入了解 HTML6：HTML6 發布日期？HTML 6 專用庫、HTML6 中的自定義菜單、HTML6 集成攝像頭等

HTML 是網絡語言，是最著名的網絡技術之一。自引入 HTML 以來，它一直被用於構建互聯網。

HTML6 即將到來 - 先睹為快

儘管許多新技術使網站創建過程變得更加簡單和高效，但HTML始終處於核心地位。

HTML5於 2014 年問世；這是超文本標記語言標準化的又一步。2014 年 10 月修訂的 HTML 規範是合理的。

人們現在正在等待另一次升級，你猜怎麼著？HTML6 正在路上。

WHATWG – 規範HTML規範的機構將隨著時間的推移不斷更改 HTML 規範，而不是一次廣泛更改（如消息來源所說）。

在本文中，我們將了解 HTML6 中最有可能發生的變化以及 HTML6 中的新內容。
係好安全帶，我們將深入探討主要內容。

快遞標籤
原生模態支持
自由調整圖像大小
HTML 6 專用庫
圖像和視頻的註釋
身份驗證增強
HTML6 中的自定義菜單
HTML6 集成攝像頭
好的微格式
沒有 JavaScript 的單頁應用程序
結論

快遞標籤

顧名思義，這些標籤是 express。可以使用諸如您網頁上徽標的標籤。
此外，諸如 , , 之類的標籤將可用。

HTML 6 中的原生模態支持

dialog元素正在使用 HTML6 。該元素被認為等同於 JavaScript 支持的模態窗口。

對話框元素已經標準化，但只有 Chrome 和 Samsung Internet 瀏覽器等少數瀏覽器完全支持。不用擔心，它很快就會在所有瀏覽器中運行。

這個元素，在它的默認格式下，只會顯示懸停在它被放置的地方上方。

要使用更常見的類模態界面，可以通過 JavaScript 打開模態方法。

<dialog>
  <form method="dialog">
    <input type="submit" value="Ok" />
    <input type="submit" value="Cancel" />
  </form>
</dialog>

在默認形式下，該元素創建一個灰色背景，其下方有非交互式內容。

可以在對話框元素內的表單中使用方法屬性。這將提交值並將該值傳遞回對話框對象本身。

總體而言，此對話框元素有利於與用戶進行小型交互並增強 UI。

您可以切換 open 屬性以在標準 HTML 表單中打開和關閉它。

<dialog open>
  <p>Dialog Box Built with HTML 6</p>
</dialog>

自由調整圖像大小

專家認為，一項更新正在進行中，使瀏覽器能夠調整圖像大小以獲得最佳觀看體驗。

瀏覽器在顯示有關設備和窗口大小的最佳圖像大小方面面臨困難。

src 和 IMG 標籤在處理這個問題上不是很強大。新標籤<srcset>可能可用。

此標籤可以方便瀏覽器在多個圖像之間進行選擇以顯示最佳觀看效果。

HTML 6 專用庫

在 HTML6 中引入可緩存庫將是提高網頁設計師和用戶生產力的一步。

圖像和視頻的註釋

如果我們可以在 HTML 中註釋圖像和視頻，那就太好了。HTML5 為我們提供了解釋單詞、句子和段落的能力，但不包括圖像和視頻。

該領域的許多組織都提供了解決方案，看起來 WHATWG 至少會考慮其中的一些。

讓我們希望; 我們很快就會在 HTML 中註釋圖像和視頻。

身份驗證增強

雖然HTML5在安全性方面還不錯。瀏覽器和網絡技術也提供了合理的保護。毫無疑問，在身份驗證和安全領域還有很多工作要做。

鑰匙可以存放在異地；這將防止不受歡迎的人訪問並加強身份驗證。使用嵌入式密鑰代替 cookie，使數字簽名更好等。

人們和智囊團可以提供很多解決方案，接受或拒絕它們都取決於 WHATWG。

HTML6 中的自定義菜單

UI 和 OL 標籤是有益的，但不能很好地滿足所有需求。一個可以更好地處理交互元素的標籤或菜單標籤是當務之急。

菜單可以處理由菜單內的按鈕觸發的列表元素。

<menu type="toolbar">
  <li><button>Cut</button></li>
  <li><button>Copy</button></li>
  <li><button>Paste</button></li>
</menu>

菜單可以增強 HTML 列表的功能，並且可以很好地工作，甚至像普通列表一樣。

HTML6 集成攝像頭

HTML6 將使我們能夠以最佳方式使用我們設備上的相機和媒體。我們將能夠控制相機、它的效果、模式、全景圖像、HDR 和其他東西。

我們可以使用任何媒體並重新利用它。有很多東西可以用相機和 HTML6 做得更好。

好的微格式

很多時候，我們需要在互聯網上定義我們的一般信息。
一般信息可以是任何公開信息，例如我們的電話號碼、姓名、地址等。微格式是能夠定義一般數據的標準。

微格式可以增強設計人員的能力，並可以減少搜索引擎推斷我們的公共信息所需的工作量。

沒有 Javascript 的單頁應用程序

FutureClaw雜誌主編Bobby Mozumder建議：

將錨點元素鏈接到 JSON/XML、API 端點，讓瀏覽器在內部將數據加載到新的數據結構中，然後瀏覽器用根據需要加載的任何數據替換 DOM 元素。初始數據（以及標準錯誤響應）可以在標頭固定裝置中，如果需要可以稍後替換。

據他介紹，這是單頁應用程序網頁設計模式，可以提高響應速度和加載時間，因為不需要加載 javascript。

結論

沒有什麼是完美的，HTML 也不是完美的，因此可以通過 HTML 規範做很多事情來使它變得更好。

應該對一些有用的規范進行標準化，以增強 HTML 的功能。小的變化已經開始推出。

考慮技術專家必須說的話並聽取公眾的意見可以提供一個想法。

增強藍牙支持、p2p 文件傳輸、惡意軟件保護、雲存儲集成是下一版 HTML 中應該考慮的一些事情。

這是為了未來。然而，已經有一些更新已經推出，其中一些很可能很快就會公佈，而另一些則僅僅是預測。

我希望本文能幫助您深入了解 HTML6。感謝閱讀並與其他技術極客和 HTML 書呆子分享。

#html

HTML6 即將到來 – HTML6 中的新功能

HTML6 即將到來，HTML6 中最有可能發生的變化以及 HTML6 中的新功能，HTML6 中的新功能。本文將幫助您深入了解 HTML6：HTML6 發布日期？HTML 6 專用庫、HTML6 中的自定義菜單、HTML6 集成攝像頭等

HTML 是網絡語言，是最著名的網絡技術之一。自引入 HTML 以來，它一直被用於構建互聯網。

HTML6 即將到來 - 先睹為快

儘管許多新技術使網站創建過程變得更加簡單和高效，但HTML始終處於核心地位。

HTML5於 2014 年問世；這是超文本標記語言標準化的又一步。2014 年 10 月修訂的 HTML 規範是合理的。

人們現在正在等待另一次升級，你猜怎麼著？HTML6 正在路上。

WHATWG – 規範HTML規範的機構將隨著時間的推移不斷更改 HTML 規範，而不是一次廣泛更改（如消息來源所說）。

在本文中，我們將了解 HTML6 中最有可能發生的變化以及 HTML6 中的新內容。
係好安全帶，我們將深入探討主要內容。

快遞標籤
原生模態支持
自由調整圖像大小
HTML 6 專用庫
圖像和視頻的註釋
身份驗證增強
HTML6 中的自定義菜單
HTML6 集成攝像頭
好的微格式
沒有 JavaScript 的單頁應用程序
結論

快遞標籤

顧名思義，這些標籤是 express。可以使用諸如您網頁上徽標的標籤。
此外，諸如 , , 之類的標籤將可用。

HTML 6 中的原生模態支持

dialog元素正在使用 HTML6 。該元素被認為等同於 JavaScript 支持的模態窗口。

對話框元素已經標準化，但只有 Chrome 和 Samsung Internet 瀏覽器等少數瀏覽器完全支持。不用擔心，它很快就會在所有瀏覽器中運行。

這個元素，在它的默認格式下，只會顯示懸停在它被放置的地方上方。

要使用更常見的類模態界面，可以通過 JavaScript 打開模態方法。

<dialog>
  <form method="dialog">
    <input type="submit" value="Ok" />
    <input type="submit" value="Cancel" />
  </form>
</dialog>

在默認形式下，該元素創建一個灰色背景，其下方有非交互式內容。

可以在對話框元素內的表單中使用方法屬性。這將提交值並將該值傳遞回對話框對象本身。

總體而言，此對話框元素有利於與用戶進行小型交互並增強 UI。

您可以切換 open 屬性以在標準 HTML 表單中打開和關閉它。

<dialog open>
  <p>Dialog Box Built with HTML 6</p>
</dialog>

自由調整圖像大小

專家認為，一項更新正在進行中，使瀏覽器能夠調整圖像大小以獲得最佳觀看體驗。

瀏覽器在顯示有關設備和窗口大小的最佳圖像大小方面面臨困難。

src 和 IMG 標籤在處理這個問題上不是很強大。新標籤<srcset>可能可用。

此標籤可以方便瀏覽器在多個圖像之間進行選擇以顯示最佳觀看效果。

HTML 6 專用庫

在 HTML6 中引入可緩存庫將是提高網頁設計師和用戶生產力的一步。

圖像和視頻的註釋

如果我們可以在 HTML 中註釋圖像和視頻，那就太好了。HTML5 為我們提供了解釋單詞、句子和段落的能力，但不包括圖像和視頻。

該領域的許多組織都提供了解決方案，看起來 WHATWG 至少會考慮其中的一些。

讓我們希望; 我們很快就會在 HTML 中註釋圖像和視頻。

身份驗證增強

雖然HTML5在安全性方面還不錯。瀏覽器和網絡技術也提供了合理的保護。毫無疑問，在身份驗證和安全領域還有很多工作要做。

鑰匙可以存放在異地；這將防止不受歡迎的人訪問並加強身份驗證。使用嵌入式密鑰代替 cookie，使數字簽名更好等。

人們和智囊團可以提供很多解決方案，接受或拒絕它們都取決於 WHATWG。

HTML6 中的自定義菜單

UI 和 OL 標籤是有益的，但不能很好地滿足所有需求。一個可以更好地處理交互元素的標籤或菜單標籤是當務之急。

菜單可以處理由菜單內的按鈕觸發的列表元素。

<menu type="toolbar">
  <li><button>Cut</button></li>
  <li><button>Copy</button></li>
  <li><button>Paste</button></li>
</menu>

菜單可以增強 HTML 列表的功能，並且可以很好地工作，甚至像普通列表一樣。

HTML6 集成攝像頭

HTML6 將使我們能夠以最佳方式使用我們設備上的相機和媒體。我們將能夠控制相機、它的效果、模式、全景圖像、HDR 和其他東西。

我們可以使用任何媒體並重新利用它。有很多東西可以用相機和 HTML6 做得更好。

好的微格式

微格式可以增強設計人員的能力，並可以減少搜索引擎推斷我們的公共信息所需的工作量。

沒有 Javascript 的單頁應用程序

FutureClaw雜誌主編Bobby Mozumder建議：

將錨點元素鏈接到 JSON/XML、API 端點，讓瀏覽器在內部將數據加載到新的數據結構中，然後瀏覽器用根據需要加載的任何數據替換 DOM 元素。初始數據（以及標準錯誤響應）可以在標頭固定裝置中，如果需要可以稍後替換。

據他介紹，這是單頁應用程序網頁設計模式，可以提高響應速度和加載時間，因為不需要加載 javascript。

結論

沒有什麼是完美的，HTML 也不是完美的，因此可以通過 HTML 規範做很多事情來使它變得更好。

應該對一些有用的規范進行標準化，以增強 HTML 的功能。小的變化已經開始推出。

考慮技術專家必須說的話並聽取公眾的意見可以提供一個想法。

增強藍牙支持、p2p 文件傳輸、惡意軟件保護、雲存儲集成是下一版 HTML 中應該考慮的一些事情。

這是為了未來。然而，已經有一些更新已經推出，其中一些很可能很快就會公佈，而另一些則僅僅是預測。

我希望本文能幫助您深入了解 HTML6。感謝閱讀並與其他技術極客和 HTML 書呆子分享。

#html

Corey Brooks

1582172879

HTML6 is Coming – What’s new in HTML6

HTML6 is coming, what things would most probably be changing in HTML6 and what’s new in HTML6, new features in HTML6. This article will helps you get an insight into HTML6: HTML6 release date? HTML 6 Dedicated Libraries, Customized Menus in HTML6, HTML6 Integrated Camera, and more

HTML, the language of the web, is one of the most well-known web technology. HTML has been in use continually for building the internet since the time it was introduced.

HTML6 is Coming - Here is a Sneak Peek

Although many new techniques have made the website creation process simpler and more efficient, HTML has always been there at the core.

HTML5 came out in 2014; it was one more step towards standardization of the hypertext markup language. HTML specification revised in October 2014, was reasonable.

People now are waiting for another upgrade, and guess what? HTML6 is on its way.

WHATWG – The body that regulates HTML specifications will be changing HTML specifications continually over time, not broad at once (as sources say).

In this article, we are going to take a look at what things would most probably be changing in HTML6 and what’s new in HTML6.
Fasten your belts as we are going to dive into the main content.

Table of Contents

Express Tags
Native Modals Support
Freedom to Resize Image
HTML 6 Dedicated Libraries
Annotations for Images and Videos
Authentication Enhancement
Customized Menus in HTML6
HTML6 Integrated Camera
Good Microformats
Single-Page Apps without JavaScript
Conclusion

Express tags

As the name suggests, these tags are express. Tags such as the for the logo on your webpage can be put in use.
Moreover, tags such as , , would be available.

Native Modals Support in HTML 6

The dialog element is on its way with HTML6. This element is considered equivalent to JavaScript-powered modal windows.

Dialog elements are already standardized, but only a few browsers like Chrome and Samsung Internet browsers have full support. No worries, it would be working in all browsers soon.

This element, in its default format, would only show hover above the place it was placed.

To use a more common modal-like interface, you can open the modal method through JavaScript.

<dialog>
  <form method="dialog">
    <input type="submit" value="Ok" />
    <input type="submit" value="Cancel" />
  </form>
</dialog>

In default form, the element creates a grey background with non-interactive content below it.

A method attribute can be used in the forms inside the dialog element. This would submit the value and pass the value back to the dialog object itself.

Overall, this dialog element is beneficial in a small interaction with the user and enhancing UI.

You can toggle the open attribute to open it and close it in the standard HTML form.

<dialog open>
  <p>Dialog Box Built with HTML 6</p>
</dialog>

Freedom to Resize Image

Experts believe that an update is on its way that would enable browsers to resize the image for the best viewing experience.

Browsers face difficulties to show the best image size concerning device and window size.

Src and IMG tags are not much powerful to handle this problem. A new tag <srcset> might be available.

This tag could facilitate browser to choose between more than one image to show the best viewing.

HTML 6 Dedicated Libraries

Introducing cachable libraries in HTML6 will be a step towards improving the productivity of both web designers and users.

Annotations for images and videos

It would be great if we could annotate images and videos in HTML. HTML5 provides us with the capability to interpret words, sentences, and paragraphs but not images and videos.

Many organizations in the field have offered solutions, and it looks like WHATWG would consider at least some of them.

Let’s hope; we will be annotating images and videos in the HTML soon.

Authentication enhancement

Although HTML5 is not bad in terms of security. Browsers and web technologies also provide reasonable protection. No doubt, there is much more that could be done in the domain of authentication and security.

Keys can be stored off-site; this would prevent access by unwanted people and bolster authentication. Using embedded keys instead of cookies, making digital signature better, etc.

People and think-tanks have a lot of solutions to offer, its all on WHATWG to accept or reject them.

Customized Menus in HTML6

The UI and OL tags are beneficial but do not fit well in every need. A tag or menu tag that could handle interactive elements better is the need of the hour.

The menu could handle list elements triggered by buttons inside the menu.

<menu type="toolbar">
  <li><button>Cut</button></li>
  <li><button>Copy</button></li>
  <li><button>Paste</button></li>
</menu>

The menu could enhance the capabilities of the list in HTML, and it could work well, even like a usual list.

HTML6 Integrated Camera

HTML6 would enable us to use the camera and media on our device for the best. We would be able to control the camera, its effects, modes, panoramic images, HDR, and other things.

We could use any media and repurpose it. There are a lot of things that could be made better with the camera and HTML6.

Good Microformats

A lot of times, we need to define our general information on the internet.
General information could be anything public like our phone number, name, address, etc. Microformats are the standards capable of defining general data.

Microformats can enhance a designer’s capabilities and can reduce the search engine’s efforts needed to deduce our public information.

Single-Page Apps without Javascript

Bobby Mozumder, Editor-in-Chief of FutureClaw Magazine suggests:

linking anchor elements to JSON/XML, API endpoints, having the browser internally load the data into a new data structure, and the browser then replaces DOM elements with whatever data that was loaded as needed. The initial data (as well as standard error responses) could be in header fixtures, which could be replaced later if desired.

According to him, this is the single page app web design pattern that would improve responsiveness and loading times as there would be no need to load javascript.

Conclusion

Nothing is perfect nor HTML, so there is a lot of things that could be done with HTML specification to make it better.

Standardizing some useful norms should be done to enhance the powers of HTML. Small changes have already started rolling out.

Considering what tech experts have to say and also listening to the general public could provide an idea.

Enhancing Bluetooth support, p2p file transfer, malware protection, cloud storage integration, are some things that should be considered in the next version of HTML.

This is for the future. However, there are already some updates that have been introduced, and some are most likely to be announced soon, while others are mere predictions.

I hope this article helps you get an insight into HTML6. Thanks for reading and share it with other tech-geeks and HTML-nerds.

#html #css #web-development #html6

Alisha Larkin

1648940400

Refactoru Html6: Wk4 Exercise HTML6 - Bootstrap Practice

refactoru-html6

Wk4 Exercise HTML6: Bootstrap Practice

Objective Using bootstrap, build some of their example templates without looking at the source of the template. Try to recreate each one listed below as closely as possible.

Skills HTML Bootstrap Resources Bootstrap Bootstrap Example Templates

Requirements

Responsive Alert: Make sure that each of your builds matches the responsiveness of the example!

Build the "Jumbotron" example.

Build the "Justified Nav" example.

Note that the actual styling of the navbar (the gradient, borders, etc) is defined in a non-bootstrap stylesheet. Don't worry about the visual appearance as long as they are side-by-side!

Build the "Carousel" example.

Author: armigermama
Source Code: https://github.com/armigermama/refactoru-html6
License:

#html6 #html

Alisha Larkin

1648926000

Nml Polyfill: Pollyfill for Html6-like Code.

#HTML6 polyfill Beta! Ready for download!

How to install

Clone the repository
Put your files into the content folder
Instead of linking your nml files directly, use index.xhtml?p=content/mypage.nml
Read the original Oscar Godson's spec. Not all of the features are supported. Yet.

What's different

All the HTML tags are prefixed by <html:
Single tags have to be closed with />
Images, sounds and video are represented by <html:media />
Scripts are imported using <html:link rel=script href=... />
In css use [data-nml-tag="foo"] for selecting <foo> element (will be fixed in the future)
In your styles use @namespace at-rule
You can make your custom elements with custom attributes with whatever value

Note there can't be more elements with the same value of the id attribute, only the first elements value will be accepted

Author: trash-repos
Source Code: https://github.com/trash-repos/nml-polyfill
License:

#html

Alisha Larkin

1648863836

HTML6: A Spec To HTML6

UPDATE: I copy pasted this years ago, from a blog I don't write at anymore. I first published this nearly three years ago. The site is getting a ton of traffic out of nowhere. I haven't updated this aside from minor typos since then. Seriously, it was just some random thing I did for fun one day. It's in no way a real spec and should not be taken seriously.

I've since moved onto starting my own company called Piggybank and I wont be updating this anytime soon.

HTML6

The Spec That Brings Us Freedom

Section 1 - Introduction

HTML5 was a great leap forward for web developers. It gave us all kinds of hip new tags like <header>, <nav> and <footer>. It also gave us slick new JavaScript APIs like drag and drop, localStorage, and geolocation. Still, however, there is a void that HTML5 has yet to fill and that void is truly semantic markup.

Imagine being able to mark something up the way you want to mark it up. Imagine changing <div id="wrapper"> to <wrapper> or a better example, making a calendar like:

<calendar>
  <month name="January">
    <day>1</day>
    <day>2</day>
    <day>3</day>
    <!-- ...and so on -->
  </month>
</calendar>

Even better yet, how about finally adding support for new types of media by simply changing the media type rather than having to come up with whole new tags for it like <img>, <embed>, <video>, <audio>, and so on? For example, wouldn't it be nice to just simply do: <html:media src="my-audio-file.aac" type="aac"> and let the browser deal with how to render it?

The web is moving towards a giant app store and we need to embrace it. The markup we use shouldn't work against us, it should work for us. This spec is to do just that. To finally break free of fatuous rules and standards and to give us, developers, total freedom to code as we please bringing the web a more semantic, clean, and human readable markup.

Now, without further adieu, let me introduce you to HTML6.

Section 2 - The Concept

HTML6 is conceptually HTML with XML like namespaces. If you don't know XML, or don't know what XML namespaces are they're basically a way to allow you to use the same tag without it conflicting with a different tag. You've probably actually seen one before in the XHTML DOCTYPE: xmlns:xhtml="http://www.w3.org/1999/xhtml"

In HTML6 we take advantage of this ingenious concept by giving us freedom to use whatever tag we want by the W3C reserving namespaces and not tags. The W3C would basically reserve the right to all namespaces, and each namespace they reserve will trigger a different HTML API.

So, what does this look like? Below is an example of a full HTML6 document. We'll go over each tag and attributes in the API section.

<!DOCTYPE html>
<html:html>
    <html:head>
        <html:title>HTML6 Sample</html:title>
        <html:meta type="title" value="Page Title">
        <html:meta type="description" value="This is an example of HTML with namespaces">
        <html:link src="css/main.css" title="Main Styles" type="text/css">
        <html:link src="js/main.js" title="Main Script" type="text/javascript">
    </html:head>
    <html:body>
        <header>
            <logo>
                <html:media type="image" src="images/logo.png">
            </logo>
            <nav>
               <html:a href="/cats">Cats</a>
               <html:a href="/dogs">Dogs</a>
               <html:a href="/rain">Rain</a>
            </nav>
        </header>
        <content>
            <article>
                <h1>This is my main article head</h1>
                <h2>This is my sub head</h2>
                <p>[...]</p>
                <p>[...]</p>
            </article>
            <article>
                <h1>A cool video!</h1>
                <h2>Pay attetion to the media elements</h2>
                <p>[...]</p>
                <html:media type="video" src="vids/funny-cat.mp4" autostart controls>
                <p>Man, that was a stupid cat.</p>
            </article>
        </content>
        <footer>
            <copyright>This site is &copy; to Oscar Godson 2009</copyright>
        </footer>
    </html:body>
</html:html>

As you'll see, there are some weird <html:x> tags throughout this sample. Those are the namespaced elements that belong to the W3C and HTML6 spec. These elements trigger browser events. For example, the <html:media type="image"> element will make an image appear or, the <html:title> element makes the title bar of the browser change and so on.

All those other elements are just for you. None of those elements mean anything to the browser. They're simply hooks for CSS and JS and to make your code more semantic. The HTML elements you see in there like <p> or the <h1> tags are just because I like using those as ways to markup paragraphs or the most important header, but I could have used <paragraph>, <text>, or <helloworldanythingiwant>.

It's whatever makes sense to you and your application.

Section 3 - The APIs

Section 3A - HTML API

All of the following tags in this API have the namespace html like: <html:title>

<html:html>

This begins a HTML document. Equivelent to the current <html> tag.

Example:

<!DOCTYPE html>
<html:html>
  <!-- rest of HTML would go here -->
</html:html>

<html:head>

This begins an HTML's head. Equivelent to the current <html> tag. The tag contains data that isn't actually displayed (aside from the <html:title> which is displayed in the browser's windows). Rather, it's purpose is to get data and scripts that affect the display of the content in the <html:body>. These scripts and other sources include things like JavaScript, CSS, RSS feeds, etc.

Example:

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

<html:title>

This is the title of the HTML document. Equivalent to the current <title> tag. Browsers will use this for the tab bar, favorites, etc. and search engines will use this as the title of their links

Example:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
</html:html>

<html:meta>

This is a bit different then the current HTML version. Meta data in HTML6 can be anything. Unlike HTML now, there are no required or non-standard meta types. It's used to store content for you as a developer, or for other sites as a way to grab information such as a page description.

Example:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
    <html:meta type="description" value="This is an example of HTML with namespaces">
  </html:head>
</html:html>

<html:link>

This links external documents and scripts such as CSS, JavaScript, RSS, favicons, etc. to the current document. Equivalent to the current <link> tag. This tag takes the following attributes:

charset: The character encoding such as "UTF-8".
href: The link to the source file.
media: The type of device the item should run on, for example, "mobile" or "tablet".
type: The MIME type of the document, for example, text/javascript.

Example:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
    <html:link src="js/main.js" title="Main Script" type="text/javascript">
  </html:head>
</html:html>

<html:body>

This is the body of the HTML document. Equivalent to the current <body> tag. This is where you'd place most of the stuff that would be visible to the users like text, media, and so on.

Example:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <!-- Your web page's content would go here -->
  </html:body>
</html:html>

<html:a>

This tag represents either an anchor on the page, or a link to another web page. Equivalent to the current <a> tag. The <html:a> tag takes one required attribute which is the href which directs the anchor or link where to go. For an anchor you'd use the syntax #id-of-element-to-link-to and for a link to another web page you'd simply insert the link like http://google.com.

Attributes available to the <a> tag are:

href
name
target (can be blank, parent, top or self)

Example:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <html:a href="http://google.com">Go to google.com!</html:a>
  </html:body>
</html:html>

<html:button>

Similar to <button> or <input type="button"> in HTML<=5, the <html:button> tag allows you to create a button for user interaction on a page.

Attributes available to the <html:button> tag are:

disabled

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <html:button>Push me!</html:button>
  </html:body>
</html:html>

<html:media>

This tag encapsulates what we now have for media which are tags like <img>, <video>, <audio>, <embed>, and so on. Instead of a tag for each file type, the browser will just know how to run it by the type attribute, or will make a guess based on the file extension, or lastly, by the MIME type.

Example:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <!-- Image -->
    <html:media src="images/logo.jpg" type="image">
    <!-- Video, shows you don't "need" a type -->
    <html:media src="videos/cute-cat.mov">
    <!-- Some made up format, browser will ignore if it doesn't know it -->
    <html:media src="misc/example.abc" type="abc">
  </html:body>
</html:html>

Section 3B - HTML Forms API

HTML Forms are separate from the HTML API to allow development on forms to not have to slow down for the entire HTML spec. Forms are constantly evolving with Sliders, color pickers, date and time pickers, progress bars and more. Forms really are sort of their own "thing" in HTML, so in HTML6 we've broken them into their own API.

<form:form>

This tag creates a new form. Has two attributes, method and action. As with current HTML forms, method can be POST or GET (they can be lowercase too) and will send the form with that as the HTTP header. More details on GET and POST can be found at W3.org. The action attribute tells the form where to send the data. By default the "method" is set to GET and the "action" is the current page.

Example:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <form:form method="post" action="/sendmail">
      <!-- Form inputs and stuff go here -->
    </form:form>
  </html:body>
</html:html>

<form:input>

This tag creates a new form input. Any type of form input that you can enter text into would be an input. In HTML currently this includes everything from a plain old text input to a <textarea> and would also include HTML5 style for inputs like email and url. The full list of possible input types are:

text
email
url
tel
search
number
datetime
date
month
week
time
datetime-local
textarea
password
file - (multiple)

The possible attributes on an input are:

name
disabled
readonly
placeholder
autofocus
required
novalidate

The following are attributes that will work on any input except file inputs:

maxlength
autocomplete
pattern
spellcheck
match - This is new to HTML6, give it a name of a field you want it to require a match on.

Example:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <form:form method="post" action="/sendmail">
      <!-- Simple input (defaults to text) -->
      <form:input>
      <!--  A new HTML6 match example -->
      <form:input type="password" name="user_password">
      <form:input type="password" match="user_password">
      <!-- Advanced example -->
      <form:input type="email" placeholder="user@site.com" autofocus required>
    </form:form>
  </html:body>
</html:html>

<form:select>

The <form:select> tag lets a user select from options rather than input anything. For example an HTML<=5 <select> would be close to the same. Some others would be a calendar, color picker, and range because these are predefined values in which you choose from.

The possible input types follow along with attributes that are specific to it:

select - (multiple)
color
calendar - (range)
meter - (range, step)

Attributes that work for all select types are:

name
readonly
disabled
required
autofocus

Example:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <form:form method="post" action="/scheduler">
      <!-- Normal select -->
      <html:select type="select" name="favorite_color">
      <!-- Calendar example -->
      <html:select type="calendar" name="the_calendar" range="10/10/10-10/10/11">
    </form:form>
  </html:body>
</html:html>

<form:status>

The <form:status> tag allows you to give feedback, or a "status" update to your users. Useful for an upload progress bar or steps in a multi-page form, for example. These are similar to the <progress> and <meter> elements in HTML5.

progress
meter

Attributes that work for all status types are:

min
max
value

Example:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <form:form method="post" action="/upload">
      <!-- Example showing "steps" in a form -->
      <form:status type="meter" min="1" max="3" value="2">
      <message>You're currently on step 2 of 3</message>
      <!-- Example showing an upload progress bar -->
      <form:status type="progress" max="100" value="25">
    </form:form>
  </html:body>
</html:html>

<form:label>

The <form:label> tag allows you to label inputs for the user. It links text to an input and when click will focus on the connected input. It matches the label's for attribute to the id of any form element.

Attributes that work for the <form:label> tag are:

for

Example:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</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>

Just like <input type="submit"> in HTML<=5, <form:submit> will create a button which submits your form. If a submit button is present in a form, pressing enter while focused inside of a form will submit it.

Attributes that work for the <form:submit> tag are:

name
value

Example:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</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>

Section 4 - Tag types

In HTML6, like in all previous HTML versions, there are two types of tags: single tags and double tags. Single tags can't have any text content, they only have attributes. This is an example of single tag (both elements are interpreted the same way):

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

Unlike the double tag, the single tag doesn't need to be closed. Double tags usually have some text content so they are made of an opening and closing tag. If it has no text content, it can be shortened to the self-closing single variant. Examples:

<html:link href="./a.html">Text content</html:link>

 <foo class="bar" />  <foo class="bar"></foo>

Section 5 - Using HTML6 Now

Unfortunately you can't but I'm hard at work on a polyfill that will transform your HTML6 document into a normal HTML document with JS. There will be a front-end one (which I wouldn't use in production due to the processing time and because search engines won't understand what the document is) and a Node.js one which will transform it and give it to the browser as if it were HTML.

If you'd like it in another language submit it to the issue tracker or send a pull request.

Section 6 - Conclusion

This is simply an idea. It's an idea I've personally had for years, but it's in no way finished. There's still a lot missing and a lot I haven't yet thought about, but it's a start. I'd love to hear your thoughts in the issue tracker or better yet, send a pull request of what you think should be changed or added.

Copyright on all documents and code:

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Author: OscarGodson
Source Code: https://github.com/OscarGodson/HTML6
License:

#html

HTML6 即將到來 – HTML6 中的新功能

HTML6 即將到來，HTML6 中最有可能發生的變化以及 HTML6 中的新功能，HTML6 中的新功能。本文將幫助您深入了解 HTML6：HTML6 發布日期？HTML 6 專用庫、HTML6 中的自定義菜單、HTML6 集成攝像頭等

快遞標籤

HTML 6 中的原生模態支持

自由調整圖像大小

HTML 6 專用庫

圖像和視頻的註釋

身份驗證增強

HTML6 中的自定義菜單

HTML6 集成攝像頭

好的微格式

沒有 Javascript 的單頁應用程序

結論

What is GEEK

Buddha Community

HTML6 即將到來 – HTML6 中的新功能

HTML6 即將到來，HTML6 中最有可能發生的變化以及 HTML6 中的新功能，HTML6 中的新功能。本文將幫助您深入了解 HTML6：HTML6 發布日期？HTML 6 專用庫、HTML6 中的自定義菜單、HTML6 集成攝像頭等

快遞標籤

HTML 6 中的原生模態支持

自由調整圖像大小

HTML 6 專用庫

圖像和視頻的註釋

身份驗證增強

HTML6 中的自定義菜單

HTML6 集成攝像頭

好的微格式

沒有 Javascript 的單頁應用程序

結論

HTML6 is Coming – What’s new in HTML6

HTML6 is coming, what things would most probably be changing in HTML6 and what’s new in HTML6, new features in HTML6. This article will helps you get an insight into HTML6: HTML6 release date? HTML 6 Dedicated Libraries, Customized Menus in HTML6, HTML6 Integrated Camera, and more

Express tags

Native Modals Support in HTML 6

Freedom to Resize Image

HTML 6 Dedicated Libraries

Annotations for images and videos

Authentication enhancement

Customized Menus in HTML6

HTML6 Integrated Camera

Good Microformats

Single-Page Apps without Javascript

Conclusion

Refactoru Html6: Wk4 Exercise HTML6 - Bootstrap Practice

refactoru-html6

Nml Polyfill: Pollyfill for Html6-like Code.

#HTML6 polyfill Beta! Ready for download!

How to install

What's different

HTML6: A Spec To HTML6

HTML6

The Spec That Brings Us Freedom

Section 1 - Introduction

Section 2 - The Concept

Section 3 - The APIs

Section 3A - HTML API

Section 3B - HTML Forms API

Section 4 - Tag types

Section 5 - Using HTML6 Now

Section 6 - Conclusion

Copyright on all documents and code: