HTML5 is the latest version of HTML that comes with syntax compatible with HTML4 and XHTML. HTML5 has many flexible features, 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:
| Tag | Description |
|---|---|
| nav | The navigation tag denotes a document section in an HTML document designed to contain navigation links. |
| header | The header tag defines the header of the HTML document or section. It usually contains a logo, navigation, search, etc. |
| section | The section tag defines a section in an HTML document. |
| article | The <article> tag is one of the HTML5 element used to specifies independent, self-contained content in an HTML document.
|
| aside | The aside tag is one of the HTML5 elements that define a section containing additional information related to the content surrounding the "aside" element. |
| dialog | The dialog tag is used to specify a conversation section such as popup dialogs and modals in an HTML document. |
| figure | The figure tag is used to display a caption of embedded images or videos. |
| footer | The footer tag defines the footer of the HTML document or section. It usually contains document copyright, navigation, search, etc. |