Introduction

HTML stands for HyperText Markup Language.

It is the basic building block for any website.

HTML Tags

HTML works by defining all the content of a website with tags.

An opening tag is made up of <, tag name and >, e.g. <body>.

A closing tag has an extra slash: </body>.

You can put whatever your content is between an opening tag and closing tag (some tags do not have a closing tag. We will explain more tags in the next section so don't worry.)

A page with a simple header and a paragraph looks something like this (try to edit the code!):

You will need to add a few more tags to let the browser know you are using HTML 5 as the version and to properly define where your content is located.

<!DOCTYPE html>
<html>
  <body>
    <h1>This is a H1 tag</h1>
    <p>This is a paragraph tag</p>
  </body>
</html>

You can check here for more details.

HTML Attributes

You can add attributes to an opening tag, for example <div id="abc"> has an attribute id of value abc.

Different tags have different attributes that can be assigned to them, but a few attributes like id and class are common to all tags.

You will learn more about attributes as you progress.

<div id="foo" class="bar">Div tag</div> <!-- id and class attributes -->
<p style="color: red;">Paragraph</p> <!-- style attributes are also common -->
<img src="./some_picture.png"/> <!-- you can put src on img, video, audio, etc. -->

You can use both Single Quotation id='foo' or Double Quotation id="foo"

Editing HTML

It is really simple to make your own HTML file!

Use any code editor (or weapon) of choice, put a few tags in (you can use the example code above), and save as index.html (other names are also fine).

Now right click and choose open with chrome and you can see your code in action!

Developers Console

You can press F12 to open up the developers console in chrome, firefox, opera, etc.

You can see the html code for the website in the elements tab.

There are also the styles tab, console tab, network tab, application tab and more.

Try to get familiar with the developers console (especially elements and console tab) since we will be using it for almost all the courses and projects.

You can press the little arrow icon on the top left of the developers console, then hover over the page, and you will see the relevant code getting highlighted in the elements tab.

A quick note, you can add comments in a HTML file with the  syntax. (double hyphen)

<!-- this is a comment -->
<!--
this is a
multiline comment
-->

// default language: TSX