HTML Elements

The opening tag, the content between tags, and the closing tag - these three elements form the basic building block of HTML. 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.

Remember that HTML tags affect not only the appearance but also the semantics of the page - they give meaning to our elements. All HTML tags are defined and 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. 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.

Creating an Image Tag (

img

)

We'll create an

img

tag that displays an image from the URL "https://example.com/image.jpg". Add an

alt

attribute describing the image:

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

Creating a Paragraph (

p

)

We'll create a paragraph with any text:

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

Creating Headings (

h1

,

h2

,

h3

):

We'll 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>

Emphasizing Text (

strong

and

em

)

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>

Practice

Here's an example of a page using various HTML elements with an Egyptian theme:

Experiment with this code! Add your own elements, change the content, see how different tags affect the page's appearance.