HTML page is recognized by the browsers with the .html / .htm file extension. Browsers are the server for the HTML document and show the Output of the HTML code. It reads the HTML code from top to bottom and left to right. So what makes them determined about the code? As you know, there are many different versions of HTML documentations published, how would it know what version of HTML code you’ve written?

Well, every browser comes with the different versions of HTML documentation library preinstalled in their installation directory. That is why you might’ve heard developers recommend always use the latest version of browsers.

Doctype Declaration:

If you do not declare which version of HTML code you’ve been coded, the browser will get confused. For every tag of HTML, it will search its whole library for relevant documentation and then it’ll output the result. However, you can not see the difference visually, the browser will output your result. But it slows down the program runtime and it will cause an increase of your page load time which is not a standard web design practice.

So you have to declare the document type at the very first of your HTML document, even before the <html> tag too. How are you going to do that? It’s pretty simple in HTML5 rather than other versions of HTML. See this two example.

HTML 4.01 Doctype Declaration
HTML 4.01 Doctype Declaration
HTML5 Doctype Declaration
HTML5 Doctype Declaration

Here you can see the difference. While in HTML 4 you have to always copy and paste this segment of code from your previous projects or from the internet (I am assuming you’re not going to memorize the whole bunch of code), in HTML5 you can just put like the second example.

Keep in mind that –

  • You DO NOT have to capitalize everything in doctype declaration.
  • You can write in whichever format you want. Like – UPPERCASE, lowercase. All of those formats are valid in HTML.

Head of HTML Document:

HTML head tag comes with the really important role of HTML document. Keep in mind that all the elements inside the header are not visible to the end-users who are viewing the web page. It is for the browser itself to consider the title, meta information, and external links needed, to show the result of the HTML code.

The Meta Tag:

Meta tag provides metadata about the HTML document. Meta elements are typically used to specify page linguistic support, description, keywords, author of the document, last modified, and other metadata. The common use of meta tag is with the charset (Character set), name, content attributes. The attribute is a modifier of an HTML element type which I’ll discuss later, from now on let’s just skip it.

<meta charset="utf-8">
<meta name="description" content="Tanvir Rahat Blog Post">

This is how you have to put as many meta tags you need inside the head of the document. When you’ll work for responsive web design, you’ll learn more about meta tags.

The Title Tag:

The title tag defines the title of the document. It is only shown in a browser’s title bar or on the page’s tab. It can only contain text, and any contained tags are ignored. This is important because Search Engines count this information as the title of your document to show in their index.

<title>My First Webpage</title>

There are many other elements can be used in the head of the document. But for the basic structure of an HTML page to start working with it’s good enough. When you will learn CSS and JavaScript, you will learn more elements to use in the head of the HTML document.

Body of HTML Document:

The body is the visual section of code that will be visible to the end-users. Whatever you put inside the body tag will output a result which will be visible those who are going to view your page.  There can be only one <body> element in a document. It is categorized as flow content in HTML specifications.

All the element you use here will make a visible result int the browser. Even if you don’t want to put any tag, just put some simple texts like I have done below, and see the result.

<body>This is the body of the HTML document</body>

The browser will automatically assume that it’s a <p> tag and output the result as a paragraph, only if the doctype declared.

Structuring the Document:

To get the output of your HTML code you have to structure the document first. One thing important that you have to remember, the footer is considered as part of the body of a document. The reason why is because it is visible to the End-users which is not that much important for the browsers. The head of the document consists of the information that the browser needs to render a web page.

Here is a structural outline of a basic HTML page document –

  1. Doctype Declaration.
  2. Nesting everything else inside the <html></html> tag.
  3. The Head of the document.
  4. The Body of the document.

Now that you know almost everything about the Structure of HTML page, create a new file by whatever you want to name it, remember to put the .html extension just after your name. Open that file in a text editor, thereafter you can write this code below which I’d really appreciate or you can simply copy and paste it in the file you’ve created, and open in a browser.

 <!doctype html>
   <html lang="en"> 
     <head>
       <meta charset="utf-8">
       <title>Your name</title>
     </head>
  <body>
    <h1>Hello everyone</h1>
    <p>This is YOUR NAME from planet earth. How are you?</p>
  </body>
 </html>

Output of Structuring HTML
Yours might be different because I’ve changed mine to my name in Title and inside the body. Feel free to change yours and see the result.

So that’s all about structuring HTML page or document. If you consider any problem regarding this topic, feel free to comment below, I’ll try to answer those.

P.S – I didn’t discuss the new HTML5 structural elements like nav, aside, main, article because I assume it’s good to adopt the basics first. Those elements will be discussed in a future article about Semantic Elements.

As you may already know Journey To HTML is a series of blog posts of tutorials for those who are new and beginner to Web Design.

Best regards to you. Happy Coding and Thank you.

Advertisements

Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s