HTML Coding Guidelines

How to do HTML. And how not to.

Overview
For any user interface - be it a frontend, backend or a Single Page Application - HTML is at the core. HTML
gives a document semantic structure. Semantics is the core of HTML, as only with semantics it is possible to
give a document meaning.
Semantically well-formed pages provide a high level of UX, including accessibility for assistive
technologies, such as screen readers.
A well structured HTML page will provide visual priorization and structure, even if all CSS styles have been
disabled, as seen in the screenshot. It is still possible to scan the document and get an idea about its
structure.

Browsers can only render HTML (ok, except for SVG maybe), anything you see in a browser is done with
HTML.

Example

Below are two examples. Which one do you understand at first glance regarding document structure?
<div>
My Super Company
</div>
<div>
<div>A page</div>
<div>Some nice introduction text</div>

<div>
<div>A sub title</div>
<div>Lorem ipsum dolor sit amet, consectetur
adipisicing elit.</div>
</div>

<div>
<div>My Blog post</div>

<div>
<div>A blog title</div>
<div>Id quos assumenda nesciunt rerum
asperiores quasi, facilis!</div>
</div>

<div>
<div>Another title</div>
<div>Officiis voluptatibus numquam
itaque porro consequatur odit dolore maxime
cumque suscipit libero,
tenetur. Aperiam!</div>
</div>

<div>
<div>Blogroll</div>
<div>
<div><a href="#">A blog title</a></div>
<div><a href="#">Another title</a></div>
</div>
</div>
</div>
</main>
<div>
<div>2017 and some disclaimers</div>
</div>

<header>
My Super Company
</header>
<main>
<h1>A page</h1>
<p>Some nice introduction text</p>

<section>
<h2>A sub title</h2>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit.</p>
</section>

<section>
<h2>My Blog post</h2>

<article>
<h3>A blog title</h3>
<p>Id quos assumenda nesciunt rerum
asperiores quasi, facilis!</p>
</article>

<article>
<h3>Another title</h3>
<p>Officiis voluptatibus numquam
itaque porro consequatur odit dolore maxime
cumque suscipit libero,
tenetur. Aperiam!</p>
</article>

<aside>
<h4>Blogroll</h4>
<ul>
<li><a href="#">A blog title</a></li>
<li><a href="#">Another title</a></li>
</ul>
</aside>
</section>
</main>
<footer>
<p>2017 and some disclaimers</p>
</footer>

I guess it's clear that the second example carries much more easy to read information than the first. This is
achieved using semantic structure.
Use HTML to your advantage

Many HTML elements already carry a predefined functionality (as in W3C specifications) and provide
implicit context. A form can be submitted natively; there is no need to create a custom POST method to make
the form submit its data to your application. The same can be said for many more elements.

References
 Let's talk about semantics
 HTML element reference