HTML tags

defining the objects of a web page

// updated 2025-04-24 12:56

So, we have seen that HTML webpages consist of tags, which represent parts of web pages:

Structure

Each HTML tag follows a basic structure of definition, attributes and content:

Definition, as the tag/object itself
- e.g. <h1> for a heading
Attributes, as optional information describing the tag
- e.g. for an image tag with a source file:
  - <img src="file.jpg" />
Content (aka "children"), which would house additional objects and information
- these may include plain text or other "child" tags

Note that some tags don't have attributes, while other attributes won't have content in between its opening and closing tags.

Attributes inside HTML tags

We can add information about the objects (i.e. headings, paragraphs, images, etc.) of a webpage. If tags were physical objects, think of the attribute as a dimension, much like a height or a width:

For an object (e.g. image, video, etc.) with a height of 120 pixels:

height would be the attribute
120 would be the value
- (the browser will interpret this as the number of pixels)

That is:

<object height="120"></object>

Abstractly:

<object attribute="value"></object>

Content inside HTML tags

If we were to include content inside an HTML tag, the tag would definitely need both an opening (<h1>) and closing (</h1>) component:

<h1>Content!</h1>

Not all tags will have content like this, e.g.:

<img> tags refer to a file as its content, via its "src" attribute

Nesting HTML tags

We could even include tags inside tags! Of course, we always do this with the <html> tag:

<html>
  <head>
    <title>A title</title>
  </head>
  <body>
    <h1>A heading</h1>
  </body>
</html>

When we nest a tag, we must close the innermost tag before closing the outer tag (in the above example, we must close h1 before closing body, which we, in turn, close before html)

Examples

Headings : <h1> to <h6>

Headings have a hierarchy from 1 (the top) to 6 (the bottom)
- All full-sized HTML pages should have one and only one <h1> tag and no other heading tags should precede it
- Lower-level tags should not come before higher-level tags, while any higher-level tag can come after any lower-level tag
  - e.g. an <h3> should always come before an <h4>
  - however, an <h2> can come after an <h4>
- Documents rarely get to <h5> and <h6> because, by that point, the document will have become too difficult to follow (exceptions might include some complex legal documents)
  - try to not have anything further below the <h4> level for simple HTML pages!
- Also, do not use these headings as font sizes
  - the numbers serve a structural purpose of making "levels" for the document
  - we can adjust font sizes later in CSS

<h1> Heading 1 </h1>

<h2> Heading 1.1 </h2>

<h2> Heading 1.2 </h2>

<h3> Heading 1.2.1 </h3>

<h4> Heading 1.2.1.1 </h4>

<h3> Heading 1.2.2 </h3>

<h2> Heading 1.3 </h2>

Paragraphs : <p>

Exactly as advertised: paragraphs of text!

By default, paragraphs will have horizontal full-line spacings dividing them, much like in written text

<p>
  This paragraph can have only one line, or it can have infinite lines! 
</p>

Lists : <ul>, <ol>, <li>

An unordered list (<ul>) looks like a list of bullets (like this one!)
An ordered list (<ol>) has numbers (or numerals like Roman numerals)

There exist many ways to style the bullets of these lists (more on this later)

A list item (<li>) appears inside of an unordered or ordered list as the official content of the list

<ul>
  <li>The first bullet point</li>
  <li>The second bullet point</li>
  <li>The third bullet point</li>
</ul>

<ol>
  <li>Number one!</li>
  <li>Number two!</li>
  <li>Number three!</li>
</ol>

Importance : <strong>

Usually (but not necessarily) shows the text in bold type
Conveys the idea of an important keyword in the document's text

<p>
  <strong>Inertia</strong> is a property of matter!
</p>

Emphasis : <em>

Usually (but not necessarily) shows the text in italic type
Conveys the idea of stress on a word or a phrase
- sometimes used to denote that a word comes from a foreign language

<p>
  The tourists did <em>not</em> want to smell the durian again!
</p>

Strikeout : <del> / <strikeout>

Usually shows the text ~~slashed~~ horizontally ~~like this~~
Conveys the idea of a removal of a text while still making it somewhat visible

<strikeout>This will have a line through it!</strikeout>

<del>This will also have a line through it!</del>

Quotations : <blockquote>

Usually shows the text indented
Conveys the idea that the text is a reference to some other text

<blockquote>
  "This is my quote!"<br /> 
  - Jon
</blockquote>

Links : <a>

The a means "anchor" and signifies that it points to another page or site altogether:

The href attribute means "hypertext reference" (we only need to know it means "address")

<a href="https://website.com">Website.com</a>

Images : <img>

Just like the tag for a link, the img tag intuitively has a couple of attributes:

The src attribute means "source"
The alt attribute means "alternative text" and its value gets announced by screen readers to those who use them

<img src="/brand-x-logo.jpg" alt="logo of Brand X" />

Other common and/or useful HTML tags

<head> (for page metadata, alongside <meta> and <title>)
<div> (along with its semantic HTML variants), e.g.
- <header>
- <nav>
- <main>, typically containing:
  - <section>
  - <article>
  - <aside>
- <footer>
<table> (for listing data in a grid)
- <thead> (for table header sections)
  - <th> (for table headings)
- <tbody> (for table body sections - the main table data)
  - <tr> (for table rows)
    - <td> (for table cells)
- <tfoot> (for table footer sections)
<form> (for receiving user input)
- <input> (a field on such a form), types include
  - text
  - checkbox
  - radio
  - password
- <select> (a drop-down menu)
  - <option> (an item on a drop-down menu)
- <textarea> (a multi-line block of text)
<br> (for a hard line "break", with no spacing above or below it)
<hr> (for a "horizontal rule", or a solid horizontal line across the page)