— Hey there! It looks like you’ve already figured out the basic HTML elements.

— Well, I solved all practical tasks and realized that each tag has its own capabilities.

— That’s right. Today I’m going to tell you about the HTML attributes.

— Why are they used for?

Attributes

HTML attributes tell the browser how to display a particular element. For example, we can add alignment to text paragraphs or change the color of the horizontal rule.

All attributes have two parts: name and value. As with the tag name, the attribute name is not case sensitive, but everyone writes them in lowercase letters, so I suggest you follow this style.

To add an attribute, you start with its name, continue with the equals sign =, and after it specify the attribute value in quotes.

The attribute is specified immediately after the tag name:

<p align="center">This text will be centered.</p>
<hr color="red">
<p align="right">This text will be right aligned.</p>

You are already familiar with the <p> and <hr> tags. Let’s take a look at the attributes that we’ve just added:

  • <p align ="center"> - attribute align with value center - will add center alignment to the text inside the paragraph
  • <hr color ="red"> - attribute color with value red - will change the color of the horizontal rule to red
  • <p align ="right"> - attribute align with value right - will add right-alignment to the text inside the paragraph

Multiple Attributes

We can add several attributes to one HTML tag if needed. In this case, they are separated with a space. For instance:

<!-- Multiple Attributes -->
<h1>JavaScript Test</h1>
<img src="https://learn.coderslang.com/js-test-13.png" width="100" alt="First picture">

Here, we add an image using the img tag, which might be new for you. The picture can be in different formats, for example, GIF, JPEG, or PNG.

  • We add the path to the image using the src attribute, where the value is the address of the image source.
  • The alt attribute sets an alternative text for the image. This text is displayed while/if the picture is not available.
  • The width attribute sets the width of the image. In our example, we are limiting the maximum width to 100 pixels. If the picture is wider, it will be reduced keeping the proportions intact.

— What if I’d like to change the height of the picture?

— The height can be changed using the height attribute. It works the same as width but limits the maximum height instead of the width.

Be careful, if you set the parameters width and height at the same time, the proportions of the image may change and it will appear distorted.

Also, the height and width can be specified as a percentage. To do this, simply add the % sign to the attribute value to get something like

<img src="https://learn.coderslang.com/js-test-13.png" height="50%" alt="First picture">

The percentage is not a reduction in the size of an image, but a limitation of the image size relative to the parent container, for example <div>. Or, browser windows if the outer <div> is missing.

— Oh, so I can also resize the <div>?

— You can, but don’t rush. For now, we are practicing in pictures, and we will deal with nesting later.

Anchors

Most certainly you’ve already used links to go from one web page to another. In HTML, they are described with the <a> tag and called anchors. The <a> tag is a paired one.

<a>First link</a>

But such a link will not work.

— Of course, you didn’t indicate the link itself.

— For the browser to understand which page needs to be opened by clicking on the link, the <a> tag needs to add the href attribute.

<a href="https://learn.coderslang.com/">First link</a>

The value of the href attribute is the web address to which you want to go.

The content of the <a> tag is shown in blue and underlined by default. If the browser is familiar with the file type (for example, a file with the extension .html), then this file will be opened in the current window, otherwise, a message will be displayed asking you to select an option to work with such a file.

The link address can be either absolute or relative. Absolute links are usually used to point to a different website.

<a href="https://www.google.com/">Open Google</a>

In this example, the browser will show a link with the text Open Google, and clicking on it will send the user to the address https://www.google.com.

If you want to add several links to the current web page, then you don’t need to type their full path every time. Suffice to add a part of the path relative to the current page.

When creating relative links, be aware that the value for the href attribute depends on the original location of the files. Remember the lecture about the terminal and the cd command.

Let’s imagine the following structure of the web pages of our site:

|-- lecture
|   |-- tests.html 
|   |-- tasks.html
|
|-- index.html

If we are writing the markup of the index.html page and we want to add two links - to the pages tasks and tests, this is how they will look:

<a href="./lecture/tests.html">Tests</a>
<a href="./lecture/tasks.html">Tasks</a>

And to get from the tasks.html page to index.html, you need to go one level higher using ..

<a href="../index.html">Home</a>

Identifying the HTML elements

Any HTML element can be enhanced by adding an id attribute. The value of this attribute can be anything, but it must be unique within a single web page.

The <id> attribute is needed so that the element can be uniquely identified.

<p id="p1">First paragraph</p>
<p id="p2">Second paragraph</p>

Both the absolute path and the relative path are used to navigate to a different web page. But sometimes we need to go to a particular section on the current page. Then we need an internal link.

To create an internal link, we need 2 things:

  • Add an HTML element with unique id. We will make the transition to it.
  • Set the attribute href, according to the formula #+ id of the element that we’re interested in.
<h1>Anchors example</h1>
<a href="#paragraph1">Go to paragraph 1</a>
<a href="#paragraph2">Go to paragraph 2</a>
<p id="paragraph1">
The package contained a blue jumpsuit. It looked the same as the one that I saw on Technic. On the chest, there was a patch without a name, and next to it was a luminous object, very similar to a marker. I got dressed and wrote my name on the jumpsuit.
</p>
<p id="paragraph2">
That's way better, Hero. After a long suspension, many people lose their memory, we are lucky that everything's fine with you!
</p>

Now run VSCode, create the file index.html, copy and paste the whole example there. Open it up in the browser and see what happens. Then you can add a couple more paragraphs and links to them.

Questions?

— Is there a list of common attributes that can be applied to all tags?
— Of course! Such attributes include: align (horizontal alignment), valign (vertically alignment), bgcolor (puts the background color behind the element), background (puts the background image behind the element), id (uniquely identifies an element), class (adds CSS classes to an element), width (controls the width of tables, images, or table cells), height (controls the height of tables, images, or table cells), title (adds a title).

— What if I want to open a link not in the current window, but in a new one?
— By default, when you click on a link, the page opens in the current window. You can change this behavior. If you add the attribute target with the value _blank, the link will open in a new browser window or tab.