Blog

HTML best practises

Always Declare a Doctype


<!DOCTYPE html>
<html lang="en">

Use only one <h1> element for each code sheet 


<h1>This is the only H1 of this page</h1>

Use an Unordered List <ul> for Navigation


<nav>
    <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="about.html">ABOOUT ME</a></li>
        <li><a href="works.html">MY WORKS</a></li>
        <li><a href="contact.html">CONTACT ME</a></li>   
    </ul>
</nav>

Code with SEO in mind

  • Add meaningfull and appropiate title tag, it helps search engines index and rank the page accurately, improving visibility in search results
  • Use alt attributes for images. This is also very important for accessibility
  • Include a descriptive meta description that describes briefly the content of the page
  • Add title attribute to anchor tag, improves the accesibility and increases the usability of the page, that's why it must be a significant value

<title>Nia Ramírez Portfolio</title>

<img src="/img/portrait.png" alt="Nia Ramírez portrait" class="portrait">   

<meta name="description" 
    content="Nia Ramírez portfolio, front-end developer. Notes, thoughts and interests" />   

<a href="/blog.html" title="Learn with my blog">My blog</a>

Use <div></div> to group your content into major sections with similar meanings


<div class="card-container">
    <div class="card-content">

But don't use <div></div> for everything. It's important to determinante, depending on the code, when they are necessary or not. Maybe they can be eliminated and the result is the same than with them

There are some other tags that can be used instead of <div></div> and that group the content in a more semantic way. For example: 


<header>
    <h1>Title</h1>
</header>
<main>
    <!-- content -->
</main>
<footer>
    <!-- content here, for example, media links -->   
</footer>

Don't put block elements within inline elements. <div>, <h1>-<h6> and <p> are block elements.
<span> or <a> are inline elements.
So don't do this: 


<a href="#">
    <p>Visit this web</p>      
</a>

Instead, do this:


<p>Visit this web <a href="#"></a></p>

Always close your tags


<p> This is a paragraph without closing tag

Use lower case markup, it helps the code readability


<img />
<!--instead of-->
<IMG />

Use external style sheets. This improves code organization, promotes reusability, accelerates page loading, it's easier to mantain and facilitates global changes, giving consistency to the code


<link rel="stylesheet" href="style/style.css">
Go back to post list