HTML5 Code structure

In the previous lessons, we learned about HTML5 features, new APIs and elements introduced, etc. So, this is the right time to work on our first HTML program, whose output will be visible on a web page. This section is quite important for those who are starting with HTML5, since it covers HTML5 Code Structure.

To start working with HTML, create a Notepad file and save it with the extension .html, for example, new.html, studyopedia.html, project.html, etc.

After creating an HTML document, follow below to see what all gets added to an HTML5 document.

Specify doctype

While starting with HTML5, you need to add a doctype as shown below. Through this the web browser gets to know the version of the HTML, which we will be using in the document,

Specify Character Encoding

You need to specify the character encoding (charset) i.e.

UTF-8 is the default charset in HTML5. UTF is a short form for Unicode Transformation Format and the ‘8’ is its 8-bit blocks to represent a character.

Here’s HTML5 Code Structure widely followed,

For example,

Here’s the output,

HTML5 Code Structure

Above, we saw some HTML tags used in our program structure. Let’s discuss them one by one, covering the newly introduced tags in HTML5,

<!DOCTYPE html>
This is the doctype you need to add at the top of every HTML document.

<meta charset=”utf-8″>
Character encoding which is also called Charset. The default in HTML5 is UTF-8.

As the name tell, <header> tag is used to add header to the document.

A tag introduced in HTML5 to add navigation links

Specify a section on the web page with this tag.

Under <article> tag, you can add independent content. Here, add a blog post, news, article, etc.

Under <aside> tag, add content somewhat related to the page. It can be used to add sidebar content.

The HTML5 tag is used to add an image in the document.

A separate tag <footer> introduced in HTML5 to add footer. Here, you can add copyright information about your website.

HTML5 Attributes
HTML5 Headings
Studyopedia Editorial Staff
[email protected]

We work to create programming tutorials for all.

No Comments

Post A Comment

Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue reading