4.2 HTML Basics

Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It provides the structure and content of a webpage, while CSS handles the presentation and JavaScript adds interactivity.

Key Points About HTML

  • HTML stands for HyperText Markup Language
  • It uses tags to define elements on a webpage
  • HTML documents are saved with .html extension
  • It's not a programming language - it's a markup language

Basic HTML Document Structure

Every HTML document follows a standard structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first webpage.</p>
</body>
</html>

HTML Elements Explained:

Element Description
<!DOCTYPE html> Defines the document type and HTML version
<html> Root element of the HTML document
<head> Contains meta information about the document
<meta> Defines metadata like character set and viewport settings
<title> Sets the title shown in the browser tab
<body> Contains the visible page content

Common HTML Elements

1. Text Elements

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<p>This is a paragraph.</p>
<strong>This text is bold</strong>
<em>This text is italicized</em>
<br> 
<hr>

2. Links and Images

<!-- Link to another page -->
<a href="https://example.com">Visit Example</a>

<!-- Image -->
<img src="image.jpg" alt="Description of image">

3. Lists

<!-- Unordered list -->
<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>

<!-- Ordered list -->
<ol>
    <li>First step</li>
    <li>Second step</li>
</ol>

4. Forms

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>
    
    <label for="message">Message:</label><br>
    <textarea id="message" name="message"></textarea><br>
    
    <button type="submit">Submit</button>
</form>

Semantic HTML

Semantic HTML introduces meaning to the web page rather than just presentation. It helps with accessibility and SEO.

Element Purpose
<header> Represents introductory content
<nav> Contains navigation links
<main> Contains the main content of the document
<section> Defines a section in a document
<article> Represents a self-contained composition
<aside> Contains content that is indirectly related to the main content
<footer> Represents a footer for its nearest section

HTML Validation

It's important to write valid HTML to ensure your web pages work correctly across different browsers.

Common Validation Rules:

  • Always include DOCTYPE declaration
  • Close all HTML tags properly
  • Use lowercase for element names
  • Quote attribute values
  • Provide alt text for images

Validation Tools

Use the W3C Markup Validation Service to check your HTML:

W3C Markup Validation Service

Practice Activity

Create a simple HTML page that includes:

  1. A heading with your name
  2. A short paragraph about yourself
  3. An ordered list of your top 3 favorite things
  4. A link to your favorite website
  5. An image (can be from the web or local)
  6. A simple contact form with name, email, and message fields

Use semantic HTML elements where appropriate and validate your code using the W3C validator.