Introduction

Watch this on Youtube

What is HTML ?

Before we talk technically about HTML, let’s think about someone in our school whose handwriting is very good (it might be you). This person takes notes in a structured manner, with bold headings, underlined subheadings and bullet points. The notes looks organised and visually appealing. HTML is similar in that it’s a way of telling browsers how to display web pages.

Now for the technical definition, HTML (HyperText Markup Language) is the code used to structure a web page and its content.

For example, A web page content can be structured using paragraphs, bulleted lists, images, and data tables etc. 

Let’s split the abbreviation of HTML and understand its meaning:

  • HyperText: refers to text that contains links to other text (e.g. links).
  • Markup: refers to the action that HTML tags perform on the text within them (e.g. making the text bold or italic).
  • Language: It’s important to remember that HTML is a markup language, not a programming language (e.g. there are no loops, conditional statements etc).

Where HTML is used ?

“Almost every web page we encounter in our daily lives, including approximately 94.7% of all current websites, use HTML.

To see this for yourself, visit any web page and right-click to select ‘View Page Source’ and you will see the underlying HTML code.”

What tools do I need to write HTML code ?

  • A computer: It might seem obvious, but for someone who is into serious web development, it’s best to invest in a desktop or laptop. For rest of the tutorials, we will be using macOS, but you are welcome to use the operating system of your choice.
  • A text editor: Windows comes with Notepad and macOS comes with TextEdit. Ubuntu 22.04 LTS comes with GNOME Text Editor by default and other Linux distributions may comes with different text editors. For web development, you might want to use something better than Notepad or TextEdit. We recommend starting with Visual Studio Code, which is a free editor that offers live previews, code hints and auto completions.
  • A web browser: You’ll need to install a couple of desktop web browsers to test your code in. so install your favourite browsers, for example:
    • Linux: Mozilla Firefox, Google Chrome
    • Windows: Microsoft Edge (default), Mozilla Firefox, Google Chrome  
    • macOS: Safari (default), Mozilla Firefox, Google Chrome

Before proceeding, ensure that you have installed a text editor and at least one web browser of your choice, and that they are ready for use in the upcoming tutorials.