Abdul Fadiga

Posted on Aug 6

From Zero to Web Page: A Deep Dive into HTML for Our New Interns

#webdev #frontend #html

Hey team!

You’ve wrestled with git and won. You have the power to manage code. Now it's time to write the code that builds the modern world: web code.

Before we write a single tag, we need to understand the ground we're building on. What is the web? How does typing a URL into a browser actually work? Let's zoom out before we zoom in.

Part 1: The Web & The Internet (They're Not the Same!) 🌍

Quickly, let's clear this up: The Internet ≠ The World Wide Web.

The Internet is the global infrastructure. It's the physical network of fiber optic cables, copper wires, satellites, and routers that connects billions of devices. Think of it as the global road system.
The World Wide Web (or "the web") is an information system that runs on top of the internet. It's the collection of websites, applications, and documents that you access. Think of it as all the buildings, signs, and destinations along the road system.

We build websites for the web, which are delivered via the internet.

Part 2: The Client-Server Dance 💃🕺

So how does a website get from a server in California to your laptop? It's a conversation called the Client-Server Model.

The Client (Your Browser): You type https://dev.to into your browser (Chrome, Firefox, etc.) and hit Enter. This is the Request. Your browser is the client, asking for information.
The Server (A Computer Somewhere Else): The request travels over the internet to a powerful computer called a server. This server's job is to "serve" files. It finds the files for dev.to.
The Response: The server packages up the necessary files (HTML, CSS, JavaScript) and sends them back to your browser. This is the Response.
Rendering: Your browser receives these files and acts like a builder, interpreting them to construct the visual page you see on your screen.

Our primary job as web developers is to create those files—starting with the most fundamental one: HTML.

Part 3: HTML - The Skeleton of the Web 🦴

If a website is a house, HTML (HyperText Markup Language) is the structural frame. It doesn't care about colors or fonts; it only cares about structure and meaning.

HyperText: The ability to link documents together. This is the "web" part.
Markup Language: A language that uses tags to "mark up" or describe the content. You tell the browser, "This block of text is a main heading," "This is a navigation menu," "This is a list of items."

The Anatomy of an HTML File

Every .html file follows a strict structure. Let's look at the non-negotiable boilerplate.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Metadata: Information FOR THE BROWSER -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Page</title>
  </head>
  <body>
    <!-- Visible Content: Information FOR THE USER -->
  </body>
</html>

<!DOCTYPE html>: The very first line. It tells the browser to use the modern HTML5 standard. It's a required instruction.
<html lang="en">: The root element. The lang="en" attribute tells the browser the page's content is in English, which is important for accessibility and search engines.
<head>: The "brains" of the page. This is metadata; it's not displayed to the user.
- <meta charset="UTF-8">: Specifies the character encoding. Using UTF-8 ensures all kinds of text and symbols (like emojis! 🎉) render correctly.
- <meta name="viewport" ...>: Crucial for mobile devices. This tells the browser to set the page width to the device's screen width and to set the initial zoom level to 100%. Without it, your site will look tiny on a phone.
- <title>: The text that appears in the browser tab. Extremely important for SEO and user experience.
<body>: This is it. Everything you want the user to see goes inside the body tag.

Part 4: The Essential HTML Tag Toolkit 🧰

To build well-structured pages, you need to know more than just a handful of tags. Let's group them by function.

1. Semantic & Structural Tags

These tags don't change the look of your content, but they give it meaning. They describe the purpose of each part of your page. This is HUGE for accessibility (screen readers) and SEO (search engines). Always prefer a semantic tag over a generic <div>!

<header>: The introductory content of a page or section. Usually contains the logo, site navigation, and main heading.
<nav>: Used to wrap the main navigation links.
<main>: The main, unique content of the page. There should only be one <main> element per page.
<footer>: The closing content of a page or section. Typically contains copyright info, contact details, and related links.
<section>: A thematic grouping of content. Think of it as a chapter in a book. It should almost always have a heading (<h2>, <h3>, etc.).
<article>: A self-contained piece of content that could be distributed on its own (e.g., a blog post, a news story, a forum comment).
<div>: A generic container with no semantic meaning. Use it for styling or grouping elements when no other semantic tag is appropriate.

Example Structure:

<body>
  <header>
    <h1>My Website</h1>
    <nav>...</nav>
  </header>

  <main>
    <section>
      <h2>About Me</h2>
      <p>...</p>
    </section>
    <section>
      <h2>My Portfolio</h2>
      <article>...</article>
      <article>...</article>
    </section>
  </main>

  <footer>
    <p>&copy; 2023 My Name</p>
  </footer>
</body>

2. Text and Content Tags

<h1> to <h6>: Heading levels. <h1> is the most important (one per page!), <h6> is the least.
<p>: A paragraph of text.
<a>: An anchor, or link. The href attribute contains the URL.
```
<a href="https://github.com">Visit GitHub</a>
```
<img>: An image. It's a self-closing tag.
- src: The path to the image file.
- alt: REQUIRED. Alternative text for screen readers or if the image fails to load. Be descriptive!
```
<img src="images/profile.jpg" alt="A headshot of me smiling at an outdoor cafe.">
```
<strong>: Marks text as having strong importance (renders as bold).
<em>: Marks text with emphasis (renders as italic).
<blockquote>: For quoting a block of text from another source.
<ul>, <ol>, <li>: For creating lists. <ul> for bulleted (unordered) lists, <ol> for numbered (ordered) lists, and <li> for each list item.

3. Table Tags

For displaying tabular data (like spreadsheets), not for page layout.

<table>: The wrapper for the entire table.
<thead>: The container for the table header row(s).
<tbody>: The container for the table body/data row(s).
<tr>: A table row.
<th>: A table header cell (used inside <thead>). It's bold and centered by default.
<td>: A table data cell (used inside <tbody>).

<table>
  <thead>
    <tr>
      <th>Skill</th>
      <th>Proficiency</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Intermediate</td>
    </tr>
    <tr>
      <td>Git & GitHub</td>
      <td>Beginner</td>
    </tr>
  </tbody>
</table>

4. Form Tags

Forms are how you collect user input.

<form>: The container for the entire form. The action attribute tells the browser where to send the data.
<label>: Describes an input field. The for attribute should match the id of the <input> it belongs to. This is critical for accessibility.
<input>: The most versatile form element. The type attribute changes its function.
- type="text": A single-line text box.
- type="email": A text box that requires a valid email format.
- type="password": A text box that masks the input.
- type="submit": A button that submits the form.
<textarea>: For multi-line text input (e.g., a comments box).

<form action="/submit-contact-info">
  <label for="name">Name:</label>
  <input type="text" id="name" name="user_name">

  <label for="message">Message:</label>
  <textarea id="message" name="user_message"></textarea>

  <input type="submit" value="Send">
</form>

Your First Assignment: Build Your "About Me" Page 🚀

Theory is great, but building is better. Your task is to apply everything you've just learned to create a single HTML page all about you.

Objective: Create a well-structured, semantic HTML page named about.html. Don't worry about how it looks! We are 100% focused on correct structure and meaning.

✅ Requirements Checklist:

File & Boilerplate:
- [ ] Create a file named about.html.
- [ ] It must have the correct HTML boilerplate (<!DOCTYPE>, <html>, <head>, <body>).
- [ ] The <head> must contain a <meta charset="UTF-8">, a <meta name="viewport"...>, and a <title> (e.g., "About [Your Name]").
Semantic Structure:
- [ ] Use a <header>, <main>, and <footer> to structure your page.
- [ ] Your <header> should contain the main <h1> for the page.
- [ ] Your <footer> should contain your name and the copyright symbol (use ©).
Content:
- [ ] Your <main> content should be divided into at least two <section>s (e.g., a "Bio" section and a "Skills" or "Hobbies" section).
- [ ] Each <section> must start with an <h2>.
- [ ] Include at least one paragraph (<p>) of text about yourself.
- [ ] Include a picture of yourself (or something you like). It must have descriptive alt text.
- [ ] Include an ordered list (<ol>) of your goals for this internship.
- [ ] Include an unordered list (<ul>) of your hobbies or favorite things.
- [ ] Include a link (<a>) to your LinkedIn or GitHub profile. Open it in a new tab (Hint: look up the target="_blank" attribute).

⭐ Bonus Challenge:

[ ] Add a section with a <table> listing some of your skills and your self-rated proficiency (Beginner, Intermediate, etc.).
[ ] Add a simple "Contact Me" <form> with fields for a name and an email address.

Commit your about.html file to a new branch in our intern repository and push it. We'll review it together.

This is your first step to becoming a web developer. Focus on clean, semantic structure, and you'll be building on a rock-solid foundation.

Let's get coding!

DEV Community