Search⌘ K
AI Features
Home
Courses
Web Development: Unraveling HTML, CSS, and JavaScript

HTML5 Markup Basics

Understand the basics of HTML5 markup, including the importance of the <!DOCTYPE html> declaration, the relaxed syntax rules that simplify coding, and the use of comments to organize your HTML. This lesson helps you grasp foundational HTML5 concepts to enhance your web development skills.

We'll cover the following...

In the previous chapter, you examined a simple HTML document:

HTML
<html>
<head>
  <title>A simple HTML page</title>
</head>
<body>
  <p>I would not have thought it was this easy!</p>
</body>
</html>

To tell your browser this document uses HTML5 markup, add the highlighted line to the top:

HTML
<!DOCTYPE html>
<html>
<head>
  <title>HTML page written in Notepad</title>
</head>
<body>
  <p>I would not have thought it is easy!</p>
</body>
</html>

Document types

The <!DOCTYPE> tag announces to the reader and, of course, to the browser, the type of markup to be used when parsing and displaying the document. The <!DOCTYPE html> code says that the remainder of the document is to be read as HTML5.

The codes for previous markup types were considerably longer, and more complex to write and remember, for example:

XHTML 1.0 Strict:

XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML 4.01 Transitional:

XML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

📜NOTE: If you are interested in all <!DOCTYPE> tags, visit http://www.w3schools.com/tags/tag_doctype.asp.

Slackened structure and syntax rules

HTML5 allows being perfunctory, so you can omit many HTML tags and the markup is still valid:

HTML
<!DOCTYPE html>
<title>HTML page written in Notepad</title>
<p>I would not have thought it is easy!

Here not only the <html>, <head>, and <body> tags have been omitted, but as you may observe, the closing </p> tag (line 3) is missing, too.

Because HTML5 is not case-sensitive, you can mix lowercase and uppercase letters in tag and attribute names, so the following declaration is still valid:

HTML
<!DOCTYPE html>
<html>
<HEAD>
  <title>HTML page written in Notepad</title>
</HEAD>
<bODy>
  <p>I would not have thought it is easy!</P>
</BodY>
</HTML>

HTML5 also loosens the syntax to be used for attributes. Unless you use a restricted character in attribute values (such as “>”, “<”, “=”, space, and a few others) you can omit quotation marks. For example, instead of writing:

<h2 />

You can define the class attribute like this:

<h2 />

You can also make your code simpler by using attributes with no values. In this case, the attribute presents some default value that is interpreted by the context the attribute is used in. For example, traditionally you could use the following markup to define a checkbox with the checked state:

HTML
<input type="checkbox" checked="checked" />

With the loosened syntax you can write it shorter:

HTML
<input type="checkbox" checked />

Well, you can question if the slackened structure and syntax rules are really useful. To be honest, in many situations they add inconsistencies and raise issues. Of course, there are exceptions.

Comments

Just as programming languages support comments, so does HTML. You can use the <!-- … --> tag to put a comment in your markups, as shown in this code snippet:

<!-- Display the “see also” section -->
<p>You can find more information on this topic:</p>

Of course, comments are not displayed by the browser.

In the next lesson, we will cover usage of the HTML element.

Stay tuned :)