A typical HTML piece. Don't feel intimidated now.
What is HTML?

HTML is at the beating heart of everything on the internet. It's an invisible force that holds everything on a web-page together. HTML is a markup coding language which is used for arranging content and structuring web-page elements. It's quite magical really.

Should we be scared of it?

Of course not... silly. Being able to understand simple HTML is an astonishingly useful tool for any inspiring website developer or blogger who wants to add a bit of spark and creativity to their blog or website layout. Or even those who wish to dabble in the workings of designing their own website template. Let your creative mind bloom and blossom through this brief tutorial and it will open the doors to loads of exciting prospects for your web-pioneering adventures.

Starting off: The Basics


First off the bat. HTML documents contain a series of tags. So in order to define something as being an HTML portion of coding we need to describe the web-page as an HTML one. There needs to be a start-tag <html> to begin the HTML statement and a closing end-tag </html> when we've finished writing our code.

  • <html> - Starts the HTML piece
  • </html> - Ends the HTML piece

Each tag must have a start-tag and an end-tag. These are also known as opening and closing statements. They are also surrounded by angle brackets. Now that we have described the web-page document as HTML we can add more tags between them to describe various other portions of our code.

  • <html> - Starts the HTML piece
  • <body> - Starts the body piece
  • </body> - Ends the body piece
  • </html> - Ends the HTML piece

The <body> tag lets us add information into the main bulk of our code. This is where most of our website's rich and captivating informational content will be stored. The <body> tag stores everything on a web-page with the exception of the header - Essentially the website banner and logo - and the footer which could contain appropriate copyright information or back-links and any affiliations your website may have.

  • <html> 
  • <header> 
  • Deep-Thoughts Blog
  • <header> 
  • <body>
  • Welcome to Deep-Thoughts blog. Your thought for the day... The light you see when you die is you coming out of the womb.
  • </body> 
  • </html> 

The <header> defines banner and website name details and will mostly remain consistent throughout all pages of your website without needing to be altered. Here we have our example as Deep-Thoughts Blog. The <body> has been updated with a statement regarding reincarnation which poses as the content which changes from page-to-page.

Here the <title> tag shows the website name. It is displayed on the browser tab or window in which the web-page is being viewed from. It's important that you include this element because it enables search engines to index you easily and informs your visitors what the name of the website is. Otherwise they're left wondering where on Earth they are and this is a sign of poor website organization and structure.

  • <html> 
  • <header> 
  • <title>
  • Deep-Thoughts Blog
  • </title>
  • Deep-Thoughts Blog
  • </header>
  • <body>
  • Welcome to Deep-Thoughts blog. Your thought for the day... The light you see when you die is you coming out of the womb.
  • </body> 
  • <footer>
  • Copyright to Deep-Thoughts Blog.
  • </footer>
  • </html> 

The <footer> tag is quite self-explanatory. It indicates the copyright or footer notes of the website. Common uses include any accreditation to sources of inspiration or acknowledgement of work and often a note on the usability of the content on your website. 

We recommend taking a stroll over to Creative Commons to learn more about copyrights, public usage rights and controlling ownership and distribution of your content to ensure that yours cannot be stolen and claimed as someone elses' work because that would definitely dampen your day's fruitful and educational HTML experience.

We've covered the fundamentals of HTML and how to effectively structure content on your website. This is not the end... as we've only just clipped the edge of the icebergStay tuned for more tutorials as we continue our journey into the mysterious and magical world of HTML and its unlimited possibilities for web developers. Until next time... stay frosty folks. Keep it ImpurityShock.