HTML Tags

HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.

• All HTML tags must enclosed within < > these brackets.
• Every tag in HTML perform different tasks.
• If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

Syntax

<tag> content </tag>

HTML Tag Examples

Note: HTML Tags are always written in lowercase letters. The basic HTML tags are given below:

Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

HTML Meta Tags

DOCTYPE, title, link, meta and style

HTML Text Tags

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>

HTML Link Tags

<a> and <base>

HTML Image and Object Tags

<img>, <area>, <map>, <param> and <object>

HTML List Tags

<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags

table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags

form, input, textarea, select, option, optgroup, button, label, fieldset and legend

HTML Scripting Tags

script and noscript

Note: We will see examples using these tags in later charters.

All HTML Tags

Let's discuss the complete tag list that is present in the HTML that is represented below.

1. Comments:

With the help of this tag, we can add comments in the HTML. After commenting on the elements, the browser does not render it. Also, these comments parts are not displayed on the web page. But these commented codes are available in the source code.

Syntax:

2. Doctype:

With the help of this tag, we can declare the version of the markup language to the web browser.

Syntax:

3. <a>:

With the help of this tag, we can create a hyperlink to the web page. The hyperlink can be done with the help of another file in a different location.

Syntax:

4. <abbr>:

With the help of this tag, we can define the abbreviations or acronyms of longer words, such as www, HTML, HTTP, etc.

Syntax:

5. <address>:

With the help of this tag, we can find the address or the contact details of the web page's author. The <address> tag contains addresses, cellphone numbers, emails, website connections, etc.

Syntax:

6. <area>:

With the help of this tag, we can identify the clickable area associated with the hyperlink.

Syntax:

7. <article>:

With the help of this tag, we can represent a piece of content that is used to be distributed to other websites without being a part of this. With the help of <article> tag, we can display entire blog posts, news articles, or similar content, etc.

Syntax:

8. <audio>:

With the help of this tag, we can embed the audio file into the webpage. To do this, there is no need for additional plug-ins like Flash.

Syntax:

9. <aside>:

With the help of this tag, we can define the content related to the web page's main content, but they are not constituted to the web page.

Syntax:

10. <b>:

With the help of this tag, we can make the text bold without any additional significance.

Syntax:

11. <base>:

With the help of this tag, we can create the target address, which is targeted by all the URLs present in the document.

Syntax:

12. <bdi>:

With the help of this tag, we can tell the browser to isolate the text that comes from other destinations with the help of a bidirectional algorithm.

Syntax:

13. <bdo>:

With the help of this tag, we can override the current text.

Syntax:

14. <blockquote>:

With the help of this tag, we can provide a way to insert the quotation in the document from another source. By default, the browser takes the text inside a quote tag as indented.

Syntax:

15. <body>:

With the help of this tag, we can define the web page's main content. The body tag includes text, paragraphs, headings, images, tables, links, and videos.

Syntax:

16. <br>:

With the help of this tag, we can produce a line break on the web page. We can use this tag basically during the writing of poems or addresses that require line breaks.

Syntax:

17. <button>:

With the help of this tag, we can create a clickable button on the web page. We can use the button tag in forms or anywhere in a document.

Syntax:

18. <canvas>:

With the help of this tag, we can define a particular region used for drawing graphics through scripting (usually JavaScript).

Syntax:

19. <caption>:

With the help of this tag, we can create the table caption, which is used to create the title for the table.

Syntax:

20. <cite>:

With the help of this tag, we can do some creative work and give a title for that creative work.

Syntax:

21. <code>:

With the help of this tag, we can insert a particular code fragment, which might be HTML or CSS code.

Syntax:

22. <col>:

With the help of this tag, we can specify all the column's properties. We can specify it inside the <colgroup> element.

Syntax:

23. <colgroup>:

With the help of this tag, we can specify one or more columns in a group. With the help of this, we can apply the style to the entire column without repeating the style for every column and every row.

Syntax:

24. <data>:

With the help of this tag, we can add machine-readable translation. The processor generates it, and the browser can generate the human-readable value.

Syntax:

25. <datalist>:

With the help of this tag, we can provide an auto-complete feature to the form element. With the help of this, the user can select the option from the option list.

Syntax:

26. <dd>:

With the help of this tag, we can define the definition description in the HTML. It is also used to describe an item in the list of descriptions.

Syntax:

27. <del>:

With the help of this tag, we can declare the particular section that will be deleted from the document. After doing this, the web browser strike over that particular section in the webpage.

Syntax:

28. <details>:

