Day 1: Introduction & Basic Structure

Goal

The goal of today is to understand what HTML is and how to build the basic skeleton of a web page.

What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create webpages. HTML uses tags to describe the structure and content of a page.

Browsers read HTML to display content.
HTML is not a programming language, it is a markup language.
It tells the browser what each part of the page represents (heading, paragraph, image, link, etc.).

Basic HTML Structure

Every HTML page has a basic structure. Here’s an example with comments to explain each part:

<!DOCTYPE html>        <!-- Declare HTML5 document type -->
<html>                  <!-- Root element of the page -->
  <head>                <!-- Contains metadata and page info -->
    <meta charset="UTF-8">  <!-- Sets character encoding -->
    <title>My First Page</title>  <!-- Title in browser tab -->
  </head>
  <body>                <!-- Visible content starts here -->
    <h1>Hello World</h1>   <!-- Heading level 1 -->
    <p>This is my first HTML page.</p>  <!-- Paragraph text -->
  </body>
</html>

Elements Explained

<!DOCTYPE html>: Tells the browser this is an HTML5 document.
<html>: Root element of the HTML page.
<head>: Contains metadata like title, character encoding, and links to stylesheets.
<meta charset="UTF-8">: Ensures proper display of text characters.
<title>: Appears in the browser tab.
<body>: All visible content goes here.
<h1>: Main heading.
<p>: Paragraph of text.

Practice

Try creating your own HTML page with the following:

Put your name in a <h1> element.
Add a short bio about yourself in a <p> element.
Save the file as index.html and open it in your browser.

Example Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>John Doe</h1>
    <p>I am learning HTML to build websites. I enjoy coding and designing web pages.</p>
  </body>
</html>

Extra Tips

Use meaningful titles – they show in browser tabs and search engines.
Save files with .html extension.
Always open your file in a browser to see the results.
Indent your code properly to keep it readable.