General HTML best practices

1. Start with DOCTYPE

The DOCTYPE declaration plays a crucial role in HTML documents by informing web browsers about the specific HTML version used to create a web page. This ensures that your HTML document is parsed and displayed consistently across various platforms (operating systems and devices) and browsers.

To implement a DOCTYPE declaration for HTML5, you should include the following line at the very beginning of your HTML document.

Without it, you risk encountering rendering differences, layout issues, and compatibility problems, making it challenging to provide a seamless user experience across the web. For more details refer to the article - What happens when you omit the doctype declaration in HTML.

Do’s and Don’ts

🚫

<html>
<head>
    <title>...</title>
</head>
<body>
    <p>HTML document with no DOCTYPE declaration.</p>
</body>
</html>

✅

<!DOCTYPE html>
<html>
<head>
    <title>...</title>
</head>
<body>
    <p>HTML document with a DOCTYPE declaration.</p>
</body>
</html>

2. Language attribute

lang attribute in HTML5 is used to specify the language of content within your HTML documents, This helps assistive technologies like screen readers pronounce text correctly and aids translation tools in identifying the document's language for accurate translations.

You can use the lang attribute on various HTML elements, including the <html> element, as well as specific elements like headings, paragraphs, and spans.

The lang attribute follows the ISO (International Organization for Standardization) language code format, such as "en" for English, "fr" for French, "es" for Spanish, and so on. It can also include a subcode to specify regional dialects, like "en-US" for American English or "es-ES" for European Spanish.

Here's how the lang attribute works:

On the <html> Element:

When you include the lang attribute on the <html> element (the root element of your HTML document), you are declaring the default language for the entire document.

<!DOCTYPE html>
<html lang="en">
  <!-- ... -->
</html>

On Specific Elements:

You can also use the lang attribute on specific elements to indicate that a particular section of your content is in a different language than the default language of the document. This can be useful when your page contains content in multiple languages.

<p lang="es">Este es un párrafo en español.</p>
<p>This is a paragraph in the default language (e.g., English).</p>

3. Title tag

The <title> tag is an essential HTML element used to define the title of a web page, which appears in several important places, such as the Browser Tab or Title Bar, Search Engine Results, Bookmark Titles, Social Media Shares, Accessibility and Browser History.

Screen readers and assistive technologies use the <title> tag to announce the title of a web page to users with visual impairments. A meaningful title improves the accessibility of your site.

The <title> tag is placed within the <head> section of an HTML document. It looks like this:

<head>
   <title>Your Page Title</title>
</head>

4. The importance of setting the viewport in HTML

The viewport is the user's visible area of a web page. Viewport varies for different devices.

Viewport meta tag enables responsive design. It allows your web page to adapt to various screen sizes, ensuring that content remains readable and usable on both desktop and mobile devices.

To set the viewport in HTML, it's recommended to use the following meta tag within the <head> section of your document:

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

The width=device-width attribute instructs the browser to set the width of the viewport to match the width of the device's screen.

The initial-scale=1.0 attribute controls the initial zoom level of the web page. A value of 1.0 means that the web page is displayed at its natural size without any initial zooming. In other words, when a user first opens the web page on a mobile device, it appears at its true size, and users do not need to manually zoom in or out to view the content comfortably.

5. Character encoding

HTML5 typically uses UTF-8 as its default character encoding, but to ensure compatibility across all browsers, it's a good idea to specify UTF-8 explicitly using the <meta> tag in your HTML file.

The first element after the opening <head> tag of your documents should be a <meta charset> tag to define the character set in use.

Here’s the markup for it:

<head>
  <meta charset="utf-8">
</head>

If you write an HTML document with UTF-8, almost all characters (including Emoji) can be written directly.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Emoji Example</title>
</head>
<body>
    <h1>Hello, 😀!</h1>
    <p>This is an example of using Emoji in HTML: 🌎🌟🎉</p>
</body>
</html>

6. Add favicon file to the root directory

A favicon, also known as a favorite icon, is a tiny icon that appears in various places within web browsers, such as the browser's address bar, on browser tabs, and in users' bookmarks. It helps users identify and remember your website.

To add a favicon to your website, follow these steps:

First, you need a favicon image. It's typically a square image, often in the .ico format, but modern browsers also support .png and .jpg formats.

Favicon File Type

MIME Type

ICO

image/x-icon

PNG

image/png
The dimension of the favicon is 16x16 pixels or 32x32 pixels. Some browsers also support larger sizes, like 48x48 pixels
Place the favicon image file directly in the root directory of your website.
In the <head> section of your HTML document, add an <link> element to specify the location of your favicon. Here's an example:

Favicon File Type	MIME Type
ICO	image/x-icon
PNG	image/png

<link rel="icon" href="/favicon.ico" type="image/x-icon">

Save your HTML file and load your website in a web browser. You should see your favicon displayed in the browser's address bar and on browser tabs.

7. Use Semantic Markup

Use HTML elements that convey the meaning and structure of your content. Avoid using non-semantic elements like <div> or <span> when more specific elements are available.

8. Provide Meaningful Alt Text for Images

Always include the alt attribute for images to describe their content, especially for accessibility.
Use empty alt attributes (alt="") for decorative images.

9. Use External CSS and JavaScript:

Separate your CSS and JavaScript into external files for better maintainability.
Link to external files using the <link> and <script> tags.
Limit the use of inline styles and prioritize external CSS for styling.