Skip to content

Basic tags

Comments

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

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

Headers

We can use one of the <hn> headers to define the header on the page. We have six options. Headers differ not only in size, they also indicate the hierarchy of importance of a given heading. <h1> is the most important and <h6> represents the least important heading.

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

Paragraph

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

<p>This is the content of the paragraph. You can enter text of any length here.</p>

Hyperlink or so-called the link is used to transfer the user anywhere on the Internet. The link on the page can be placed using the <a> tag (also called the anchor tag). In the value of the href attribute, we provide the address of the linked page. Using the attribute target="_blank" will cause the page to open in a new browser tab.

<a href="https://sdacademy.dev/" target="_blank">
  Link to the Software Development Academy website
</a>

Pictures

We 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 the value is the path to the image that we want to insert on the page. It can be a picture on the server where the page is located, as well as an address to the picture on the Internet (i.e. an external address). Most often it is a relative path to the location of the HTML file.
  • alt, which is used to define alternative text, which is used in case an image cannot be displayed (e.g. if the address to the image is incorrect or if the device does not support images). Each image on our website should have this attribute.
<img src="images/file_name.jpg" alt="Text description of the picture">

Letters

HTML allows you to create two types of lists:

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

Each list item should be inside a <li> tag.