Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

Create First HTML5 Document

1. Editing Html5 Document

One can use any text code editor to create a html5 document. If you need syntax highlighting, you can download and install the Visual Studio Code and then install the plug-in shown below:

Html5 Syntax Highlight Plug-in
Html5 Syntax Highlight Plug-in

After installing the plug-in, create a file called: 001_MyFirst.html. In the below screen, we create a file in a folder called html and then we open that folder in the visual studio code. After this, you can type the code as shown below (Or Copy-Paste it from the reference section).

Html5 Document Created in Visual Studio Code

In the left side toolbar of the Visual Studio Code, you can click the button marked in red, which will open the UI as shown below. Click on the Run and Debug button, and pick a favorite browser to run the file. Now, you can see the output in the browser.

Run and Debug a Html5 Document

Note: You can also use a simple notepad.exe to create the content and save it in a folder. Then double click the file to open it in the default browser.

2. About the Example

The example is below:

The First Html Example
The First Html5 Document Example

Above picture showed the example we are going to create in this example. Here, we will create a document with the title First Html-5 Content. The browser displays page heading followed by a simple paragraph which contains two sentences.

3. Exploring the HTML5 Document First Example

The code is below:

First Html-5 Example
First Html-5 Example

In the above code, very first tag <!DOCTYPE> denotes the document type is Html. HTML – stands for Hyper Text Markup Language which is a universal standard document type which can travel through the internet.  The <Html> tag specifies the beginning of the document and </Html> tells where the document ends. <Head> tag specifies header information for the document. In this example, we specified only the <Title> which is used to provide name for the web document. This will appear in the browser window’s title bar. The header can involve many other information which we will see in some other examples.

The browser will render the content of the html document enclosed in the <body> section. In our example, we used two tags in the html body. They are:

  1. <H1> Tag
  2. <P> Tag

The <H1> is the header tag level 1. These tags vary from <H1> through <H6>. H1 appears in big font size, and it will reduce in size when the text is marked with <H2> and further reduced with <h3> and so on. While header tags are used to form the document heading and sub-heading, <p> tag is used to form the paragraphs. In our example, we have two sentences placed within the <p> tag to form the paragraph.

4. Code Reference – First Html5 Document

4.1 001_MyFirst.html

Categories: HTML5

Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.