CodeX Cider Logo
CodeX Cider
HTML Topics
HTML Module📖Lesson 1 of 18

HTML Introduction

Today we begin with HTML, the language that tells a computer what a webpage is made of, so a browser can read it and draw it on the screen.

⏱️~5 min read🟢Beginner⚡Jump to Code Editor

What you'll learn in this lesson

  1. 1What HTML is, and why it is called a markup language
  2. 2Why tags were invented for the computer
  3. 3What a browser is, and how it reads HTML
  4. 4The shape of the first page: DOCTYPE, html, head, body
  5. 5How this later becomes a complete, beautiful website
  1. 1

    Let us start with HTML

    Today we are going to learn HTML. HTML is a language, but not the kind you speak with your mouth. It is a language you write so that a website can run on a computer and appear on the screen.

    Its full name is HyperText Markup Language, and the word that actually matters is Markup. Markup simply means putting marks around your text so the computer can tell what is a heading, what is a paragraph, and what is a link. Without those marks, the computer sees only a stream of characters. With them, it finally knows how the page is supposed to be built.

  2. 2

    Someone had a problem to solve

    Imagine, years ago, a person looking at a computer and thinking: I want to show something here — a title, a story, maybe a picture — but how? A computer does not read a page the way you read a newspaper. When you open a newspaper, you instantly know that the large letters are the headline and the smaller lines are the story. A computer has no such instinct. It sees characters, and nothing more, unless somebody teaches it the difference.

    So that person invented a set of signs, small labels wrapped around the words. If you wrap a line in a heading sign, it becomes a heading. If you wrap it in a paragraph sign, it becomes a paragraph. Those signs are what we call tags today: <h1>, <p>, <a>, and many others. HTML is simply the agreed system of those signs.

  3. 3

    Then they built an engine called the browser

    Signs on their own are useless if nothing knows how to read them. So they also built an engine whose only job is to read those signs, understand the syntax, and draw a design on the screen. That engine is what we now call a browser — Chrome, Firefox, Edge, Safari. The idea is the same in each of them; only the company changes.

    You write HTML. The browser reads the syntax. You get a page on the screen. Without HTML, the browser has nothing meaningful to read. Without a browser, HTML is just a text file sitting on the disk. The two were made for each other, and that partnership is still how every website in the world appears in front of you.

  4. 4

    What we are going to learn today

    Today we will learn how to write a little code, how that code shows up in the browser, and how this later turns into a beautiful website. HTML by itself is not the beauty. HTML is the structure, the skeleton of the page. CSS is the paint, the spacing, and the look. JavaScript is the behaviour — the buttons that actually do something when you click them.

    Every website still starts here. First you write the signs, then you paint over them. For this lesson we stay with the signs, and with the shape of the first file you will ever write.

  5. 5

    Every page has a simple shape

    A real HTML file is not a random pile of tags. It has a shape, and almost every page on the internet follows it. The first line, <!DOCTYPE html>, tells the browser that this is modern HTML5, not some forgotten format from the 1990s. Then comes <html>, which is the whole document; everything you write lives inside it.

    Inside that, <head> is backstage. The <title> you put there is the name on the browser tab, and search engines often read it too, but visitors do not see this area as the page itself. <body> is the stage. Headings, paragraphs, images, forms — anything that should appear on the screen belongs here.

    The example below is that first file. Read it once, then look at the browser pane beside the code. You are looking at the same code, drawn as a page.

Interactive Live Editor
index.html
Click & type to editHTML5
Browser

Line by line

  1. <!DOCTYPE html>

    This first line tells the browser to read the file with today's HTML5 rules, instead of falling back to old, unpredictable behaviour.

  2. <html> ... </html>

    This is the outer box of the whole document. The opening tag starts the page, the closing tag ends it, and everything you write sits in between.

  3. <head>

    This is backstage: the tab title, and later the CSS files. Visitors do not see this section as the main page.

  4. <title>My First Website</title>

    This is the name that appears on the browser tab. Search engines often read this line as well, so it is worth writing carefully.

  5. <body>

    This is the stage. Whatever you want the user to see — headings, text, images, forms — is written here, and the browser draws this part as the page.

  6. <h1> and <p>

    <h1> is the heading sign, so the browser treats that line as the main title. <p> is the paragraph sign, so the browser treats that line as ordinary reading text.

  7. <!-- HTML Comments -->

    Notes for yourself and other developers. Anything wrapped in <!-- ... --> is completely ignored by the browser and never visible on the rendered page.

Try it yourself

Click inside the interactive code editor above. Replace Hello, World! with your own name, and add your city in a new paragraph. Watch the browser pane on the right draw your changes live!

Hint: Whatever should appear on the tab belongs in the title inside head. Whatever should appear on the page belongs in the body.

💡 View Solution (if stuck)
<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hi, I'm Rahul!</h1>
    <p>I live in New Delhi and I am building my very first webpage.</p>
  </body>
</html>
Quick Knowledge Check

Where should user-visible content (like headings, images, and paragraphs) be placed?

Common mistakes

  • 1.Forgetting the closing tag. If you write <h1>Hello and never write </h1>, the browser may treat everything after it as part of the same heading.
  • 2.Putting visible text inside head. Head is backstage, so the page will look empty. Anything the user should see belongs in body.
  • 3.Misspelling <!DOCTYPE html> or leaving out closing brackets.

Interview prep (Click to reveal)

Q: What is HTML, in one line?▼

HTML is a markup language that describes the structure of a webpage — what is a heading, what is a paragraph, what is a link — so the browser can read that syntax and draw the page.

Q: What is the difference between a tag and an element?▼

A tag is the sign itself, such as <p>. An element is the full piece: the opening tag, the content inside, and the closing tag, such as <p>Hello</p>.

Q: What does a browser do with HTML?▼

It reads the HTML syntax, constructs the Document Object Model (DOM), applies rules, and paints a layout on the screen. CSS later polishes the look. JavaScript later adds behaviour.

Next lessonHTML Elements