DEV Community

Yaser Adel Mehraban
Yaser Adel Mehraban

Posted on • Originally published at yashints.dev

Let's write HTML like a pro 😎

#showdev #webdev #html #bestpractices

How often have you wrote a block of HTML without realising the code you've written might not be ideal?

The why

HTML has always been that kid in the corner where nobody talks to because JavaScript and CSS have always stolen the attention.

Now keep that picture in your mind cause I am going to go through some simple tips which together, make a difference and help bring that kid in the centre again 😁.

These are part of a perspective of creating a clean, maintainable and scalable code, that will make a good use of the semantic markup elements of HTML5 and that will render correctly in supported browsers.

So just to stop me from going on and on about why, let's have a look at the what.

DOCTYPE

Starting from the top of your index.html, make sure you're declaring a DOCTYPE. This will activate the standard mode in all browsers and let them know how the document should be interpreted. Keep in mind that DOCTYPE is not an HTML element.

For HTML5 it looks like:

<!DOCTYPE html>
Enter fullscreen mode Exit fullscreen mode

Note: If you're using a framework, this is prepopulated for you. If not, I highly recommend using code snippets like Emmet which is available in VS Code.

Emmet to the rescue

Curious to find out more about other doc types? Have a look at this reference document.

Optional tags

Some tags are optional in HTML5, mostly because the element is implicitly present. Believe it or not, you can omit the <html> tag and the page will render just fine.

<!DOCTYPE HTML>

  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>Welcome to this example.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Above is a valid HTML, however, there are some cases where you can't do so, such as tags followed by comments:

<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->

  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>Welcome to this example.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Above is invalid because the parse tree changes due to comment being outside of <html> tag.

Closing tags

You should always consider closing your tags because some browsers will have trouble rendering your page. However, it's recommended to keep those for readability and other reasons which I will go through later.

<div id="example">
  <img src="example.jpg" alt="example" />
  <a href="#" title="test">example</a>
  <p>example</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Above are all valid tags. But there are also some exceptions πŸ‘‡πŸΌ to this rule.

Self-closing tags are valid, but not required. These elements include:

<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>
Enter fullscreen mode Exit fullscreen mode

Note: Normal elements can never have self-closing tags.

<title />
Enter fullscreen mode Exit fullscreen mode

Above is invalid obviously.

Charset

Define your character set upfront. It is best practice to put it right on top inside <head> element.

<head>
  <title>This is a super duper cool title, right πŸ˜₯?</title>
  <meta charset="utf-8">
</head>
Enter fullscreen mode Exit fullscreen mode

Above is invalid and title wouldn't render properly. Instead move the character set deceleration on top.

<head>
  <meta charset="utf-8">
  <title>This is a super duper cool title, right πŸ˜ƒ?</title>  
</head>
Enter fullscreen mode Exit fullscreen mode

Language

Another reason to not omit the optional tags is when using attributes. In this case you can and you should define the language of your web page. This is really important for accessibility and searching.

<html lang="fr-CA">
  ...
</html>
Enter fullscreen mode Exit fullscreen mode

Title

