FullStackCamp

Coding

Marketing

Prompts

Tools

What is HTML

Introduction to HTML

HTML (HyperText Markup Language) is the standard language for creating web pages. It defines the structure and content of a website, telling browsers how to display text, images, links, and other elements. HTML is not a programming language but a markup language, using tags to describe content.

  • Purpose: HTML provides the backbone of web pages, enabling content organization and accessibility.
  • Role in Web Development: Works alongside CSS (styling) and JavaScript (interactivity).

Example: A simple HTML page structure:

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

HTML Syntax

HTML uses tags to mark up content. Tags are enclosed in angle brackets (< >), and most come in pairs: an opening tag (e.g., <p>) and a closing tag (e.g., </p>).

  • Elements: A tag pair and its content form an element (e.g., <p>Hello</p>).
  • Attributes: Tags can include attributes for additional information (e.g., <a href=”https://example.com”>Link</a>).

Syntax Rules:

  • Tags are case-insensitive, but lowercase is standard.
  • Closing tags have a forward slash (/).
  • Some tags are self-closing (e.g., <img src=”image.jpg” />).

Example: Using tags and attributes:

<a href="https://www.example.com" target="_blank">Visit Example</a>
<img src="logo.png" alt="Company Logo" />

HTML Document Structure

Every HTML document follows a standard structure:

  • <!DOCTYPE html>: Declares the document as HTML5.
  • <html>: The root element, containing all other elements.
  • <head>: Contains metadata, like the page title (<title>), and links to stylesheets.
  • <body>: Contains visible content, like headings, paragraphs, and images.

Example: A complete HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample Page</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
    </header>
    <main>
        <p>Welcome to my site! Learn about <strong>HTML</strong> today.</p>
    </main>
</body>
</html>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *