DEV Community

Cover image for "<!DOCTYPE html>"
Mahipal
Mahipal

Posted on • Edited on • Originally published at mahipal.dev

"<!DOCTYPE html>"

When i started learning html few days ago, i used to forget mentioning <!DOCTYPE html>.

I thought learning more about it, i will start forgetting less.

So, What does it mean ? What happens if you don't or want to write ? Why should you write it at all ? and also in the beginning of the file and not in second line or after.


<!DOCTYPE html>

<! > markup declaration, that is carried forward from earlier versions of HTML. To let browser know that, <! This is HTML version x.x document !> or <!-- This is comment -- >

DOCTYPE - Documentation Type

html - version of HTML. Here it means HTML5.

Some History

Back old days, Web Browser was first developed in 1990 and NCSA Mosaic was the first browser to display images and text simultaneously and led to the Internet Boom.

Netscape Navigator developed by Netscape which employed many of the original Mosaic authors. Firefox is the successor to Netscape, as the Mozilla community was created by Netscape in 1998 before their acquisition by AOL.

Spyglass, Inc. licensed the technology and trademarks from NCSA for producing its own web browser, Microsoft licensed Spyglass Mosaic and later purchased.

Among few other players, Netscape and Microsoft had majority market share. Both Microsoft and Netscape liberally incorporated proprietary extensions to HTML in their products, and tried to gain an edge by product differentiation.

If you want more on this, this is the place.

Though W3C is in place many did not follow while developing their browsers. Here you can find what others opined back then.

Back to Present

Major upgrade of HTML Web Standards is v5.0 (W3C and WHATWG were working together)

W3C earlier documented all the standards/api's at WebPlatform and Later moved to MDN

As of today, Most of the browsers support these recommended standards, called Full Standards Mode i.e., the behavior described by the HTML and CSS specifications

So by writing <!DOCTYPE html> in the first line of your file, you are telling the Browsers to render the content based on the Full Standards Mode.

Here comes other 2 modes

The only purpose of DOCTYPE is for the browser is to know on which mode rendering has to be. (and as to prevent entering Quirks mode as default).

Even if you write a comment on the first line and second line as DOCTYPE, your browser will enter quirks mode, and you will see unexpected behaviour.

But what if you want to support your content on old Browsers i.e., before HTML 5.0, Nah. There is no reason that you want to spin your head on that.
But if you want to really to support Legacy browsers or give a try, this is the link.

Top comments (3)

Collapse
 
cchana profile image
Charanjit Chana

Wow, I haven’t heard the phrase “quirks mode” in about a decade!

Collapse
 
bobdotjs profile image
Bob Bass

I was building an app with the Google maps API and parcel bundler a few weeks ago. For the life of me, I couldn't figure out why my app wouldn't render. I was following documentation step by step, everything seemed logically in place.

After about an hour of fiddling around with it, I realize that I had <!DOCTYPE... at the top of my document thanks to VS Code Emmet, I always start HTML with ! Enter

I deleted it, and the map popped up on my next save. I put it back, the map disappeared.

I posted online about this and found one other person who ran into the same issue, but nobody who was able to explain it to me. It seems really strange that the Google maps API would require some sort of legacy specification.

Also, I'd really like to know if anyone else here learned HTML in the mid '90s back when we used tables to format our layouts. I recall using notepad and typing all of my tags and uppercase letters.

This was back in the early days of AOL 4.0, maybe earlier. Was that ever the standard? Or am I remembering that wrong?

Collapse
 
piotrlewandowski profile image
Piotr Lewandowski

You saying "Back to present" and linking to 2 pages that are ARCHIVED... That's not present, that's past ;)