Never, never, ever omit the title tag. It's super bad for accessibility, and I will personally never use your site because I can't find it 2 seconds after opening it and 20 more tabs later 😁 (the browser tab won't have anything to show).

The base tag

This is a really useful tag which should be used with cautious. This will set the base URL for the app. Once set, all links will be relative to this base URL, which might cause some unwanted behaviour:

<base href="http://www.example.com/" />
Enter fullscreen mode Exit fullscreen mode

With above set, href="#internal" will be interpreted as href="http://www.example.com/#internal".

Or href="example.org" will be interpreted as href="http://www.example.com/example.org".

Description

This meta tag is very useful although it's not strictly part of best practices. This is super useful for search engines when they crawl your site.

<meta name="description" content="HTML best practices">
Enter fullscreen mode Exit fullscreen mode

I have a post you can check on SEO which has been super popular.

Semantic tags

Although you can create your UX engineer's wire frames with just divs, it doesn't mean you should. Semantic HTML gives meaning to your page rather than just presentations. Tags like p, section, h{1-6}, main, nav, etc are all semantic tags. If you use a p tag, users will know this represents a paragraph of text and browsers know how to represent them.

Semantic HTML is way beyond the scope of this article. But you should defo check them out and use them as if they're your pen when you're writing. Can you write without a pen ❓ (or mouse 😁)?

hr shouldn't be used for formatting

<hr> is not a formatting element, so stop using it to format your content. In HTML5 this tag represents a thematic break of your content. A proper use of it might look like this:

<p>Paragraph about puppies</p>
<p>Paragraph about puppies' favourite foods</p>
<p>Paragraph about puppies' breeds</p>
<hr>
<p>Paragraph about why I am shaving my head πŸ˜‚</p>
Enter fullscreen mode Exit fullscreen mode

Be careful when you use the title attribute

The title attribute is a powerful tool which can help clarify an action or the purpose of an element on the page like a tooltip. However, it's not interchangeable with other attributes like alt on an image.

From the HTML5 spec:

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

Read more about how to properly use this attribute.

Single or double quotes

I've faced many code bases where there are a mix of both in the markup. This is not good especially if you are using a framework which depends on single quote like php and also when you're using a single quote in a sentence just like I did now. Another reason is to keep it consistent which is always good. Don't do:

<img alt="super funny meme" src='/img/meme.jpg'>
Enter fullscreen mode Exit fullscreen mode

Instead:

<img alt="super funny meme" src="/img/meme.jpg">
Enter fullscreen mode Exit fullscreen mode

Omit boolean values

When it comes to having boolean values for attributes, it's recommended to omit those as they don't add any value and also increase your markup's weight.

<audio autoplay="autoplay" src="podcast.mp3">

<!-- instead πŸ‘‡πŸΌ -->

<audio autoplay src="podcast.mp3">
Enter fullscreen mode Exit fullscreen mode

Omit type attribute

There is no need to add type attribute to scriptand style tags. You also get a validation error from some services such as W3C's markup validation tool.

Validate your markup

You can use services like W3C's markup validation to make sure you have a valid markup 😍.

Say no to inline style ☒

What you write in your HTML file is the content, how it looks like is presentation. Leave the presentation to CSS and don't use inline styles. This will benefit both your developers and browsers to digest your mark up.

Summary

These are just a tip of the iceberg in terms of small things to keep in mind when writing markup. There are heaps of good resources you can have a look for deeper insights, and I highly recommend you to skim through them at least once.

Hope you've enjoyed the read. And stay classy 😊, with your markup 😁.

Top comments (12)

Collapse
 
comandeer profile image
Tomasz Jakut •

On the other hand, tags like i and b do not represent semantics.

It's no longer true. De facto all elements in HTML are semantic, including also b, i and u, e.g b represents

a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood

Additionally W3schools is not affiliated with W3C:

The site derives its name from the World Wide Web (W3), but is not affiliated with the W3C.

And TBH their content is much worse than MDN's, e.g. they claim that DOCTYPE tells the browser which version of HTML was used to create the page and that DTD is needed to parse HTML4 correctly. Both of these statements are false: DOCTYPEs are needed only to activate rendering in standards-compliant mode and DTDs aren't used at all, as all rules of parsing HTML are described in details in specification. There are many more errors like this one on W3Schools, so basically it's better to link to MDN instead.

Collapse
 
yashints profile image
Yaser Adel Mehraban •

Thanks

Collapse
 
abbiranjan profile image
Alok Ranjan •

Very Nice and informative content.
Thanks a lot.

Collapse
 
pikarrypham profile image
PhαΊ‘m Ngọc ThΓΉy Trang •

Wonderful! It can help me to prepare a lot before interviewing. I hope you can write more posts like this.

Collapse
 
yashints profile image
Yaser Adel Mehraban •

Thanks Pham, I will for sure

Collapse
 
vlasales profile image
Vlastimil Pospichal •

github.com/mattn/emmet-vim

Collapse
 
jsalinas11 profile image
Jordan •

I like how this is more of an overview and offers links to dive deeper into various points. It's a nice way to pack in a lot of information without being overwhelming. Nice work!

Collapse
 
yashints profile image
Yaser Adel Mehraban •

Thanks Jordan 😊

Collapse
 
andrewbrooks profile image
Andrew Brooks πŸ‘¨β€πŸ’» •

Honestly I often have the nagging feeling that my HTML markup could be better. Thanks for sharing your insights! Bookmarked.

Collapse
 
yashints profile image
Yaser Adel Mehraban •

Totally relatable, that's why I decided to write about it

Collapse
 
isajal07 profile image
Sajal Shrestha •

It's really important to revise the things we've learned and this is quite enough HTML revision. Thanks, Yaser.

Collapse
 
yashints profile image
Yaser Adel Mehraban •

True, and you're welcome

Read next

plazarev profile image

JavaScript News, Updates, and Tutorials: March 2024 Edition

Pavel Lazarev -

mattbrailsford profile image

Creating your own UI extension points in Umbraco v14 - Part 1: The Basics

Matt Brailsford -

prathamdupare profile image

API Routes in Next.js - Part 4

Pratham Dupare -

gcascio profile image

Dynamic breadcrumbs in Next.js using the app router

gcascio -