Welcome to Web Page Design: Understanding HTML!

Hello future web designers! This chapter is your starting point for understanding how the entire internet is structured. Don't worry if you find coding intimidating—HTML is the easiest place to start.
We are going to learn the fundamental language that gives every single website its bones, its structure, and its content. Once you master these basic concepts, you'll be able to build simple web pages yourself!

1. What is HTML? The Foundation

HTML stands for Hypertext Markup Language. It is the core language used to create and structure content on the World Wide Web.

What do those words mean?

  • Hypertext: This refers to text that contains links to other text or resources. If you click on a word that takes you to a new page, that's hypertext in action!
  • Markup: This is key. HTML uses special codes, called tags, to "mark up" or define how content should be displayed. It tells the web browser (like Chrome or Safari) what role each piece of text plays—is it a heading, a paragraph, or a link?
  • Language: It's the set of rules browsers use to understand and display content.

Analogy: Imagine building a house. HTML is the blueprint or the skeleton. It defines where the walls, doors, and rooms are located. It doesn't worry about the paint color (that's CSS, which we don't cover yet!), only the structure.

Quick Takeaway

HTML provides the structure and content for a web page.

2. The Building Blocks: Tags, Elements, and Attributes

When you write HTML, you are using three core concepts repeatedly: Tags, Elements, and Attributes. Understanding the difference is crucial!

Tags (The Markers)

A tag is the instruction written inside angle brackets (< >). Tags usually come in pairs: an opening tag and a closing tag.

Opening Tag Example: <p>
Closing Tag Example: </p> (Note the forward slash /)

Elements (The Content)

An element is the opening tag, the content, and the closing tag all together. It represents a complete structure on the page.

Example: <p>This is a paragraph of text.</p>
The whole line above is one paragraph element.

Attributes (The Customisation)

Attributes provide additional information about an element. They are always placed inside the opening tag and are usually written as a name/value pair (name="value").

Memory Aid: Attributes start with 'A' like 'Additional' information or 'Appearance' modifiers.

Example: If you want a link, the tag is <a>. But where should the link go? That's what the attribute tells us:
<a href="index.html">Home Page</a>

Here, href is the attribute name, and "index.html" is the attribute value (the destination).

Self-Closing Tags

Some tags do not need a closing tag because they don't wrap around content; they just insert something onto the page. These are called self-closing or empty tags.

Examples: <img /> (for images) and <br /> (for line breaks).

Quick Review: Terminology

Tag: <p>
Content: Hello!
Element: <p>Hello!</p>
Attribute: src="image.jpg"

3. The Basic Structure of an HTML Page

Every functional HTML page needs a mandatory basic structure. Think of this as the absolute minimum required structure for the browser to understand the document.

Step-by-Step Structure Explanation

  1. <html> ... </html>: The root element. Everything else must be nested inside this tag. It tells the browser, "This is an HTML document."
  2. <head> ... </head>: The container for all the non-visible content. This information is primarily for the browser or search engines (like keywords, character sets, etc.). The users won't see this content on the page itself.
  3. <title> ... </title>: This is placed inside the <head>. The text here appears in the browser tab or window title bar. It’s very important for SEO (Search Engine Optimization).
  4. <body> ... </body>: The container for all the visible content of the web page. Every paragraph, image, link, and heading that the user sees must be placed inside the <body> tags.

Don't worry if this seems like a lot to remember at first! Every HTML page starts the same way.

Key Takeaway

The <head> holds information about the page (like the title), and the <body> holds the content that is displayed to the user.

4. Essential Tags for Structuring Content

These tags are the most common ones you will use to organize text on your page.

Headings <h1> to <h6>

HTML provides six levels of headings to structure your document.
<h1> is the most important heading (usually used once per page, like the main topic title).
<h6> is the least important (used for minor sections or captions).

Rule of thumb: Use headings logically, like an outline in a book. Don't use them just to make text bigger.

Example:
<h1>Chapter 1: Web Design Basics</h1>
<h3>4.1 Structure Tags</h3>

Paragraphs <p>

The <p> tag is used to define blocks of text. The browser automatically adds a small amount of space (margin) above and below a paragraph element.

Line Breaks <br />

The <br /> tag forces a line to break immediately, moving the content following it onto a new line. It is a self-closing tag.

Common Mistake to Avoid

Students often use lots of <br /> tags to simulate the space between paragraphs. This is bad practice! Always use <p> for separate ideas, and only use <br /> when you want to split a single line of text (like in a poem or an address).

5. Organizing Information: Lists

Lists are essential for presenting information clearly. HTML offers two main types of lists.

Unordered Lists <ul>

An Unordered List uses bullet points to mark each item. It is ideal for items where the order does not matter (like a shopping list).

Ordered Lists <ol>

An Ordered List uses numbers or letters to mark each item. It is ideal for steps where the sequence is important (like a recipe or instructions).

List Item <li>

Every single item in both ordered and unordered lists must be wrapped in the <li> (List Item) tag.

Example of an Ordered List:
<ol>
   <li>First Step</li>
   <li>Second Step</li>
</ol>

Key Takeaway

Remember: <ul> or <ol> creates the container, and <li> creates the individual items inside that container.

6. Making Connections: Links and Images

Links and images are what make the web engaging! These tags heavily rely on attributes to function correctly.

Hyperlinks (Anchors) <a>

The <a> tag, also known as the Anchor tag, is used to create a link from one page to another.

The crucial attribute: href

The href (Hypertext Reference) attribute tells the browser the destination of the link.

Example linking to another page on your site:
<a href="about_us.html">Read About Our Team</a>

Example linking to an external website:
<a href="https://www.oxfordaqa.com">OxfordAQA Website</a>

Images <img />

The <img /> tag is used to embed an image into a web page. This is a self-closing tag.

The crucial attributes: src and alt
  1. src (Source): This attribute specifies the path (location) to the image file (e.g., "photos/logo.png").
  2. alt (Alternate Text): This is required. It provides a text description of the image. This text is displayed if the image cannot be loaded, or it is read aloud by screen reader software for visually impaired users.

Did you know? Providing good alt text is essential for web accessibility and helps search engines understand the image content.

Example of an Image Tag:
<img src="header_pic.jpg" alt="A student studying at a computer" />

Chapter Summary & Final Encouragement

You have now learned the fundamentals of HTML structure! Remember: HTML gives the web page its structure (head, body), its content (headings, paragraphs, lists), and its navigation (links).
Keep practicing with the tags and attributes we covered—the more you write them, the more natural they will become. You are well on your way to becoming a skilled web designer!