HTML6 - links

HTML6: Your JSON and SXML Simplified.

HTML6 and CSS4 Announced - All Majors Browsers on Board.

YouTube - Introducing HTML6.

W3C begint aan html6.

W3C: HTML Working Group gaat werken aan 'html6'.

What's New in HTML6.


Dev-metal.com - Is this the first HTML6 specification?.

Html6spec.com - HTML6.

Github.com - A spec to HTML6.

Html6.io - HTML6 - The Distributed Specification.


A Look Into HTML6 - What Is It and What It Has to Offer?.

Css-tricks.com - HTML6 and CSS4: My Proposals.

Nairaland.com - HTML6 And CSS4: My Proposals.

HTML6 and CSS4 Rumor or Truth - The History and Future of HTML.


See also

HTML6 and CSS4.


HTML6 - Introduction

To expect or not to expect?

Under the keyword "html6" you can find a number of links on the internet that deal with a possible successor to HTML5.

The provided information is not clear to me. So far it brings only vague proposals about a renewing of the source code.

Meanwhile there is still a discussion going on about HTML versioned or unversioned. In my opinion such a discussion does not lead to improvements or simplifications of HTML(5) source code.


Nevertheless one mentioned proposal for simplification of HTML that seems to me interesting is the omission of the brackets around the tags: <!DOCTYPE html>, <html>, <head>, and <body>, changing into !DOCTYPE html, html, head and body. Next to it <header class="container-fluid"> would change into header class is container-fluid.

In my opinion the last simplification could lead to an unwished mixture of human language and the meta-language HTML. It only works if HTML(6) would use a predefined set of tags and elements. If the HTML user would get the freedom to define his or her own tags - in accordance with HTML6 is conceptually HTML with XML like namespaces, see Html6spec.com - HTML6 - it certainly would lead to a chaos, human language ( My class is full. ) mixed up with a language that gives HTML commands ( my class is full ).

See Introducing HTML6.


HTML5 - HTML6 - Example


1a. HTML5 example:

<!DOCTYPE html>
<html>
<head>
<title>WebDevelopment and WebDesign | Joost van Meeteren</title>
<link href="../css3/bootstrap.css" rel="stylesheet" type="text/css" />
</head>

<body>
<header>
<h1>HTML6</h1>
</header>
<article>
<h4 title="HTML6 - links">HTML6 - links</h4>
<p class="bg-primary"><a href="https://www.youtube.com/watch?v=Hf-WUuhADHQ" target="_blank">YouTube - Introducing HTML6</a>.</p>
</article>
<hr />
<aside>
<p><strong>Is HTML6 realistic?</strong></p>
<p title="That's the question!">That's the question!</p>
</aside>
<hr />
<footer>
<p><a href="http://validator.w3.org/check?uri=referer" target="_blank" title="W3C Markup Validation Service">W3C Valid HTML5</a></p>
</footer>
</body>

</html>


1b. HTML6 example proposed by Joost van Meeteren:

!DOCTYPE html
html
head
title is WebDevelopment and WebDesign | Joost van Meeteren
link ../css3/bootstrap.css rel is stylesheet type is text/css
head

body
header
h1 HTML6
header
article
h4 title is HTML6 - links h4 HTML6 - links
p class is bg-primary a  href is https://www.youtube.com/watch?v=Hf-WUuhADHQ target is blank a  YouTube - Introducing HTML6.
article
hr
aside
p strong Is HTML6 realistic?
p title is That's the question! p That's the question!
aside
hr
footer
p a  href is http://validator.w3.org/check?uri=referer" target is blank title is W3C Markup Validation a  Service W3C Valid HTML5
footer
body

html


Note 1. h1, p do not need a closing tag unless a title or class element is directly in front of the text.

Note 2. In accordance with the same principle the second a  on the line shows the boundary between 
        the title text of the anchor and the anchor text itself.

Note 3. The equal sign ( = ) is maybe a much better alternative to is in class = bg-info in stead of class is bg-info.
        So HTML becomes a bit more abstract again in the way of describing and makes logically more difference to human language.
        And the omission of quotation marks is now much more likely.


Semantic Elements in HTML6

A few proposals

The HTML5 semantic elements like <header>, <footer> and <nav> could be used in HTML6 as well. It is obvious what these tags express.

What are semantic elements? W3C says that they clearly define its content.; see HTML5 Semantic Elements.

But the meaning and use of the HTML5 semantic elements <article> and <main> in HTML5 are not clear to me. I see no way out of this semantic problem and reject the use of at least one element in HTML6: <main>.

I propose the following solution to define the core message of the web page - being independent by itself - by using the new element quintessence. The term 'quintessence' is on the semantic level and tells about the essence of the message without referring directly to what kind of message, text or graphics it is all about.

