HTML5 Syntax

HTML5 is the latest version of HTML that comes with syntax compatible with HTML4 and XHTML. HTML5 has many features with flexibility, but it does not follow syntax rules similar to XHTML. Using syntax in HTML5 is easy, and in this tutorial, we will learn about various HTML5 syntaxes.

Before we get into the different syntax of HTML5, let us first understand the new features that come with HTML5.

  • For tag attributes, quoting is not mandatory. Also, attribute values are not obligatory.
  • It is also not mandatory to close any empty void elements.
  • Only void elements (BR, IMG, LINK, etc.) can be self-closed using this />.
  • Upper-case tag names are also allowed.
  • The starting tags are not mandatory for every element.

Elements without closing tags are known as empty tags. For example: <br>, <link>, <img>, <hr>, <meta> etc, as we cannot specify anything between them.

Here are some of the tags from the previous version of HTML with changes added in the new HTML5 version.

The DOCTYPE

Older versions of HTML required a reference to the DTD in the DOCTYPE. In HTML5, DOCTYPE is specified using simple syntax as follows.

<!DOCTYPE html>

Character Encoding

HTML5 uses the simple syntax of the <meta> tag to specify the document character encoding. Also, it is case insensitive, and therefore there is no need to worry about writing in uppercase or lowercase.

<meta charset="UTF-16">

Script Tag

Usually, the type attribute in the script tag comes with a value like "text/javascript":

<script type="text/javascript" src="app.js"></script>

On the other hand, HTML5 does not require any additional attribute instead of "src".

<script src="app.js"></script>

Link Tag

In HTML4, the type attribute had to be written inside the <link> tag. However, HTML5 does not require such additional information.

<link rel="stylesheet" href="app.css">

HTML5 New Tags

Some new tags have been introduced with HTML5 for better structure of HTML documents:

TagDescription
navThe navigation tag denotes a document section in an HTML document that is designed to contain navigation links.
headerThe header tag defines the header of the HTML document or section. It usually contains a logo, navigation, search, etc.
sectionThe section tag defines a section in an HTML document.
articleThe <article> tag is one of the HTML5 element used to specifies independent, self-contained content in an HTML document.
asideThe aside tag is one of the HTML5 elements that define a section containing additional information related to the content surrounding the "aside" element.
dialogThe dialog tag is used to specify a conversation section such as popup dialogs and modals in an HTML document.
figureThe figure tag is used to display a caption of embedded images or videos.
footerThe footer tag defines the footer of the HTML document or section. It usually contains document copyright, navigation, search, etc.

Scroll Back to Top