Our team strives to write semantic HTML to provide clear and organized markup for structuring content in web pages.
The canonical source for semantic HTML is the HTML specification, a living document, created by Web Hypertext Application Technology Working Group (WHATWG).
For suggestions on semantic sectioning elements:
The following guidelines are adapted from the PrimerCSS's HTML Styleguide
- Paragraphs of text should always be placed in a
<p>tag. Never use multiple<br>tags. - Items in list form should always be in
<ul>,<ol>, or<dl>. Never use a set of<div>or<p>. - Every form input that has text attached should utilize a tag. Especially radio or checkbox elements.
Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. For example:
<!-- Not so great -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">