HTML Basics

The Structure of a Web Page

Think of an HTML document as the skeleton of a website. It provides the basic structure and holds all the content. Every HTML page you see follows a consistent, predictable structure. It tells the web browser what kind of document it is, where the visible content is, and where to find other important information.

HTML stands for HyperText Markup Language. It's not a programming language; it's a 'markup' language used to structure content.

This fundamental structure is built with a few key elements, or tags. An element usually consists of an opening tag, content, and a closing tag. For example, <p>This is a paragraph.</p> is a paragraph element.

Here is the basic skeleton for any HTML page:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>
</html>

Let's break that down:

<!DOCTYPE html>: This declaration defines the document type. It tells the browser that this page is written in HTML5.
<html>: This is the root element of the page. Everything else is nested inside it.
<head>: This element contains meta-information about the page, like the title that appears in the browser tab. This information isn't displayed on the main page itself.
<title>: Sets the title of the page.
<body>: This is where the magic happens. All the visible content of the webpage—headings, paragraphs, images, links—goes inside the <body> element.

Building with Content Blocks

Once you have the basic skeleton, you can start adding content. The most common building blocks for text are headings and paragraphs. These tags give your text semantic meaning and structure, which is important for both human readers and search engines.

Headings are defined with <h1> through <h6> tags. <h1> is the most important heading, usually the main title of the page, while <h6> is the least important. Think of them like a document outline.

Paragraphs are defined with the <p> tag. Browsers automatically add some space before and after each paragraph, separating the blocks of text.

<h1>This is the Main Title</h1>
<h2>This is a Subheading</h2>
<p>This is a paragraph of text. It contains sentences that explain a topic.</p>
<p>This is another paragraph. HTML uses tags to structure text into logical blocks.</p>

For creating lists, HTML provides two main types: unordered and ordered.

An unordered list starts with the <ul> tag and is used for items where the order doesn't matter. Each list item starts with the <li> tag. It will typically be displayed with bullet points.

An ordered list starts with the <ol> tag and is for items where the sequence is important. Each list item also starts with <li>, but it will be displayed with numbers.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Make coffee</li>
</ol>

Links and Images

A huge part of the web is connecting pages to one another. We do this with hyperlinks, also known as links. The HTML anchor tag, <a>, creates these links. The destination of the link is specified in the href attribute.

Attribute

noun

Provides additional information about an HTML element. Attributes are always specified in the start tag and usually come in name/value pairs like name="value".

<a href="https://www.wikipedia.org">Visit Wikipedia</a>

Images are embedded using the <img> tag. This is an empty tag, meaning it doesn't have a closing tag. It requires two key attributes: src and alt.

src: The source attribute specifies the path to the image file.
alt: The alternative text attribute provides a text description of the image. This is crucial for screen readers used by visually impaired users and is also displayed if the image fails to load.

<img src="smiley.gif" alt="A yellow smiley face">

Organizing Data with Tables

Sometimes you need to display data in a grid. HTML tables are perfect for this. A table is defined with the <table> tag. It's built row by row using the <tr> (table row) tag.

Within each row, you create cells. There are two types of cells:

<th>: A table header cell. The text is typically bold and centered.
<td>: A table data cell, which contains the regular data.

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

This code creates a simple 3x3 table with a header row and two rows of data. Each <tr> defines a new row, and the <th> or <td> elements define the columns within that row.

Ready to test your knowledge? Let's see what you've learned about basic HTML structure.

Quiz Questions 1/6

What is the primary purpose of the <!DOCTYPE html> declaration at the very beginning of an HTML file?

Quiz Questions 2/6

Which tag would you use to create the most important heading on a webpage?

With just these few elements, you can create a well-structured and meaningful web page. This is the foundation upon which all websites are built.

Master Web Development HTML CSS JavaScript