HTML5 - Syntax
What is HTML5 Syntax
The HTML 5 language was shipped with a "custom" HTML syntax that is compatible with HTML 4 and XHTML1 web documents that are published online but aren't compatible with the more esoteric SGML qualities of HTML 4.
HTML 5 doesn't have equivalent syntax rules as XHTML where we would have needed small letter tag names, quoting our attributes, an attribute had to have a value and to shut all empty elements.
HTML5 was shipped with a lot of flexibility and it has support for the following features:
1. tag names are uppercase.
2. Quotes are not always required for attributes.
3. Attribute values are not always required.
4. Closing empty elements are not necessary.
The DOCTYPE
DOCTYPEs in earlier versions of HTML were relatively longer due to the fact that HTML was SGML based and therefore requires a reference to a DTD.
Web developers that make use of HTML5 would use the following syntax to set the DOCTYPE:
<!DOCTYPE html>
The syntax above is case-sensitive
Character Encoding
Web developers that make use of HTML5 would use the following syntax to set Character Encoding:
<meta charset = "UTF-8">
The syntax above is case-insensitive.
The <script> tag
It is a popular practice for web developers to add a type attribute with a value of "text/javascript" to script elements like below:
<script type = "text/javascript" src = "script.js"></script>
HTML5 removes the additional information that was required, and you can use the following syntax:
<script src = "scriptfile.js"></script>
The <link> tag
In the HTML lesson, you were writing <link> like below:
<link rel = "stylesheet" type="text/css" href = "style.css">
HTML5 removes the additional information that was required, and you can use the following syntax:
<link rel = "stylesheet" href="style.css">
HTML5 Elements
HTML5 elements are written using start tags and end tags. Tags are written using angle brackets with the tag name in between.
The main difference between starting tags and ending tags is that the ending tags have a slash before the tag name.
The following is a typical example of an HTML5 element:
<p>...</p>
Tag names in HTML5 are case insensitive and can be written in all uppercase or mixed case, although the best practice is to use lowercase for better readability.
Most of HTML5 elements hold some content like <p>...</p> is a paragraph. However, Some are not allowed to contain any content at all and these elements are known as empty elements. Some of them include, br, hr, link, meta, etc.
HTML5 Attributes
Elements contain attributes that are meant for setting various properties of an HTML element.
Some HTML5 attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value, they look like the example shown below.
The following is an example of an HTML5 attribute which shows how to write a div element with an attribute named class that is using a value of "example":
<div class = "example">...</div>
HTML5 Document
The following tags were introduced by HTML5 to give HTML documents better structure:
1. section: This HTML5 tag stands for a generic document or application section. It can be used along with the h1-h6 tag to describe the document structure.
2. article: This HTML5 tag stands for an independent piece of content of a document, such as a blog entry or newspaper article.
3. aside: This HTML5 tag stands for a piece of content that is only slightly related to the rest of the page.
4. header: This HTML5 tag stands for the header of a section.
5. footer: This HTML5 tag stands for a footer for a section and can contain information about the author, copyright information, et cetera.
6. nav: This HTML5 tag stands for a section of the document intended for navigation.
7. dialog: This HTML5 tag can be used to mark up a conversation.
8. figure: This HTML5 tag is used to join a caption together with embedded content, such as a video or graphic.
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
