- Ensure the HTML document begins with a proper doctype declaration:
<!DOCTYPE html>.
In HTML, the doctype is the required "" preamble found at the top of all documents. Its sole purpose is to prevent a browser from switching into so-called "quirks mode" when rendering a document; that is, the "" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.
- Use the correct HTML structure, including
<html>,<head>, and<body>tags.
- Specify the character encoding for the document:
<meta charset="UTF-8">.
- Ensure each page has a unique and descriptive
<title>element.
- Provide a meta description for search engines:
<meta name="description" content="The page description here">.
- Use the viewport meta tag to ensure the site is mobile-friendly:
<meta name="viewport" content="width=device-width, initial-scale=1.0">. - Never use
maximum-scale,minimum-scale,user-scalable=no. - Ensure the site is fully responsive and works on various screen sizes and orientations.
- Use media queries to adapt layouts for different devices.
- Each element in HTML falls into zero or more categories that group elements with similar characteristics together. These categories are important for understanding what constitutes valid markup in HTML:
- Use semantic HTML elements to structure the content meaningfully, such as
<header>,<nav>,<main>,<section>,<article>, and<footer>.
When you have doubts, you can refer to MDN or HTML specification documentation:
- Use headings (
<h1>to<h6>) to create a logical document structure. Avoid skipping heading levels.
-
Use
<section>to define sections in the document. Each section should be thematically grouped. -
Use
<article>for self-contained content that can be independently distributed or reused (e.g., blog posts, news articles). If you have any doubts, you can refer to this documentation:
- Use
<ul>for unordered lists and<ol>for ordered lists. - Ensure list items (
<li>) are used correctly within the list elements.
- Use
<table>,<thead>,<tbody>, and<tfoot>elements for tabular data. Provide<th>elements for headers.
- Include external scripts and stylesheets using
<link>for CSS and<script>for JavaScript, placed appropriately.
- Ensure the HTML is valid by using a validator such as the W3C Markup Validation Service or NU Validator.