List of HTML tags with description

Table of contents:

List of HTML tags with description
List of HTML tags with description

Tags are HTML words. With their help, you can turn a simple flow of text into a beautifully designed document with a clear structure. The full list of HTML tags contains about a hundred items, however, in practice, much less is constantly used. They perform different functions - from building a visual frame of the page and formatting text to connecting third-party files and complying with official Internet rules.

Document structure

In order for a web page to be adequately displayed by a browser and well perceived by robots, it must have a certain structure.

The very first document tag should be, declaring what type it is. It is in accordance with the doctype that the browser will render the layout. The most popular type is the HTML5 standard, which is declared as follows:

The page must have a root element that wraps all of its content. This function is performed by the tag


Opening and closing HTML tags
Opening and closing HTML tags

All service information is placed inside the section


, and the actual content,which will be visible to the user can be enclosed in the tag


Using the

body tag is optional, but considered good practice. This allows you to clearly define the structure of the web page, indicate the beginning and end of the content part.

Each tag is a complete section with content, so it has an opening and closing part.

Service information


head tag contains data that is not visible to the user, but is important for the web document.

The title of the page that will be displayed in the browser tab is indicated in the tag


Web page title
Web page title

Various useful service information can be presented in the form of meta tags that do not have a closing part. Meta information is described by tag attributes


  • name - the name of the described property;
  • content - its value;
  • http-equiv - an indication that this meta tag should be converted into an HTTP header;
  • charset - encoding in which the document was saved.

The following is a list of html tags with attributes that can be useful for passing important data:

Web page encoding
Description of the content of the document and keywords for the SEO robot
Page creator and copyright
Email or author's website
Message to the search robot that in five days the page will change and it will need to be indexed again
Tells the browser how long to cache a web document

Commands for the seo robot that allow or prohibit indexing a page and tracking links on it. Possible values:

  • index,
  • noindex,
  • follow,
  • nofollow,
  • all,
  • none
Redirect to another URL after the specified number of seconds

File connection

A web page often requires additional resources, such as styles and scripts, to function properly. They can be included from third-party files or defined in the document itself.

Styles must be specified inside the


tag to ensure the page displays correctly. To connect the stylesheet, a non-closing link tag is used with the attributes

href="file address"



, which indicates to the browser that the downloaded file is a CSS table. The definition of style rules within the page itself should be done in the tag


Including scripts in the service section can slow down loading, so they are often declared at the very bottom of the document before the closing tag


. The

src attribute is used to specify the file address. Besides,the script can be written inside the tag itself, but the address does not need to be specified for the browser to see it.

Example of connecting files:

Example of defining scripts and styles inside the page:

h1 { color: green; } h2 { color: blue; } var header=document.getElementById('header');"2px solid red";

Page layout

To visually break up a continuous flow of unformatted text into semantic groups, create columns and separate sections, structural HTML tags are used. They form block containers that can be styled with CSS.

The most popular hypertext markup tag is without a doubt

div. It does not carry any semantic load and can be used to group any content segments.

Semantic HTML5 Structural Tags
Semantic HTML5 Structural Tags

In addition, there are several semantic structural tags introduced by the HTML5 standard. They help to give their content a certain semantic meaning, designating it, for example, as a navigation block or site footer.

List of HTML tags that have semantic meaning at the whole page level:

Tag Semantics
header site header, usually contains the name, contact details and the main menu
main main content
footer site footer
nav navigation block
article highlights an independent area of content, such as a single article or comment
section logical section of a web page with title
aside sidebar with additional information

In addition, the new standard allows captioned media content to be semantically grouped using figure and figcaption tags.

Headings at different levels
Headings at different levels

Hyperlink design

Hyperlinks linking different pages are the basis of the World Wide Web, so their design in HTML is given special attention. Links should stand out from the rest of the text, by default they are blue and underlined. This design is provided by the tag.

Full list of HTML hyperlink tag attributes:

  • all generic attributes like class, id, style;
  • href - address of the page to which the transition will be made;
  • target - indicates exactly where to open a new page. By default, the target is the current tab, the value

    blankdetermines the opening of a new tab.
  • download - instead of switching, the specified file will be downloaded to the user's computer;
  • rel - designed for search engines, with the value

    nofollow prohibits the robot from following the link;
  • type - indicates the MIME type of the target file.

Media content

