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<div width="200" height="300">
2  <p>Element</p>
3</div>

In the code fragment above, we defined a

<div>

element and gave it specific dimensions using the

width

and

height

attributes.

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="galaxy.jpg" alt="View of the galaxy" />

• 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="Planet" 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.