Introduction to HTML

Introduction

HTML stands for hypertext markup language. It is a very common mistake to mix up a markup language with a programming language, therefore, I shall make it very clear – HTML is not a programming language. The contents and elements of HTML are interpreted by browsers and this interpretation results in visible or audible websites where the tags and scripts are not displayed. The initial release of HTML was in 1993 where the standards were set by World Wide Web Consortium or better known as W3C. It has evolved over the years from HTML to HTML 4 and to HTML 5, which is the latest version of HTML. Nowadays, this language is now a norm of the Internet. Sites like Google, Youtube and many more are all done using this powerful markup language.

Why you should learn it

  • You can create beautiful websites just like Twitter
  • If you have a Tumblr page, learning HTML will allow you to customize your Tumblr page
  • You can make money through web design
  • It is easy to learn
  • HTML is well documented on the Internet
  • HTML is standardized by W3C, so it is a pretty consistent language across different OS and browsers
  • There are many communities that are able to assist you with it (Stackoverflow, etc)

If you want to pick up a useful skill, HTML will definitely be a great one.

Syntax

HTML syntax is very simple. It consists of tags that are angular brackets which starts with a < lesser than operator and ends with a > greater than operator. Most elements are paired and must be closed with a / backslash. So in essence, it is just <html></html>. The elements that are of exception to this rule would be <img /> and in-fact, it isn’t necessary to write it with a / backslash too, so you can also write it as <img>. In some languages such as Python, indentation matters but for HTML, indentation is not required but should be used to keep the code readable.

Structure

HTML starts with a document type declaration and for HTML 5, the declaration is <!DOCTYPE html>. This document declaration helps the browser understand the website’s webpage HTML version. After this is declared, the HTML content begins with the <html> tag.
The HTML consists of a head and body which are wrapped using <head></head> and <body></body> tags. The head consist of data the browser needs to understand the web page, the data in the head are usually not visible to the user in any way. The body on the other hand, has data that the browser will render and display to tser.

Example

This is a hello world example. The <title> element is used here which will show the title of the webpage.
Save this example as index.html or alternatively you can download the file from the Github code for this tutorial.

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
Hello World! This is my first HTML page
</body>
</html>

Conclusion

Yep, that was so easy and fast wasn’t it? I hope you have enjoyed this tutorial and this has helped ignite the fiery passion of you for HTML. Please take note that this is just a very simple introduction to HTML. I will be continuing to write HTML tutorials to help all of you out. If you have any questions, feel free to leave them in the comments below.

Github Tutorial Code

Author: Woo Huiren

Currently a student at National University of Singapore. I contribute to opensource projects - primarily PHP and Angular related. I write about PCF and PWS related stuff too.

Leave a Reply