Introduction to HTML

The Skeleton of the Web

Every webpage you see, from a simple blog post to a complex news site, has a skeleton holding it all together. That skeleton is HTML, which stands for HyperText Markup Language. It's not a programming language; it doesn't perform logic. Instead, it's a markup language used to structure content and tell web browsers what each part of a page is.

Think of HTML as the foundation and frame of a house. It defines the rooms (header, footer, body) and where the windows and doors go (images, links), but it doesn't paint the walls or install the plumbing. That's for other languages like CSS and JavaScript.

Every HTML document follows a basic structure. It starts with a declaration to tell the browser it's an HTML document, then an <html> element wraps everything else. Inside, you'll find a <head> and a <body>.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <!-- Content goes here! -->
  </body>
</html>

The <head> section contains metadata, information about the page that isn't displayed directly. This includes the page title that appears in your browser tab, links to other files, and more. The <body> section is where the visible content lives: all the text, images, and links you interact with.

Building with Blocks

HTML uses elements, often called tags, to structure content. Most elements have an opening tag and a closing tag that wraps the content. For example, to create a paragraph, you'd wrap your text in <p> and </p> tags.

Element

noun

An individual component of an HTML document. It consists of a start tag, its content, and an end tag.

Some of the most common elements are for organizing text. Headings, from <h1> (the most important) to <h6> (the least), create a hierarchy for your content. Paragraphs (<p>) group sentences together.

Lists are also fundamental. You can create an unordered list (bullets) with <ul>, or an ordered list (numbers) with <ol>. Each item in the list is then wrapped in an <li> tag.

<h1>This is the main title</h1>
<p>This is a paragraph of text. It introduces the topic.</p>

<h2>A Subheading</h2>
<p>Here's another paragraph under a new section.</p>

<ul>
  <li>First bullet point</li>
  <li>Second bullet point</li>
</ul>

<ol>
  <li>First numbered item</li>
  <li>Second numbered item</li>
</ol>

To link to other pages, we use the anchor tag, <a>. The href attribute specifies the destination URL. For images, we use the <img> tag. It's a self-closing tag and requires two key attributes: src for the image source file and alt for alternative text. The alt text is crucial for accessibility, as it describes the image for screen readers or if the image fails to load.

<!-- A link to another website -->
<a href="https://www.wikipedia.org">Visit Wikipedia</a>

<!-- An image with descriptive alt text -->
<img src="images/cat.jpg" alt="A fluffy orange cat sleeping on a chair">

Tags with Meaning

Early on, web developers often used generic <div> tags to group content. While this works, it doesn't tell the browser or search engines anything about what the content is. Semantic HTML solves this by providing elements that describe their meaning.

Using tags like <header>, <footer>, <nav>, <main>, and <article> makes your code easier to read and better for search engine optimization (SEO) and accessibility. A screen reader can, for example, easily identify the <nav> element as the main navigation menu and help a user navigate the site.

Forms are another key part of the web, allowing users to input data. The <form> element acts as a container for various input controls.

Common inputs include <input type="text"> for single lines of text, <input type="password"> to obscure text, and <textarea> for multi-line text boxes. A <button> or <input type="submit"> is used to send the form data.

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br><br>
  
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br><br>
  
  <button type="submit">Log In</button>
</form>

This is just the beginning. HTML provides the essential structure for everything you see on the web. Mastering these fundamental building blocks is the first and most important step in web development.

Ready to check your understanding? Let's see what you've learned about the skeleton of the web.

Quiz Questions 1/6

What does HTML stand for?

Quiz Questions 2/6

In an HTML document, where does the visible content like paragraphs, headings, and images belong?

By understanding how to structure a document with these elements, you can build clear, accessible, and meaningful webpages.

Foundations of Technical Web Development