Introduction to Web Design Terminology and HTML Structure

TL;DR

Web design uses specific terms to describe how websites are built and seen. HTML provides the basic structure for all web pages using elements like headings and paragraphs. Understanding these terms and HTML's building blocks is essential for creating any website.

1. The Mental Model

Think of a website like a house. Web design terminology helps you talk about the different parts (rooms, windows, roof), while HTML is like the blueprint that lays out where each part goes and what it's made of.

2. The Core Material

When you hear "web design," it's all about creating websites. This involves how they look (front-end) and how they work behind the scenes (back-end). For this course, we're focusing mostly on the front-end, specifically the basic structure.

Key Web Design Terminology

Photo by Miguel Á. Padriñán on Pexels

• Website: A collection of related web pages, images, videos, and other digital assets, all accessed via a unique domain name.
• Web Page: A single document, typically written in HTML, that can be displayed by a web browser.
• Web Browser: Software used to access the internet and view web pages (e.g., Chrome, Firefox, Safari, Edge).
• HTML (HyperText Markup Language): The standard language for creating web pages. It defines the structure and content.
• CSS (Cascading Style Sheets): Used to control the presentation and styling of web pages (colors, fonts, layout). We'll cover this later, but know it works with HTML.
• JavaScript: A programming language that adds interactivity and dynamic effects to web pages. Also a later topic.
• Server: A computer program or device that provides functionality for other programs or devices, called "clients." When you visit a website, your browser is a client requesting information from a server.
• Client: Your web browser, which requests and displays web pages from a server.

HTML Structure: The Building Blocks

Photo by Miguel Á. Padriñán on Pexels

HTML documents are made up of elements. An element usually consists of an opening tag, some content, and a closing tag. For example, <p>This is a paragraph.</p> is a paragraph element. Some elements are self-closing or void elements, meaning they don't have content or a closing tag (e.g., <img src="image.jpg"> for an image).

Here's the basic structure of every HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

Let's break it down:

• <!DOCTYPE html>: This isn't an HTML tag, but a declaration that tells the browser what version of HTML to expect (HTML5 in this case). It always goes at the very top.
• <html lang="en">: This is the root element of every HTML page. lang="en" is an attribute that tells browsers the primary language of the document is English, which is good for accessibility and search engines.
• <head>: This section contains metadata about the HTML document. This information isn't displayed on the web page itself but is crucial for the browser and search engines.
  • <meta charset="UTF-8">: Sets the character encoding for the document, handling various characters correctly.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Controls how the page is displayed on different devices (especially mobile).
  • <title>My First Web Page</title>: This is the title that appears in the browser tab or window, not on the page itself.
• <body>: This is where all the visible content of your web page goes. Everything you see on a website (text, images, links) is inside the <body> tags.

Common HTML Elements

Photo by Myburgh Roux on Pexels

Inside the <body> you'll use elements to structure your content:

• Headings: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. <h1> is the most important heading, <h6> the least. You should only have one <h1> per page.
• Paragraphs: <p>This is a paragraph.</p> used for blocks of text.
• Links (Anchors): <a href="https://example.com">Visit Example</a>. The href attribute specifies the destination URL.
• Images: <img src="my-image.jpg" alt="Description of image">. src (source) points to the image file, alt (alternative text) is important for accessibility if the image can't load.
• Lists:
  • Unordered List: <ul> with <li> (list item) for bullet points.
  • Ordered List: <ol> with <li> for numbered lists.

Here's a diagram showing the basic hierarchy of an HTML document:

graph TD
    A["<!DOCTYPE html>"] --> B["<html>"]
    B --> C["<head>"]
    B --> D["<body>"]
    C --> E["<meta>"]
    C --> F["<title>"]
    D --> G["<h1>"]
    D --> H["<p>"]
    D --> I["<a>"]
    D --> J["<img>"]
    D --> K["<ul>/<ol>"]
    K --> L["<li>"]

3. Worked Example

Let's put some of these elements together to create a simple web page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Amazing Page</title>
</head>
<body>
    <h1>Welcome to My Website!</h1>
    <p>This is my very first web page. I'm learning HTML!</p>

    <h2>About Me</h2>
    <p>I enjoy learning new things, especially about web design.</p>

    <h3>My Favorite Hobbies</h3>
    <ul>
        <li>Reading</li>
        <li>Hiking</li>
        <li>Coding</li>
    </ul>

    <p>Check out <a href="https://www.w3schools.com/" target="_blank">W3Schools</a> for more HTML tutorials.</p>
    <img src="https://via.placeholder.com/150" alt="Placeholder image for demonstration">
</body>
</html>

Save this code in a file named index.html and open it with your web browser. You'll see a simple page with a title in the browser tab, a main heading, paragraphs, a list, a link, and an image.

4. Key Takeaways

• Every web page starts with <!DOCTYPE html>, then <html>, <head>, and <body>.
• The <head> section holds unseen information like the page title and character set.
• The <body> section contains all the visible content of your web page.
• HTML uses tags like <h1>, <p>, <a>, and <img> to structure content.
• Attributes provide extra information about elements, like href for links or src for images.
• Understanding the basic HTML structure is the foundation for all web development.

Common Mistakes to Avoid:
- Forgetting the closing tag for elements (e.g., <p> without </p>).
- Placing visible content outside the <body> tags.
- Not including a <!DOCTYPE html> declaration at the very top.
- Using <h1> for every heading; use <h2>, <h3>, etc., for sub-sections.

5. Now Try It

Create a new HTML file called my-bio.html. Inside it, put the basic HTML structure (<!DOCTYPE html>, <html>, <head>, <body>). In the <head>, set the title to "My Biography". In the <body>, add an <h1> with your name, a <p> describing yourself in a few sentences, and an unordered list (<ul>) of three things you want to learn next, using <li> for each item.

Success looks like:
- You have a file my-bio.html saved.
- When you open my-bio.html in a web browser, the tab shows "My Biography".
- Your name appears as the largest heading.
- A paragraph of text describes you.
- A bulleted list shows three things you want to learn.