HTML6

Ter illustratie bij een artikel

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

!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

Joost De WebMaker
2002-2024 © Joost van Meeteren

Laatste update website: vrijdag 20 december 2024

Deze website past cookies toe voor optimaal gebruik van dit platform | bron | Akkoord