Skip to main content

Introduction to HTML

HTML​

MDN describes, “HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).”

Now, give this a thought - do you know why it is named Hypertext Markup Language?

HTML (Hypertext Markup Language) is the backbone of every page (including the one you are currently reading). It is written in the form of HTML elements. Basically,

Hypertext implies that the text has links, termed hyperlinks, embedded in it. When a user clicks on a word or phrase with a hyperlink, it takes them to another web page.

A markup language indicates text that can be converted into images, tables, links, and other representations.

Maybe a tiny experiment (Not the typical science one though)

First, open your browser and head to your favourite website.

Without a second thought, right-click on the web page and click on inspect.

Do you see a sectioned page with tiny ant-like text filled within angular brackets?

Chill! Let's not speed things up.

These texts within angular braces are the so-called HTML tags. And every HTML document starts and ends with HTML tags.

They tell your browser which elements to present on the web page and how to present them. The order in which these elements appear is determined by the order in which the tags appear.

Probably a 100 or more.

ALERT: DON'T GET ALL STRESSED UP.

You will probably use only a handful of them on your web pages.

A quick recap: A tag is a command in a web page that tells the browser to do something.

Tags are usually enclosed in angular brackets.

< your tag >

Most of the tags would come as couples. For example,

<html> </html>

The opening tag would just contain the tag. But the closing tag would contain a front slash ‘/’ denoting the closure of the tag.

There are many self-closing tags (singles) like,

<br>, <img>

Here is an example of a couple of tags and self-closing tags.

Now, let's explore the paragraph tag.

"You are a Super cool Developer."

<code editor comes here>

Woah! Hold on, don't get excited. That's an example line ;)

On the other hand, every Kalvian is a super cool developer. You will be one too. So cheer up again!

If we wanted the above line to stand by itself in an HTML document, we should specify that it is a paragraph by enclosing it in a paragraph (<p>) element. Like this

<p>You are a Super cool Developer</p>

Now it's time for you to say "Hello" to the Developers world.

Expected output

< Code editor comes here >

But these individual tags/elements aren't very useful on their own. They need to be combined to form an entire HTML page.

Structure of HTML​

This is the basic structure of an HTML page.

Here is what each of these elements means.

<!DOCTYPE html> : It is an instruction to the web browser about what version of HTML the page is written in.

<html></html> : This element wraps all the content on the entire page and is sometimes known as the root element.

<head></head> : This element acts as a container for all the stuff you want to include on the HTML page but doesn't intend to show the page to the viewers.

<body></body> : This element contains all the content you want to show web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever.

Summary​

In this lesson, we have learned that:

  • The basics of HTML
  • Anatomy of an HTML Element
  • Anatomy of an HTML Document

Useful resources for you​

Now that you’re done with this lesson, here are some useful post-class reading links.

<links should be added>

Front-end