The web would be veryboring without pictures, videos and other media content. The HTML standard has several tags for inserting it into a page.


img tag with the following specific attributes is intended for placing images:

  • src - image address;
  • alt - alternative text that will be displayed if an error occurs while loading the image;
  • width


    height - dimensions.

Embedded objects can be placed inside the




tags, in addition, the HTML5 standard introduced special tags



audio. They have an impressive list of attributes that control the display and playback of media content.


iframe tag creates a separate floating frame into which another web document can be loaded.

Canvas allows you to create various images and manipulate them dynamically with high efficiency using JavaScript.

Text formatting

The list of HTML tags for formatting text content is very long.

  • b


    strong - bold style;
  • i




    dfn - italic;
  • q


    blockquote - highlight quotes;
  • code


    kbd - monospace font;
  • del


    s - strikethrough;
  • ins


    u - underline;
  • mark - highlight in yellow;
  • sub - subscriptindex;
  • sup - superscript;
  • small - text smaller than current size.

Forced hyphenation can be placed using the tag

. prompts the browser for possible line breaks. In addition, there is a tag

with no formatting applied, all spaces and hyphens are preserved.

Thetag will help you format the text in the form of paragraphs

, and to separate them with a thin gray line -.

Interactive elements

Very important for the operation of Internet sites forms and various interactive elements. They allow you to receive and transmit the necessary data, interact with the user, create dynamic content.

One of the most important form elements is the input field, represented by the tag. It can take many different forms depending on the value of the attribute


Other form elements:

  • button - button;
  • select - dropdown list;
  • textarea - multiline input field;
  • label - label for the field.



tag groups interactive elements and sends data to the server, and

fieldset - combines meaningfully related fields into groups.

List design

There are three kinds of lists in HTML: bulleted, numbered, and definition lists.

Types of lists in HTML
Types of lists in HTML

The list of definitions consists of:

  • container -

  • term names -

  • term descriptions -


Term 1

First term description

Term 2

Description of the second term

HTML numbered list tag -

    (ordered list), marked -

      (unordered list). Their items are wrapped in the tag

    • (list item).
      • each
      • hunter
      • wish
      • know
      • where
      • sitting
      • pheasant

      Format tables

      Another important element of the web are tables that allow you to organize and conveniently present large amounts of information.

      List HTML table tags:

      • table - table container;
      • thead - header, usually containing headings;
      • tbody - table body with basic data;
      • tfoot - footer summarizing;
      • tr - row of cells;
      • td - ordinary cell;
      • th - header cell, has its own default style;
      • col - allows you to select a table column and apply styles to it;
      • colgroup - group of columns;
      • caption - caption for the table.
      HTML document structure
      HTML document structure

      This partial list of HTML descriptive tags demonstrates the power of hypertext markup in web page design. The layout designer can present any information in a user-friendly form and at the same time provide goodthe perception of the page by search robots, which is very important for its promotion.

Popular topic

Editor's choice

  • The PHP mail function: description, application features
    The PHP mail function: description, application features

    E-mail is an integral part of any modern project or business. Nowadays, speed and responsiveness are of great value, especially when it comes to customer feedback. This is a decisive factor that users consider when making purchases

  • Shareware - what is it List of programs, description of programming principles
    Shareware - what is it List of programs, description of programming principles

    Shareware has battled the stigma of misunderstanding for decades. While enterprise software giants can no longer ignore the marketing potential of a trial, small startups still struggle with new software challenges and costs

  • What is var in Pascal
    What is var in Pascal

    Variable var is a name that the user assigns to computer memory cells and uses to store values in a computer program. It defines the type of information stored, describes the format of the value of the occupied memory and methods for manipulating the content

  • Java library: creating, processing, working with files
    Java library: creating, processing, working with files

    Experienced Java developer has extensive knowledge of APIs including JDK, libraries for everyday projects including Log4j, JSON parsing, Jackson. The problem is that not all Java library designers think about their users, how the API will be used in practice, and how the code will look and be tested

  • Compression algorithms: description, basic techniques, characteristics
    Compression algorithms: description, basic techniques, characteristics

    Currently, processor processing power is increasing faster than storage capacity and network bandwidth. Therefore, in order to compensate for the increase in the amount of data, they compress them. The compressor uses an optimization algorithm of the appropriate type. For subsequent recovery, a decompressor with the opposite direction of the process is required