Now the elements <main> and <article> are no longer necessary on this level. The tags <main> and <article> are limited in what they intend to express; <main> is a term too general (<section> is equally meaningless), <article> too much related to text items.

Inside the tag <quintessence> we can introduce <article> to indicate text and <graphic> to set the boundaries for images.

To <graphic> belong in this HTML6 system the inline elements <img>, <canvas> and <svg>, the tags <audio> and <video> would become inline elements under <media>.


Semantic Elements in HTML6 - Example


2. Semantic elements in HTML6 proposed by Joost van Meeteren:

!DOCTYPE html
html
head
title = WebDevelopment and WebDesign | Joost van Meeteren
link ../css3/bootstrap.css rel = stylesheet type = text/css
head

body
header
h1 HTML6
header

quintessence
article
h4 title = HTML6 text h4 HTML6 text
p text text
article
graphic
h4 title = HTML6 image h4 HTML6 image
p img src = ../images/image.png alt = Example image style = width: 42px height: 42px
graphic
quintessence

aside
p strong Is HTML6 realistic?
p title = That's the question! p That's the question!
aside
hr
footer
p a  href = http://validator.w3.org/check?uri=referer" target = blank title = W3C Markup Validation a  Service W3C Valid HTML5
footer
body

html


Removing redundancy in HTML6

Another proposal

The next step is to remove the doubling of tags.

HTML basically requires a start tag and an end tag: <htm> - </html> etc. In addition, there is a number of tags that has no end tag such as <img> / <img /> and <hr> / <hr />

On the basis of these self-closing tags in HTML we would be able to expand this system in HTML6 to all (semantic) tags.

The way of describing in the example below implicaties that <article> and <graphic> are logic parts of <quintessence>. The tags <quintessence>, <header>, <footer> and <aside> are supposed to function on the same function level.

The tags <article> and <graphic> may also be part of aside containing a text and an image. Because they are intrinsically second level tags in this system.


Removing redundancy in HTML6 - Example


3. Reduced Semantic elements in HTML6 proposed by Joost van Meeteren:

!DOCTYPE html
html
head
title = WebDevelopment and WebDesign | Joost van Meeteren
link ../css3/bootstrap.css rel = stylesheet type = text/css

body

header
h1 HTML6 title HTML6
h2 Reduced source code title Reduced source code

quintessence
article
h3 article header text title = article header text
p quintessence text
graphic
h4 graphic header text image title = graphic header text
p img src = ../images/image_quintessence.png alt = Example image in quintessence style = width 42px height 42px

aside
article
h5 aside header text title = aside header text
p aside text
graphic
p img src = ../images/image_aside.png alt = Example image in aside style = width 42px height 42px

hr

footer
p a  Service W3C Valid HTML5 href = http://validator.w3.org/check?uri=referer" target = blank title = W3C Markup Validation


Note 1. As you can see, the doubling of a in the footer has been reduced to one a.
        Compare p a href = http://validator.w3.org/check?uri=referer" target = blank title = W3C Markup 
        Validation a Service W3C Valid HTML5 in the second scheme with p a Service W3C 
        Valid HTML5 href = http://validator.w3.org/check?uri=referer" target = blank title = W3C Markup 
        Validation in this scheme.

Note 2. To make the graphic element part of the article element we define as follows: 
        article > graphic
        h3 article header text title = article header text
        p article text
        p img src = ../images/image_article_>_graphic.png alt = Example article image style = width 42px height 42px
        p article text


Removing html, head, body in HTML6

A further simplification

In HTML5 - stripped & (error) tolerance I removed the html, head and body section elements.

That HTML5 web page is still well formed during the rendering and W3C and Validator.nu validation process.

Following the removal of the html, head and body elements in the mentioned HTML5 example now the html, head and body elements in the HTML6 example below have been removed. The removed elements are leading to an even more basic and simpler HTML6 source code.


Removing html, head, body in HTML6 - Example


4. Removed html, head and body elements in HTML6 proposed by Joost van Meeteren:

!DOCTYPE html

title = WebDevelopment and WebDesign | Joost van Meeteren
link ../css3/bootstrap.css rel = stylesheet type = text/css

header
h1 HTML6 title HTML6
h2 Reduced source code title Reduced source code

quintessence
article
h3 article header text title = article header text
p quintessence text
graphic
h4 graphic header text image title = graphic header text
p img src = ../images/image_quintessence.png alt = Example image in quintessence style = width 42px height 42px

aside
article
h5 aside header text title = aside header text
p aside text
graphic
p img src = ../images/image_aside.png alt = Example image in aside style = width 42px height 42px

hr

footer
p a  Service W3C Valid HTML5 href = http://validator.w3.org/check?uri=referer" target = blank title = W3C Markup Validation


WebDevelopment and WebDesign 2002-2019 © Joost van Meeteren
Web Developer/Designer/Photographer
Last update Thursday, March 21, 2019 at 11:49