HTML tags and structure

HTML tags and structure

The main element of HTML code is TAG (tag). This is a special keyword placed inside sharp brackets. The structure of the tag looks like this:

<Tag_name> content </ tag_name>

The name between sharp brackets determines the type of tag. Tags are HTML code, and texts between them are content. Tags surround these texts, which allows you to specify the structure of the HTML document. You can set the background color, the type of text formatting, insert a picture etc. The marker is not visible on the screen. Only the effects of its operation are visible.

Tag features

HTML tags are most often found in pairs, e.g. <p> and </p> (paragraph tags).
The first tag in the pair is the opening tag, the second is the closing tag.
The closing tag is saved just like the opening tag, but the / character is added before its name.
There are also tags that do not require a closing tag (and you do not even need to insert it), such as (break line or enter).

HTML document structure and sample tags

Each HTML document has a strictly defined basic structure. Structure, or initial code, which basically repeats in every HTML file. It is only within this framework that we add your content and other tags. The structure looks like this:

tags html
tags html


Doctype declaration – specifies with what type of document we are dealing with.

The content between <html> and </ html> is our HTML document.

Head Section The content between <head> and </ head> provides information about the site that is important for the browser, but most often invisible to the Internet user.

The content in <meta> tags (always nested in <head> </ head>) contains information important for the browser. 

The title of the page that appears as the largest blue caption in Google search results.

<title> Page title </ title>

The content of the title is also very important in the SEO of our website – it is worth making sure that it contains the most important keywords of the page.

The content between <body> and </ body> is what you then see in the browser. Here you insert texts and photos for your site.

Linear elements are those that occupy as much space as they need and nothing more.

An example is a <span> tag, in which we put a short text to fit in 1 line, or an <img> tag that places an image that matches the text and arranges itself next to it, but does not occupy the entire available surface.

The block element occupies the entire available page width.

An example is a paragraph (<p>), a block or a header (from <h1> to <h6>).

The content between <h1> and </ h1> is the header. There are 6 types of headings. The highest header is h1. Then we have h2, h3, h4, h5 and h6. The higher the header, the larger the font is.

The content between <p> and </ p> will create a text paragraph.

The content between <a href=”#”> and </a> defines the link that should lead to the address given in the href attribute. It is most often used to create a menu or to create a link to another page that we liked or which we would like to recommend for the reader. The link can be text (click on the text), picture (click on the picture) or even it can lead to an e-mail address.

Picture reference

<a href=”> <img src = “image.jpg” /> </a>

The tag <img src = “file.jpg” alt = “”> inserts the graphic file into the page from the given source src.

Attributes of tags

We can add HTML tags to HTML tags to specify additional tag properties. We add them as follows:

<tag_name attribute1 = “valueXattribute2 = “valueY“> content </tag_name>

Attributes should always be added to the opening tag. You can also add several attributes to one tag, separated by a space. The value of the attribute is given after the equal sign, enclosed in quotation marks. Different attributes can be used for different tags, which can take a certain value.


The list is often used to create a menu on the page or simply to list items in a readable way.

There are 2 types of lists: ordered (numbering before each element) and unordered (by default, circles in front of each element). The <ol> element only indicates the type of list. All elements of the list must be placed between the <li> and </ li> tags.

Unordered list


<li>Element </li>


<li>Element </li>


Unordered list








Comments in HTML are invisible to the browser. They are visible only from the code level and the person who browses the page will not see them.

They are often used to comment (describe) some part of the page in the code, so that later it would be easier to modify it.

Then you do not have to browse and analyze the whole page code.

We create a comment as follows:

<! — Content of the comment –>


Physical tags work in a similar way as font attributes in a text editor, creating a presentation layer of the edited text – they distinguish certain fragments from the entire message.

Bold font

<b> </ b>


Close Menu