HTML Tips and Best Practices

Pre tag

print preformatted text exactly like is written

            Random
                text
            preformatted

Code tag

<code> code represent one line of code, multiples lines should be inside a <pre> tag

             
                code { 
                    background-color: #efefef;
                    padding:25px;
                    margin: 15px 0; 
                }

Use <em> and <strong>

Never use <b> and <i>, substitute to <strong> and <em>

Bold text and emphasize text

HTML Accordion

<details> element to create the accordion and <summary> as the accordion header

Just an accordion with basic HTML

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, commodi! Repudiandae deleniti repellat ipsa eum quo alias voluptas. Quisquam est iure praesentium totam enim alias voluptate cupiditate beatae optio aspernatur!

Highlight Text

<mark> to highlight the text

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Download

download attribute in links

<a href="path" download>

click here

Phone, SMS and e-mail links

Ordered List

start attribute start="number"

  1. Anakin Skywalker
  2. Luke Skywalker
  3. Darth Vader
  4. Obi-Wan Kenobi

File Upload Type

accept attribute in input type files

<input type="file" accept="image/*"> Only image types

Meter Element

No CSS or Javascript needed

Fieldset

group inputs and labels with fieldset

Use <legend> to display a legend to fieldset

HTML Slider

<input type="range">

Your choice:

input search

The input type "search" have a clean button by default

Auto Complete

autocomplete attribute for phone assistance or autocomplete softwares

Personal Information <input type="text" autocomplete="given-name"> <input type="text" autocomplete="family-name"> <input type="email" autocomplete="email"> <input type="tel" autocomplete="mobile">
Password <input type="text" autocomplete="new-password">

Noopener

Links with target="_blank" opens the link in a new tab. Without rel="noopener" the new tab can access your page via windows object

just an example

Lazy Loading

loading="lazy", load the image only when the user scrolls to them.

Random image Random image Random image

Image Caption

Use <figure> elemento to wrap the image and <figcaption> as caption

Foggy forest
Foggy forest

HTML Tag as plain text

Use "& lt ;" and "& gt ;" with no space

<p>Use "& lt ;" and "& gt " with no space</p>