With the help of this tag, we can create a toggle. This toggle contains all the information but is in a closed state. When we mouse hover over it, it comes to an open state and displays all the hidden information.

Syntax:

29. <dfn>:

With the help of this tag, we can represent the definition element. With the help of the definition element, we can define the instances of the definition. When a term first appears in the document, it is known as the instances of the definition.

Syntax:

30. <dialog>:

With the help of this tag, we can define a dialogue box and the other webpage components. With the help of this component, the webpage can interact with the user beautifully.

Syntax:

31. <div>:

With the help of this tag, we can create a generic container that can hold the flow of the content. It also does not have the default rendering.

Syntax:

32. <dl>:

With the help of this tag, we can define the list of items on the web page. We can also represent the metadata with the help of this tag.

Syntax:

33. <dt>:

With the help of this tag, we can define the definition list on the web page. we have to write the <dt> tag within the <dl> tag. We can also flow this element with the help of <dd> tag.

Syntax:

34. <em>:

With the help of this tag, we can emphasize a particular word or phrase within a sentence. It converts the normal word or sentence into italic and semantic styles.

Syntax:

35. <embed>:

With the help of this tag, we can embed external things such as audio or video into the webpage.

Syntax:

36. <fieldset>:

With the help of this tag, we can create a group of related elements inside a form. Also, with the help of this, we can create a box around the element.

Syntax:

37. <figcaption>:

With the help of this tag, we can attach the caption for the image, table, or chart contained within the <figure> element.

Syntax:

38. <figure>:

With the help of this tag, we can create self-contained content, also referred to as a single entity.

Syntax:

39. <footer>:

With the help of this element, we can represent the footer part in the root element.

Syntax:

40. <form>:

With the help of this tag, we can receive the information from the user.

Syntax:

41. <head>:

With the help of this tag, we can specify the header part of the header section of the code. It contains all the information regarding the document.

Syntax:

42. <header>:

With the help of this tag, we can define the webpage's header. It also contains information regarding the title and heading of the document and section.

Syntax:

43. <hgroup>:

With the help of this tag, we can represent the heading group. It is also used for group heading elements, such as headings and subheadings, from <h1> to <h6>.

Syntax:

44. <h1> to <h6>:

With the help of this tag, we can define the web page's heading. It also makes the heading as large and bold by default. the <h1> headings are displayed in the largest font, whereas the <h6> headings are displayed in the smallest font.

Syntax:

45. <hr>:

With the help of this tag, we can divide the web page. It stands for horizontal rule or theme break.

Syntax:

46. <html>:

With the help of this tag, all other elements are contained by it. It is also known as the root of the HTML element.

Syntax:

47. <i>:

With the help of this tag, we can make any content italicized. It Highlights an important term, phrase, or technical term.

Syntax:

48. <iframe>:

With the help of this tag, we can embed another HTML page into the current webpage.

Syntax:

49. <img>:

With the help of this tag, we can embed an image into the current web page. It links an image to the image without directly inserting it into the web page.

Syntax:

50. <input>

With the help of this tag, we can enable interactive control in the form. It also depends on the various fields of the attribute type.

Syntax:

51. <ins>:

With the help of this tag, we can specify the block of the inserted text. It also signifies that a particular range of text has been added to the document.

Syntax:

52. <kbd>:

With the help of this tag, we can refer to the textual part of the inline text that represents the user's keyboard, voice, or any other text input device.

Syntax:

53. <label>:

With the help of this tag, we can improve the usability for mouse users, i.e., clicking on the label will toggle the control.

Syntax:

54. <legend>:

With the help of this tag, we can define the title for the child's content. Legends are the parent element of all the child elements. We can define these elements with the help of <fieldset>.

Syntax:

55. <li>:

With the help of this tag, we can represent the list of items on the web page. It contains an ordered list (an unordered or a menu) as a parent element.

Syntax:

56. <link>:

With the help of this tag, we can link external resources to the current webpage.

Syntax:

57. <main>:

With the help of this tag, we can make an ordinary element the most important element. We have to write this tag inside the <body> tag.

Syntax:

58. <map>:

With the help of this tag, we can define the map image. The image map also has a clickable area.

Syntax:

59. <mark>:

With the help of this tag, we can represent the text as highlighted, which will be used for reference or notation purposes. Based on the importance of the content, it highlighted the text.

Syntax:

60. <meta>:

With the help of this tag, we can represent the document's metadata. The metadata contains page description, keywords, copyright, the language used, and the author.

Syntax:

61. <meter>:

