Lesson 1 – HTML5 Syntax

In order to write in HTML5, you need a text editor. Though, you can choose from numerous text editors, the Notepad++ is the best one for beginners.

In order to download Notepad++, go to https://notepad-plus-plus.org/. Now click on Download Current Version 7.7.1 at the bottom of the right Navbar as shown in the following figure.

The next step is to click on downloaded exe and follow the instructions. The notepad++ will install like any other software on your computer.

Creating your first HTML5 document

Creating your first HTML5 Document requires you to open a new file in the text editor and rename it as index.html. Then, write the following code or snippet in the new file to create a basic HTML5 document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Your First HTML5 Document</title>
</head>
<body>
    Congratulations. You have created your first HTML5 document
</body>
</html>

Every HTML5 document should have the following components to work properly.

The Document type: The document type (!DOCTYPE Html in the case of HTML5) informs the browser which version of HTML it is dealing with.

The html element <html>: the html element encloses both the head section and body section represented by the head and body elements respectively.

The head element <head>: the head element contains every possible information about the HTML 5 document including the title element and the character set.

The body element <body>: The body element incorporates all the content which browser actually displays such as text, images, and audios and videos.

The meta element <meta>: the meta element helps search engines catalog webpages. It provides necessary information to the search engine about the website. It also has two important attributes (more on attributes later) that are name and content. The name denotes the content of the meta element whereas search engines gather information about the website from the content attribute.

Congratulations. You have created your first HTML5 document.

The outcome of the above code will be as under.

In the next chapter, we will study HTML5 Elements and tags.