Introduction to HTML and Web Structure

SA
StudyAI Editorial
Reviewed by StudyAI tutors
· Published Updated

From the https://platform.ididdit.be/content-feed/094b184e-b48d-4303-9e2f-53854a3a35ca/es:6E4A517B-9F14-42C2-9495-A1FD33F09A0A curriculum

Introduction to HTML and Web Structure

TL;DR

HTML is like the skeleton of a webpage, organizing content with specific tags. These tags create elements, outlining the different parts of what you see online. Understanding HTML is the first step to building anything on the web.

1. The Mental Model

Think of HTML as a recipe for a cake. It tells you what ingredients (content) go where and how they're structured, but it doesn't tell you how to decorate it. That's for other tools.

2. The Core Material

HTML, or HyperText Markup Language, is the standard language for creating web pages. It uses "markup" to define the structure and content of a page.

What are HTML Elements and Tags?

An HTML document is made up of elements. Each element describes a piece of content, like a paragraph, a heading, or an image. Elements are created using tags.

A tag typically comes in pairs: an opening tag and a closing tag.
For example:
<p> is the opening tag for a paragraph.
</p> is the closing tag for a paragraph.

The content goes between the tags:
<p>This is a paragraph of text.</p>

Some tags are self-closing (or "void tags") because they don't enclose content. They represent something inserted directly into the page. An image tag is a good example:
<img src="image.jpg" alt="A descriptive image text">

Anatomy of an HTML Document

Every basic HTML document follows a similar 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>Welcome!</h1>
    <p>This is some content on my page.</p>
</body>
</html>

Let's break it down:

  • <!DOCTYPE html>: This isn't an HTML tag; it's a declaration that tells the browser which HTML version to expect (in this case, HTML5). You always put this at the very top.
  • <html lang="en">: This is the root element of an HTML page. All other elements go inside it. The lang="en" attribute specifies the language of the document, which helps search engines and accessibility tools.
  • <head>: This section contains meta-information about the HTML document. Things in the head aren't directly visible on the page itself but are crucial for its behavior and presentation.
    • <meta charset="UTF-8">: Specifies the character encoding, allowing browsers to correctly display characters from different languages.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design, making your page look good on different devices.
    • <title>My First Webpage</title>: Sets the title that appears in the browser tab or window.
  • <body>: This is where all the visible content of your webpage goes. Everything you see—text, images, links, etc.—is placed inside the <body> tags.

Common HTML Tags You'll Use

  • Headings: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (for different levels of headings, <h1> is the most important).
    html <h1>Main Title</h1> <h2>Subsection</h2>
  • Paragraphs: <p> (for blocks of text).
    html <p>This is a paragraph.</p>
  • Links: <a> (for creating hyperlinks, href attribute specifies the destination).
    html <a href="https://example.com">Visit Example</a>
  • Images: <img> (self-closing, src attribute for the image source, alt for alternative text).
    html <img src="logo.png" alt="Company Logo">
  • Lists:
    • Unordered List: <ul> with <li> for list items (bullet points).
      html <ul> <li>Item One</li> <li>Item Two</li> </ul>
    • Ordered List: <ol> with <li> for list items (numbered list).
      html <ol> <li>First Step</li> <li>Second Step</li> </ol>
  • Divisions: <div> (a generic container, used for grouping content).
    html <div> <h2>A Section</h2> <p>Some text.</p> </div>

3. Worked Example

Let's build a very simple "About Me" page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me - John Doe</title>
</head>
<body>
    <h1>John Doe</h1>
    <p>Hello! I'm John, a budding web developer.</p>

    <h2>My Interests</h2>
    <ul>
        <li>Coding</li>
        <li>Reading</li>
        <li>Hiking</li>
    </ul>

    <h2>Contact Me</h2>
    <p>You can find me on <a href="https://twitter.com/johndoe">Twitter</a>!</p>
    <img src="profile.jpg" alt="A profile picture of John Doe" width="100">
</body>
</html>

In this example:
* The browser tab will show "About Me - John Doe".
* You'll see a large heading "John Doe", followed by a paragraph introducing him.
* A smaller heading "My Interests" is followed by a bulleted list of hobbies.
* "Contact Me" is another smaller heading, with a paragraph containing a link to his Twitter profile.
* Finally, an image named profile.jpg (which would need to be in the same folder or linked to a full URL) is displayed, with "A profile picture of John Doe" for screen readers or if the image fails to load. The width="100" attribute ensures the image is displayed at 100 pixels wide.

4. Key Takeaways

  • HTML uses tags to define the structure and content of a webpage.
  • Most HTML tags come in pairs: an opening tag and a closing tag.
  • The <!DOCTYPE html>, <html>, <head>, and <body> tags form the basic structure of every HTML document.
  • The <head> section holds meta-information, while the <body> section contains all visible content.
  • Attributes provide additional information or properties for an HTML element.

Common Mistakes to Avoid:
* Forgetting to close tags (e.g., <p>...</p> instead of just <p>...).
* Confusing <head> (document info) with <h1> (main heading).
* Putting visible content directly into the <head> section.
* Mistyping tag names (e.g., </pe> instead of </p>).

5. Now Try It

Open a text editor (like Notepad, Sublime Text, VS Code, or even TextEdit) and create a new file. Type out the "Worked Example" HTML code exactly as shown, replacing "profile.jpg" with a dummy image path like "https://via.placeholder.com/100" if you don't have an image. Save the file as my_page.html. Then, open that file in your web browser.

What success looks like: You should see a simple webpage in your browser with the headings, paragraphs, a bulleted list, a clickable link, and a small image, all structured correctly.

Frequently asked about Introduction to HTML and Web Structure

# Introduction to HTML and Web Structure ## TL;DR HTML is like the skeleton of a webpage, organizing content with specific tags. These tags create elements, outlining the different parts of what you see online. Understanding HTML is the first step to building anything on the Read the full notes above.

Introduction to HTML and Web Structure is a core topic in https://platform.ididdit.be/content-feed/094b184e-b48d-4303-9e2f-53854a3a35ca/es:6E4A517B-9F14-42C2-9495-A1FD33F09A0A. Most exam papers test it via a mix of definitions, worked examples, and applied problems. The notes above cover the high-yield sub-topics, common pitfalls, and the kind of questions examiners typically set.

Yes. Every note in the StudyAI Campus Hub is free to read. Create a free account if you want to clone the full plan, generate your own notes from your textbook, or get AI-powered practice quizzes and flashcards.

Get the full https://platform.ididdit.be/content-feed/094b184e-b48d-4303-9e2f-53854a3a35ca/es:6E4A517B-9F14-42C2-9495-A1FD33F09A0A curriculum

Clone the complete plan to your dashboard for unlimited AI-generated notes, practice quizzes, and a personalised revision schedule.

Create Free Account