[Web development #1] – Introduction to HTML

[Web development #1] – Introduction to HTML

Although HTML cannot be classified as ‘programming’ (‘coding’ is perhaps more fitting since we are engaging with a code ) most would agree that its understanding is absolutely fundamental before engaging with other programming languages. HTML dictates the structure of most of the world wide web’s content, while CSS then styles how such content should look. Although a website can be written without any knowledge of either HTML or CSS (through sites such as blogger.com), knowing both is essential to actually fully develop our own website content.

What does HTML stand for?

HTML stands for Hypertext Markup Language. Hypertext can be described as an advanced version of a plain text with the ability to include hyperlinks, which, again, could be described as advanced regular links. Markup refers to all the different characters or other symbols that you insert within a plain text document to indicate how the content of the document should be displayed.

The image above is a simple example of a HTML, where <a> markups (also called tags) were used to create a hyperlink.

Where is HTML writen?

Unlike plain text, HTML has to follow certain rules for it to be recognised as an actual HTML document. The simplest way to write an HTML code is through the Windows’ Notepad or MacOS’ TextEdit – all it takes is to save the text file as .html (instead of the standard .txt extension). There are more sophisticated HTML editors which automatically format some of the code for you and make HTML writing slightly more fun and organised. In this tutorial, I will be using Sublime Text, but I can also highly recommend the Atom editor.

Our first page

For clarity purposes, I recommend creating a dedicated folder for our HTML document, as it will help us link our HTML document with other files later on. When opening our editor, create a new file, name it, add ‘.html’ at the end of the name and save it in our folder. Most editors will already recognise the .html extension and add a corresponding icon (in my case a google chrome icon) to the file, as seen below. Also, although we can name the file whatever we want, it is a good practice to name our code index.html, as most browsers will automatically interpret the ‘index.html’ file to be the homepage of a website.

Now some actual coding

The first thing we have to do with any HTML file is to put the  <!DOCTYPE html> declaration at the beginning of the document. This simply tells browsers what type of document to expect. This declaration is case insensitive, and the following would, therefore, also work: <!DoCtYpE hTmL> or <!doctype html>.

After this, we create our first HTML tag – the <html> tag. All tags within HTML start with ‘<‘ and end with ‘>‘, as this is the language’s main syntax. An HTML tag will apply to anything immediately following it, and to denote where the tag should end, we have to write it once again, but this time with a forward-slash (“/”) after the first ‘<‘ (the pattern is, therefore, <TAG> </TAG>). All of our code should be included within the <html> and </html> tags. Our file should now look like this:

Nothing that we wrote so far will be visible when we visit our website but it is vital for the structure of our code. Within our <html></html> tags, we need to include the <head></head> tags. The head tag is used to declare any meta-information about our HTML documents, such as the document/website title, language of the webpage, and other meta information. To add a title of the page, add <title> </title> with the actual desired title in between the tags (as shown below). When we double-click on our index.html folder, it should open in our primary browser, and we can now see the title in the respective browser tab.

Next, we need to include the <body></body> tag, which contains all visible content of our webpage. It does, just like the <head> element, go inside the <html> tag, and not within the <head> tag. Our document should now look like this:


Before we see our website for the first time, we need to write something within the <body> tag. The two basic tags to include within a paragraph are <h1></h1>, defining a large heading, and <p></p>, defining a paragraph. Try to put these two within the document and make a title and a paragraph under it.

<!DOCTYPE html>
<html>
<head>
	<title> NUTRITION INFORMATION FOR LAWYERS </title>
</head>
<body>
	<h1>Should Lawyers Eat More Carrots?</h1>
	<p>Nutritionists have reached the conclusion that ...</p>

</body>
</html>

After we got this, it is time to see our website. Simply double click our index.html file and the browser will automatically open it (if this does not work on MacOS, make sure to check the ‘Display HTML files as HTML code instead of formatted text’ box in TextEdit –> Preferences –> Open and Save).

And here we go, our first website that runs locally (on our computer), and no one can, therefore, access it via the URL link. HTML works pretty much on this basis, where we add tags containing specific content, which we later edit with CSS and, for example, JavaScript. For now, we can add as many paragraphs and heading tags as we want, and in the next part of this tutorial-series, I will talk about links and images. I also recommend checking the CSS tutorial #1 [here], because with CSS we will be able to change the font, size, shadow, centring and much more of our HTML.

2 thoughts on “[Web development #1] – Introduction to HTML

  1. Reply
    Jessica Kwok
    June 15, 2020 at 12:58 am

    Thank you so much for creating these simple, easy-to-understand tutorials. As a law student who has always wanted to learn how to code, this website / initiative is a true blessing (especially during this time). I will be looking forward to your next post!

    1. Reply
      Adam K. H.
      June 16, 2020 at 7:24 pm

      Thank you for the support Jessica, I really appreciate it. I will be focusing on text based tutorials with the inclusion of interactive exercises such as Scrimba during the next few months and hope to include more video content in the future. Best of luck on your coding journey!

Leave a Reply

Your email address will not be published. Required fields are marked *