Properties of HTML Elements

Attributes

Attributes in HTML play an important role, providing additional information or modifying the behavior of individual elements on the page. They are an integral part of every tag and allow us to customize elements to the specific needs of our page.

To illustrate this with a practical example, let's imagine we're observing pyramids in Egypt. We can notice that one pyramid is taller than another, and the base of one is wider than the other. These differences can be compared to the width and height attributes in HTML.

Let's look at an example:

1<img src="pyramid.jpg" alt="Pyramid of Cheops" width="300" height="200">

In the code fragment above, we gave the image specific dimensions using the width and height attributes. These attributes only work on some elements, e.g. <img>, <video> and <iframe>. On a <div> the browser ignores them, and you set its size in CSS.

A common element we see on web pages are links. Links are created using the <a> tag and the href attribute, which defines the link's destination.

Here's an example:

1<a href="https://www.google.com/">Link</a>

The href attribute specifies what URL address the link leads to. It can be any website address or a reference to another part of the same page.

HTML elements can have many attributes. For example, let's look at the <a> tag with an additional target attribute. The target attribute determines where the link should be opened - in the same window or in a new one.

1<a href="https://www.google.com/" target="_blank">Link</a>

In this example, after clicking the link, the page will open in a new browser window.

The title attribute can be added to a link to provide additional information that will appear as a tooltip when hovering over the link with the mouse.

1<a href="https://www.example.com" title="Go to Example.com">Visit Example.com</a>

You can also create a link that opens the user's email program and pre-fills the email address. To do this, you use the mailto protocol in the href attribute.

1<a href="mailto:example@example.com">Send me an email</a>

In summary, attributes are a key element of HTML structure. Thanks to them, we can define various properties of elements, such as their dimensions, references, how pages are opened, and much more. Thanks to them, we can customize our web page to specific needs, making it more functional and useful for users.

Inserting Images

Inserting images on a web page is done using the <img> tag. The basic syntax looks like this:

1<img src="pyramid.jpg" alt="The Pyramid of Cheops at sunset">

• The src attribute (source) specifies the path to the image file to be displayed.
• The alt attribute (alternative text) provides a description of the image that can be displayed if the image fails to load, and is read by screen readers for visually impaired users.

Size and Appearance

You can control the size of an image using the width and height attributes:

1<img src="image.jpg" alt="Great Sphinx" width="300" height="200">

Images with Links

You can combine an image with a link by placing the <img> tag inside <a>. It's as if a hieroglyph on the pyramid wall were also a portal to another chamber:

1<a href="https://www.example.com">
2  <img src="pyramid.jpg" alt="Pyramid of Cheops" width="300">
3</a>

After clicking on the image, the user will be redirected to the specified URL.

The <figure> and <figcaption> Elements

HTML5 introduces semantic tags for grouping images with their captions. The <figure> element wraps the image, and <figcaption> adds a caption to it - just as ancient Egyptians added hieroglyphic descriptions next to wall paintings:

1<figure>
2  <img src="sphinx.jpg" alt="Great Sphinx of Giza">
3  <figcaption>The Great Sphinx, guardian of the pyramids of Giza</figcaption>
4</figure>

Global Attributes: id and class

Two particularly important attributes that can be added to almost any HTML element are id and class. They will be essential when we start working with CSS and JavaScript:

• id - a unique identifier for the element on the page (like a pharaoh's name - unique)
• class - a class that can be shared by many elements (like the title "priest" - many can bear it)

1<h2 id="pharaohs">Famous Pharaohs</h2>
2<p class="description">Cheops was the builder of the Great Pyramid.</p>
3<p class="description">Tutankhamun became famous for his golden mask.</p>

Remember: id must be unique on the entire page, while class can be repeated multiple times.

1<!-- Links -->
2<a href="https://www.google.com/" target="_blank" title="Open Google in a new window">Google</a>
3<a href="mailto:example@example.com" title="Send email">Email us</a>
4
5<!-- Images -->
6<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Kheops-Pyramid.jpg/500px-Kheops-Pyramid.jpg" alt="The Pyramid of Cheops in Giza" width="300" height="184">
7
8<!-- List with the style attribute -->
9<ul style="list-style-type:circle;">
10<li><a href="#point1" title="Jump to point 1">Point 1</a></li>
11<li><a href="#point2" title="Jump to point 2">Point 2</a></li>
12</ul>
13