With the help of this tag, we can represent the Measurements within a given range or fractional values. It is also known as the gauge.

Syntax:

62. <nav>:

With the help of this tag, we can represent the section of navigational links in a document. Some examples of nav tags are Menus, tables of contents, indexes, etc.

Syntax:

63. <noscript>:

With the help of this, we can provide an alternative script when the user's browser does not support the particular script. It also works whenever the user's browser does not support client-side scripting or does not support any scripting language.

Syntax:

64. <object>:

With the help of this tag, we can display multimedia like audio, videos, images, PDFs, and Flash on web pages.

Syntax:

65. <ol>:

This tag is used for the creation of the ordered list. The ordered list can be numerical or alphabetical. Inside the <ol> tag, we can create the list using the <li> tag. It will then follow the order.

Syntax:

66. <optgroup>:

This tag is used in the creation of the drop-down list. With the help of this tag, we can define the group of options.

Syntax:

67. <option>:

With the help of this tag, we can define the option in the drop-down list by using the <select> tag.

Syntax:

68. <output>:

With the help of this tag, we can create the container for the element that injects the result of the calculation.

Syntax:

69. :

With the help of this tag, we can define the paragraph tag. With the help of a paragraph tag, we can represent the visual media as blocks of text separated from adjacent blocks by blank lines or first-line indentation.

Syntax:

70. <param>:

With the help of this tag, we can define the parameter for an object. With the help of this, we can pass the parameter for another embedded object.

Syntax:

71. <picture>:

With the help of this tag, we can provide flexibility to the web page by specifying the image. It also contains tags like <source> and <img>.

Syntax:

72. <pre>:

With the help of this tag, we can declare the block of pre-formatted text on the web page the pre-formatted character, such as spaces, line breaks, tabs, etc.

Syntax:

73. <progress>:

With the help of this tag, we can display the progression of the task. With the help of this, the developer can create a progress bar on their web page.

Syntax:

74. <q>:

With the help of this tag, we can create an inline quotation on the web page. The text is contained inside the quotation marks in most browsers today.

Syntax:

75. <rp>:

With the help of this tag, we can use it in the fallback parenthesis when a browser does not support ruby annotations.

Syntax:

76. <rt>:

With the help of this tag, we can define the pronunciation of the character inside the ruby annotation.

Syntax:

77. <ruby>:

With the help of this, we can define the East Asian characters' pronunciations and represent small annotations above, below, or next to the base text.

Syntax:

78. <s>:

With the help of this tag, we can render the text with a strikethrough or a line through it. We can use this tag when Things are no longer accurate or relevant.

Syntax:

79. <samp>:

With the help of this tag, we can define the sample output of the computer program. The content of this tag is displayed using a monospaced font in the browser.

Syntax:

80. <script>:

With the help of this tag, we can insert the client-side scripting. It also enables the insertion of the script in the HTML web page.

Syntax:

81. <section>:

With the help of this tag, we can create the header and footer or any other section on the web page.

Syntax:

82. <select>:

With the help of this tag, we can define the list of options inside the list.

Syntax:

83. <small>:

With the help of this tag, we can reduce the font size by one size smaller than its base size, for instance, from large to small.

Syntax:

84. <source>

With the help of this tag, we can link multiple media resources like <audio> and <video>,

Syntax:

85. <strong>

With the help of this tag, we can define the content as very important. The browser will display that element in bold.

Syntax:

86. <span>:

It is the most generic element in the HTML. We can apply the style by grouping the elements.

Syntax:

87. <style>:

We can provide the style information for the document with the help of this tag.

Syntax:

88. <sub>:

With the help of this tag, we can display the subscript element only for typographical reasons.

Syntax:

89. <summary>:

With the help of this tag, we can create a box with the help of <details> element that contains the summary, caption, or legend. When we click on the summary button, it performs the open/closed state of the parent *details> element.

Syntax:

90. <sup>:

With the help of this tag, we can display any text as the superscript of the inline element.

Syntax:

91. <svg>:

With the help of this tag, we can embed the SVG graphs into the web page. Also, we can define the vector graphics in an XML format with the help of this tag.

Syntax:

92. <table>:

With the help of this tag, we can define the data in a tabular format in HTML. It will create a two-dimensional table that has some rows and columns.

Syntax:

93. <tbody>:

With the help of this tag, we can encapsulate the table's rows associated with the table body.

Syntax:

94. <td>:

With the help of this tag, we can define the table's cell. A table row may consist of more than one <td> element. The default alignment is left in this element.

Syntax: