HTML Basics

Lists & Tables

Links & Media

Forms & Layout

HTML Introduction

❮ Home Next ❯

Introduction to HTML: The Building Blocks of the Web

Here is a quick preview of what standard HTML looks like:

Try nesting elements yourself:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is my first paragraph of text!</p>
</body>
</html>

HTML (HyperText Markup Language) is the standard language used to create and structure web pages. Think of it as the "skeleton" of every website you visit.

Key Facts to Remember:

1. The Anatomy of a Basic Webpage

Every HTML document follows a specific structural recipe. Here is what the code looks like:

Breakdown of the Structure:

  1. <!DOCTYPE html>: Tells the browser, "Hey, I'm using the latest version of HTML (HTML5)!"
  2. <html>: The container for everything on the page.
  3. <head>: The "brain" of the page. It holds hidden data like the title that appears on the browser tab.
  4. <body>: The "body" of the page. Everything you actually see (text, images, buttons) goes here.

2. Tags vs. Elements

While people often use these terms interchangeably, they are slightly different:

Term Definition Example
Tag The individual keywords inside brackets. <p> (Opening) or </p> (Closing)
Element The full package: Opening tag + Content + Closing tag. <p>Hello World!</p>

Try nesting elements yourself:

<div>
  <p>I am a paragraph <strong>nested</strong> inside a div!</p>
</div>

3. The "Power Trio": HTML, CSS, and JavaScript

Modern websites are built using three main layers. To understand how they interact, imagine building a car:

4. Enhancing Elements with Attributes

Attributes provide extra information about an element. They always live inside the opening tag and usually look like name="value".

Example: <a href="https://www.google.com">Visit Google</a>

  • <a> is the tag for a link.
  • href is the attribute (it tells the link where to go).
  • "https://www.google.com" is the value.

5. How to Create Your First Page (Step-by-Step)

  1. Write: Type your HTML code into a simple text editor (like Notepad or VS Code).
  2. Save: Save the file with the extension .html (e.g., index.html).
  3. Open: Double-click the file. Your computer will automatically open it in your web browser (Chrome, Firefox, or Safari).
  4. Render: The browser reads your tags and turns them into a visual webpage!

Exercise

?

What does HTML stand for?

❮ Home Next ❯