Skip to content

Basic tags

Comments

HTML, like any other language, allows you to insert comments. They are ignored by the browser when the page is displayed and are only visible when reading the source code. We place such a comment inside the characters <!-- and -->, e.g:

<!-- This is the content of the commentary -->

Headings

To define the heading on the page, we can use one of the <hn> headers. We have six possibilities. Headers differ not only in size, but also in the hierarchy of importance of the header. <h1> is the most important and <h6> represents the least important header.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraph

From the word paragraph a tag <p> was created, which creates a paragraph, i.e. a block of text, e.g:

<p>That's the content of the paragraph. You can enter text of any length here.</p>

Line break

Sometimes it is necessary to continue the text from a new line (line break) without creating another one.of the paragraph. The br> marker is used for this, e.g: 

<h1>Julius Caesar</h1>
<p>
The fault,<br>
dear Brutus,<br>
is not in our stars,<br>
but in ourselves.</p>

A hyperlink or so-called link is used to move the user to any place on the Internet. The link on the page can be placed with a <a> tag (so called anchor tag). In the value of the href attribute we give the address of the linked page. Using the attribute target="_blank" will open the page in a new browser tab.

<a href="https://sdacademy.dev/" target="_blank">
  This is a link to Software Development Academy page
</a>

Images

Insert images using the <img> tag. This is one of the tags that does not have a closing tag. The two most important attributes are:

  • src, where as a value we give the path to the image we want to insert on the page. This can be a picture on the server where the page is placed, as well as an address for the picture on the Internet (i.e. external address). Most often it is the relative path to the location of the HTML file.
  • alt, which is used to define alternative text that is used when an image cannot be displayed (e.g., when the image address is incorrect or when the device does not support images). Each image on our site should have this attribute.
<img src="images/filename.jpg" alt="Text description of the image">

Lists

HTML allows you to create two types of lists:

  • Unordered list, created with the <ul> tag.
<ul>
    <li>element 1</li>
    <li>element 2</li>    
</ul>
  • Ordered list, created with the <ol> tag.
<ol>
    <li>element 1</li>
    <li>element 2</li>    
</ol>

Each element of the list should be placed inside the <li> tag.