03 – Setting Up the HTML Document Structure



We can say that building a website is a lot like building house. Why? because building a house needs a strong foundation and building a website you need a strong HTML foundation.


Previously, I have tackled about HTML and it’s common three terms which are the Tags, Attributes, and Elements . So, this time, let’s learn more about HTML documents and how it works.


HTML documents are text documents saved with the extension .html that are read in by a Web browser and then rendered on the screen. You first need a plain text editor to begin writing HTML or any text editor that you are comfortable with. Just like Sublime Text and Dreamweaver, these two are an example of popular plain text editors for writing HTML and CSS.


HTML documents have a required structure the declaration and elements:  <!DOCTYPE html><html><head>, and <body>. (It is very important to use the correct HTML document structure when creating a web page because if the HTML structure is incorrect the web page can break).


The document type declaration or <!DOCTYPE html>, is the first coding that you should enter in your HTML document. This informs web browsers which version of HTML is being used to process the code correctly. Following the DOCTYPE declaration, is the <html></html> element these pair of elements identifies the document’s content as HTML to the browser.


The <html> element goes under your DOCTYPE declaration and </html> goes in the last line of your document.


The <head> and </head> elements are written inside the <html> element. These elements identify the document’s head area. The content between two elements is not visible on your web page. Instead, it may contain the document title (You can see it in the title bar which is displayed in the browser window), links to any external files and etc.. While inside the <body>, it is where all the content became visible on the web page.

Below is an example of a typical HTML document structure:

HTML Document Structure Demo

The breakdown of codes above shows the document begins with the document type which is the declaration, <!DOCTYPE html>, then it is followed by <html> element. You will see that inside the <html> goes the <head> and <body> elements. The head element contains the character encoding of the page the <meta charset="utf-8"> tag under it is the <title> element for the title of the document. The <body> contains a heading which is the <h1> element followed by <p> element, as the paragraph. Both heading and paragraph are visible on the webpage and are nested within the <body>.


To make the document structure well organized and legible, make sure that you indent the element which is placed inside of another element. Example the <head> and <body> both elements are placed inside of another element and it was indented inside the <html> element.


Example of Self-Closing Elements :

  • <input>
  • <link>
  • <meta>
  • <param>
  • <source>
  • <wbr>
  • <br>
  • <embed>
  • <hr>
  • <img>


Facebook Comments


Please enter your comment!
Please enter your name here

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