learning basics of web designing

Structure of a HTML document

I think you get the idea about the tag and attribute in the last lesson, now we going to do some work in action. But before going further, you need a good text editor and a latest updated browser. Now we are going to look into basic structure for an HTML page.

A basic structure of an HTML page

Although it’s not necessary to use the basic structure for an HTML page, but w3c  ( World Wide Web Consortium) make some standards to follow. So one must follow the basic structure for an HTML page.

<!DOCTYPE html>
<html>
<head>
.................
</head>
<body>
...................
</body>
<html>

It is a very simple structure. Easy to remember. Now let me explain this step by step.

<!DOCTYPE html>

It tells browser or system that in which language this document is written. Here language is HTML. So browser will look for HTML tag and take it as HTML and render its content as HTML.

<html>

With html tag, the browser gets that here HTML code is written.

<head>

Head tag content is not showing on the web page. Only printable thing is the <title> tag, which prints in the tab. Head tag contained meta-tags, stylesheet, title, internal CSS etc. Here only special tags are used. Which we will look in next lessons.

<body>

All the things shown on a web page is written within the body tag.

That’s all.

Create the first HTML page

Are you excited to dive into the world of web designing? I am pretty sure you are. Here are simple steps to follow.

  • Create a folder on the desktop (or wherever you want) and name it anything. Please make sure if you are using the name of more than one word, then please add – instead of space. Space is not allowed in a URL and it show on some URL language. So for clean url use – instead of space.
  • Now open text editor and copy below code.

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Website</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

  • And paste it text-editor and save it yourname.html in the folder that you created.
  • Now open your folder and double-click yourname.html to view it in the browser.
  • Right click and select open with and chose your favourite browser to show there, in case it is not open there.
  • Now change the title and h1 tag value and save it. Then refresh the page in the browser.
  • Text inside <title></title> will show on browser’s tab, so change it, save and refresh the page in the browser.

That’s all for this lesson, in the next lesson we will learn about the some basic tags.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Share the Article

About author
Darshan Saroya

Darshan Saroya

A passionate WordPress Theme Developer. Can build a custom theme for your business.  I love to create clean and modern themes, using the power of WordPress. Here I provide the tutorials related to WordPress Development, Core PHP and HTML.

Free Bootstrap 4 Theme

Mega UI Advanced Material Design Blogging WordPress Theme

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.