<h> Tag
Heading tags are used to mark titles and headings on a page. The largest and most important heading is marked with <h1>, while the smallest heading is marked with the <h6> tag.
See the Pen
HTML Headings by Web programiranje (@chos)
on CodePen.
<p> Tag
The paragraph tag is used to place regular, standard-sized text. Before displaying the text, the paragraph tag automatically removes all extra spaces and empty lines and tries to present the text in a continuous flow.
See the Pen
<p> tag by Web programiranje (@chos)
on CodePen.
<br> Tag
As we’ve seen, the <p> tag always tries to display the text in a single line. If you want to break the text and continue it on the next line, you need to use the <br> tag.
See the Pen
<br> tag by Web programiranje (@chos)
on CodePen.
<pre> Tag
But what if we don’t want the <p> tag to format our text? What if we want to preserve empty lines, spaces, and display the text exactly as we typed it? In that case, we should use the <pre> tag, which treats the text as pre-formatted and does not modify it further. See the difference in this example:
See the Pen
<pre> tag by Web programiranje (@chos)
on CodePen.
<hr> Tag
This tag is used to visually separate sections on a page by displaying a horizontal line.
See the Pen
<hr> tag by Web programiranje (@chos)
on CodePen.
<img> Tag
This tag is used to display images on a page. The <img> tag is self-closing, meaning it only has an opening tag. It requires additional information, known as attributes, and has two mandatory attributes:
- src – defines the image source (the file path).
- alt – defines the alternative text if the image cannot be displayed.
|
1 |
<img src="/image_folder/image_name.jpg" alt="text describing the image"> |
See the Pen
<img> tag by Web programiranje (@chos)
on CodePen.
<a> Tag
The anchor (<a>) tag is used to create links:
- Hyperlinks – clickable links that open another web page.
- Download links – clickable links that start downloading a file directly.
When you hover over an <a> tag, the mouse cursor typically changes to a pointer (hand icon).
“href” Attribute
The most important attribute for the <a> tag is the href attribute, which defines the target URL or the file to be downloaded.
|
1 |
href=" " |
See the Pen
<a> tag by Web programiranje (@chos)
on CodePen.
There are many additional attributes that can be used with the <a> tag, but besides the required
|
1 |
href=" " |
attribute, another commonly used attribute is:
|
1 |
target=" " |
“target” Attribute
The target attribute specifies how the link will be opened:
- _self – opens the link in the same tab.
- _blank – opens the link in a new tab or window.
See the Pen
<a> tag + target attribute by Web programiranje (@chos)
on CodePen.
In addition to clickable text links, you can also make images clickable. See the example:
See the Pen
<a> with image by Web programiranje (@chos)
on CodePen.
“download” Attribute
To enable file downloads through a link, simply add the “download” attribute to the <a> tag:
See the Pen
Untitled by Web programiranje (@chos)
on CodePen.
Note: This feature may not work in all browsers.