Basic HTML Tags

<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.

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.

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

attribute, another commonly used attribute is:

“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.