HTML6

opmerkingen

Joost van Meeteren

Voorbeelden met voorgestelde vormen van HTML6-broncode


1a. Voorbeeld van broncode in HTML5:

<!DOCTYPE html>

<html>

<head>
<title>Joost van Meeteren | JOOST De WebMaker</title>
<link href="../css3/bootstrap.css" rel="stylesheet">
</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="https://validator.w3.org/check?uri=referer" target="_blank" title="W3C Markup Validation Service">W3C Valid HTML5</a></p>
</footer>

</body>

</html>



1b. Voorbeeld van broncode in HTML6 door Joost van Meeteren voorgesteld:

!DOCTYPE html

html

head
title is Joost van Meeteren | JOOST De WebMaker
link ../css3/bootstrap.css rel is stylesheet
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 https://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.



2. Semantische elementen in HTML6 door Joost van Meeteren voorgesteld:

!DOCTYPE html

html

head
title = Joost van Meeteren | JOOST De WebMaker
link ../css3/bootstrap.css rel = stylesheet
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 = https://validator.w3.org/check?uri=referer" target = blank title = W3C Markup Validation a  Service W3C Valid HTML5
footer

body

html



3. Gereduceerde semantische elementen in HTML6 door Joost van Meeteren voorgesteld:

!DOCTYPE html
html
head
title = Joost van Meeteren | JOOST De WebMaker
link ../css3/bootstrap.css rel = stylesheet

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 = https://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



4. Verwijderde elementen html, head and body in HTML6 door Joost van Meeteren voorgesteld:

!DOCTYPE html

title = Joost van Meeteren | JOOST De WebMaker
link ../css3/bootstrap.css rel = stylesheet

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 = https://validator.w3.org/check?uri=referer" target = blank title = W3C Markup Validation
Joost De WebMaker
2002-2024 © Joost van Meeteren
Laatste update website: vrijdag 22 november 2024