— 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?
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
<hr> tags. Let’s take a look at the attributes that we’ve just added:
<p align ="center">- attribute
center- will add center alignment to the text inside the paragraph
<hr color ="red">- attribute
red- will change the color of the horizontal rule to red
<p align ="right">- attribute
right- will add right-alignment to the text inside the paragraph
We can add several attributes to one HTML tag if needed. In this case, they are separated with a space. For instance:
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
srcattribute, where the value is the address of the image source.
altattribute sets an alternative text for the image. This text is displayed while/if the picture is not available.
widthattribute 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
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
— You can, but don’t rush. For now, we are practicing in pictures, and we will deal with nesting later.
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.
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
<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
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
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
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
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.
<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
idof 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.
— 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.