fuddlepixelFuddlepixel coz tech is fun();

Basic Structure of HTML page

Learn the basic structure of html page, the head and body sections of html web page.

By Shubham Ramdeo
17 July 2018 · 3 mins read
# html 

Basic Structure of HTML page

If you don’t know how you can setup your computer to do HTML, I highly recommend please refer back to this article here and get ready! It is easier than you think.

HTML tags

An HTML tag has three things

  1. open tag
  2. content for the tag.
  3. closing tag

And to use tags, we do like this:

<tag_name> content of the tag </tag_name>

For example, referring back to the last article, we have already used a tag for creating headings. Its called h1 and so was used like this:

<h1>My first web page</h1>

This tells the web browser something like this, begin a heading, this is the heading “My first web page”, now end the heading.

Tags are easy to use. It doesn’t matter whether the tags are capital, small, have spacing etc. They are not as strict as the tokens of other languages.

<title>A page</title>

and

<TITle>
	My first web page
</tiTle>

Both produce the same effect.

NOTE: There are some tags which are different from normal conventions shown above. But we will learn them along. :)

Structure of HTML webpage

Let’s catch up what was left in the last article. We created an example page, and that is sufficient to understand the basic structure of HTML.

The following is a basic structure of a normal HTML page.

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

Let break it down.

Doctype

At the very beginning, just add <!DOCTYPE html>. This statement is simply used to tell the modern browsers that the document is about HTML5 source code for a webpage. Nothing much, just write it at the beginning and ignore.

html

This initiates the HTML source code. The webpage source is valid from <html> to </html>. Everything about our webpage comes between these two tags.

An HTML webpage is divided into two sections. Head and Body.

Head

This section is covered between <head> and </head>. This section contains all the things which we do not see directly on the page.

Not all tags are allowed to use in head sections. Only those tags which carry some information, links, resources about the page are allowed.

For example, the title of the web page is an information about the page itself, but do not see it on the page content itself.

<title>My first web page</title>

Obviously, this tag is present inside the head section. That is, between <head> and </head>.

You can notice whatever you write here at the name of the tab on the chrome browser. If you don’t give any title to your page, it will simply show the name of the file (index.html).

Body

This section contains everything that we see. All the headings, texts, images, everything. The page and content are designed and shown here. Whatever we want to show our users, we place it between <body> and </body> tags.

As I explained above, the tag <h1> doesn’t contain information about the site, but it contains content for the page. So tags like these are put inside body section.

Another example was button, it will be shown to the user so the following code is put inside the body section.

<button>click me</button>

Putting it all together

Whatever we have discussed so far, connect it with this pic below. I hope now you can easily understand now how the browser is going to interpret our code.

Creating your first HTML webpage
Creating your first HTML webpage

The above explained basic tags and structure of an HTML document are enough to start developing sites now! In the next article, we will start learning the tags that will help you start building your very own page.

Until then keep learning programming from zero at fuddlepixel.com.


Share this :



Update me weekly ✉

Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.

I'm in ♥


Or follow us
   


About author

Shubham Ramdeo

Shubham Ramdeo

Shubham Ramdeo is the founder of Fuddlepixel. He is a geek, a writer, involved with many technical and humanity projects.

Meet me!



Recent





Related

html 

Top