HTML5

Voorbeeld met HTML5-broncode

Joost van Meeteren

Ter illustratie bij een artikel


HTML5 broncode met tolerantie in notaties en weglatingen:

<!DOCTYPE html>

<html lang=nl>

<head>

<meta http-equiv=content-type content="text/html;charset=utf-8" />

<meta name=author content="Joost van Meeteren" />
<meta name=robots content="index,follow" />

<meta name=description content="This website belongs to Joost van Meeteren. He owns WebDevelopment and WebDesign. Joost van Meeteren is webdesigner, web developer, webmaster, web text editor, consultant with Windows problems, and photographer." />
<meta name=keywords content="web development, web design, web maintenance, web management, advice, guidance, support, seo, web text editing, web text writing, web training, validation, accessibility, html5, css3, responsive web design, bootstrap, canvas, svg, xml, php, cms, joomla, wordpress, windows, security, software, photos, photo editing, info informatics" />

<meta name=viewport content="width=device-width, initial-scale=1" />

<link href=../images/informatics_icon.png rel=icon type=image/png />

<title>WebDevelopment and WebDesign | Joost van Meeteren | design, maintenance, advice / support, editing, training, BS, RWD, SEO, VAL | PHOTOGRAPHY | © 2015</title>

<link href=../css3/bootstrap_article.css rel=stylesheet type=text/css />

</head>

<body>

<div id=body-section>

<header>

<h1 class=bg-success title=HTML5>HTML5</h1>

<h2 class=bg-success title="stripped & error tolerance">stripped & error tolerance</h2>

<h3 class=bg-success title="Joost van Meeteren">Joost v@n Meeteren</h3>

</header>

<hr />

<article>

<h4 title=Links>Links</h4>

<p class=bg-primary><a href="http://knowpapa.com/html5/" target=_blank>Knowpapa.com - ... <em>HTML5 ... Closing tags are no longer required, it supports tags in all letter cases and attributes don't need to have quotations around them.</em></a> ...

<P class=bg-primary><a href="http://www.w3schools.com/htmL/html5_intro.asp" target=_blank>W3schools.com - HTML5 Introduction</a>.

<hr />

<h4 title=Introduction>Introduction</h4>

<p class=bg-primary>HTML5 is apparently very tolerant in the omission of elements and quotation marks at attributes.

<P class=bg-primary>This web page is still validated as well formed HTML5 while the end tag p ( </p> ) is omitted.

<p class=bg-primary>The removal of the html, head and body start and end tags ( <html> </html> | <head> </head> | <body> </body>) is not a problem in the rendering and validation process of this page.

<hr />

<P class=bg-primary>Different formats are allowed to void elements. In the head section metatags allow <strong>/></strong> and <strong>></strong>. Compare <meta name=robots content="index,follow"> and <meta name=robots content="index,follow" />. The tag <img> and <img /> are both allowed.

<p class=bg-primary>HTML5 tags are not case sensitive: <<strong>P</strong>> and <<strong>p</strong>> are admitted.<br /><strong>Note</strong>. In HTML(5) source code I prefer lowercase notation. Only follow the tradition between lowercase and uppercase when it concerns the content (text) itself.

<hr />

<P class=bg-primary>Quotation marks can be removed from attributes as long as the attribute only consists of one word.<br /><br />A class attribute usually consists of one word, for example class=bg-primary. A class attribute consisting of more than one word needs the classic notation like class="bg-warning bottom"; otherwise the layout does not function and the page is not validated.<br /><br />The construction <h1 title=HTML5>HTML5</h1> is validated. The construction <h2 title=stripped & error tolerance>stripped & error tolerance</h2> is not.<br /><br />Here we meet a mixture of (in)tolerance.

<hr />

<h4 title="Omitting tags">Omitting tags</h4>

<hr />

<h5 title="Tag <html>">Tag <html></h5>

<p class=bg-primary>No <html> used: web page validated.

<hr />

<h4 title="Mixing notations">Mixing notations</h4>

<hr>

<h5 title="Tag <hr>">Tag <hr></h5>

<P class=bg-primary>Both <hr> and <hr /> are used: web page validated.

<hr />

<h6 class="bg-info" title="Joost van Meeteren - WebDevelopment and WebDesign">Joost van Meeteren - WebDevelopment and WebDesign</h6>

<h6 class="bg-success" title="design, maintenance, advice / support, editing, training, RWD, SEO, VAL">design, maintenance, advice / support, editing, training, <abbr title="Responsive Web Design (Bootstrap)">RWD</abbr>, <abbr title="Search Engine Optimization">SEO</abbr>, <abbr title="HTML5 & CSS3 Validation">VAL</abbr></h6>

<hr />

<h4 title="Back">Back</h4>

<p class=bg-primary>Back to <a href="../informatics/informatics_03.html" title="Back to Informatics III">Informatics III</a>.

</article>

<hr />

<aside>

<P class=bg-danger title="INFO COPYRIGHT: 2002-2015  ©  Joost van Meeteren, Netherlands">2002-2015  ©  Joost van Meeteren, NL

</aside>

<hr />

<footer>

<p class=bg-warning><a href="http://validator.w3.org/check?uri=referer" target=_blank title="W3C Markup Validation Service | Check the markup (HTML, XHTML, ...) of Web documents: http://validator.w3.org/">W3C Valid HTML5</a>

<P class="bg-warning bottom"><a href="http://achecker.ca/checker/" target=_blank title="AChecker: Accessibility Review (Guidelines: WCAG 2.0 (Level AAA)) | Congratulations! No known problems.">AChecker: <cite>Accessibility Review</cite></a>

</footer>

</div>

</body>

</html>
Joost De WebMaker
2002-2024 © Joost van Meeteren
Laatste update website: vrijdag 20 december 2024