HTML Elements

On papyrus, a scribe could make a title stand out with larger signs, but a browser can't guess which part of a page is a title and which is ordinary text - you have to tell it with HTML elements.

The opening tag, the content between tags, and the closing tag - these three parts form the basic building block of HTML, called an element. You can compare it to writing a story: the opening tag is like a prologue introducing the reader, the content between tags is the developing plot full of substance, and the closing tag is like an epilogue that closes the story and gives it full meaning. Together, these parts form a cohesive whole, giving structure and meaning to the entire document.

Tag vs. Element

These two words are often used interchangeably, but it's worth telling them apart. A tag is just the marker in angle brackets, e.g. <p> or </p>, while an element is the whole thing: the opening tag, the content and the closing tag. A closing tag differs from an opening tag only by the slash / before the name. We write tag names in lowercase - the browser will also understand <P>, but lowercase is the accepted standard.

Remember that HTML tags affect not only the appearance but also the semantics of the page - they give meaning to our elements. The browser interprets this code and displays the page based on it.

Headings (h1, h2, h3)

HTML has six heading levels, from <h1> to <h6>. They work like the hierarchy in a temple: <h1> is the chief god of the whole page, <h2> opens sections, and <h3> opens subsections within them. Let's create h1, h2, and h3 headings with appropriate text:

1<h1>Most Important Heading</h1>
2<h2>Medium Heading</h2>
3<h3>Less Important Heading</h3>

The browser displays each next level in a smaller font, but size is only the default style. Don't choose <h3> because it's smaller - choose it because the content is a subsection. Use one <h1> per page and don't skip levels. A typical page therefore looks like this: the title in <h1>, an introductory paragraph below it, then the heading of the first section in <h2> and its subsections in <h3>.

Paragraph (p)

The most common element on every page is the paragraph. We'll create a paragraph with any text:

1<p>This is a sample paragraph.</p>

The browser adds space before and after a paragraph by itself, so you don't need to insert empty lines. Pressing Enter in the code doesn't create a new paragraph - a new paragraph is always a new <p> element.

Emphasizing Text (strong and em)

Sometimes one word in a sentence matters more than the rest. Create a sentence using strong and em tags to emphasize text:

1<p>This is <strong>important text</strong> and this is <em>emphasized text</em>.</p>

The <strong> tag means that a fragment is important, and it's displayed in bold by default. The <em> tag means stress, the kind you would put on a word with your voice, and it's displayed in italics by default. Also notice that both tags sit inside the paragraph: an element can contain other elements.

Image (img)

Finally, an element that has no text content. We'll create an img tag that displays an image from the URL "https://example.com/image.jpg" and add an alt attribute describing the image:

1<img src="https://example.com/image.jpg" alt="Image description">

The <img> tag is an empty element (a void element): it has no content and no closing tag, because everything it needs is written in attributes inside the opening tag. The src attribute points to the file address, and alt is a description that a screen reader reads out and that appears when the image fails to load.

Where to Look Up Tags?

All HTML tags are described in the MDN documentation, which is an excellent knowledge resource for every developer.

If you're looking for easier-to-digest materials, we recommend htmlreference.io, where you'll find all HTML tags with examples of their use. Reading documentation in English is also the best preparation for the next stages of learning to program, because most materials and sources are created in this language.

We encourage you to save links to pages that seem helpful or are frequently referenced in the course content. They will serve as good reference points as you progress in learning HTML. My advice: start with the MDN documentation and make it a daily habit from day one.

Practice

Here's an example of a page using various HTML elements with an Egyptian theme. You'll find headings, paragraphs with emphasis, and an image with a description in its alt attribute:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>HTML Elements</title>
6</head>
7<body>
8    <!-- Headings -->
9    <h1>Ancient Egypt</h1>
10    <h2>Pyramids</h2>
11
12    <!-- Paragraphs with formatting -->
13    <p>The Pyramids of Giza are the <strong>most famous</strong> monuments of ancient Egypt.</p>
14    <p>They were built over <em>4500 years ago</em>!</p>
15
16    <!-- Image -->
17    <img src="https://placehold.co/200x100/EEE/31343C" alt="Pyramid of Cheops">
18
19    <!-- List -->
20    <h3>The Great Three Pyramids:</h3>
21    <p>1. Pyramid of Cheops</p>
22    <p>2. Pyramid of Khafre</p>
23    <p>3. Pyramid of Menkaure</p>
24</body>
25</html>

Experiment with this code! Add your own elements, change the content, see how different tags affect the page's appearance. The list of three pyramids is written here as plain paragraphs - in the next module you'll learn list tags that do this better. Remember: an element is an opening tag, content and a closing tag - like the prologue, plot and epilogue of a story written on papyrus.