HTML tags with code examples of each tag like tables, forms, anchor, image, heading, marquee, textarea, paragraph, title, quotes, formatting, div, code etc.
What are HTML Tags?
HTML tags are similar to keywords, which specify how a web browser will format and display content. A web browser can differentiate between simple content and HTML content with the use of tags. The major components which are essential for the HTML tag are the opening tag and the closing tag. However, some tags in HTML are not closed.
Why do they matter?
An HTML document is viewed by a web browser from left to right and top to bottom. To generate HTML documents and render their structures, utilize HTML tags. Every HTML tag has a unique set of features.
HTML Tags List with Examples
Here we have categorize the tags on the basis of the usage, to create any particular components.
- Basic Tags
- Formatting Tags
- Forms and Input Tags
- Image Tags
- Audio and Video Tags
- Link Tags
- List Tag
- Table Tags
- Styles and Semantics Tags
- Meta Tags
- Programming Tags
Each tag goes with some other tags unless we forced to use them individually. Each tag has it’s own example code on the third column of the table’s that you can check and edit to see the result.
HTML Basic Tags
HTML Basic Tags are the fundamental elements of HTML used for defining the structure of the document. These are letters or words enclosed by angle brackets (< and >). Usually, most of the HTML tags contains an opening and a closing tag. Each tag has a different meaning and the browser reads the tags and displays the contents enclosed by it accordingly.
Following are the basic tags that are listed below:
| Tags | Description | Examples |
|---|---|---|
| <!–…–> | Specifies a comment. Comments are annotations within the code that are note displayed in the browser window. | Try It |
| <!DOCTYPE> | Specifies the document type. This is the initial declaration required for the specification of document type and html version. | Try It |
| <html> | The html tags are the container that contains all the other HTML tags. It consist of opening and closing angle brackets surrounding a tag name. | Try It |
| <head> | Specifies information about the document. Html <head> is a tag specifies as a metadata container. | Try It |
| <title> | Specifies the document title. <title> is placed within the <head> specifies the concise and descriptive label that appears in the browser’s title bar or tab when the webpage is opened. | Try It |
| <body> | Specifies the body element. The HTML <body> tag serves as the container for all visible content within a webpage. | Try It |
| <h1> to <h6> | Specifies header 1 to header 6. It represents the main title or headline of a section or the entire page. | Try It |
| <p> | Specifies a paragraph. This tag serves as a container for blocks of text and content specifying the web page. | Try It |
| <br> | Inserts a single line break. It’s a self-closing element used to create a forced line break within text content. | Try It |
| <hr /> | Specifies a horizontal rule. It is a self-closing element used to insert a thematic break or divider within a webpage’s content. | Try It |
HTML Formatting Tags
Formatting tags in HTML are elements used to structure and style the content of a webpage, enhancing its appearance and readability. These tags add semantic value to text parts and used to style the visual appearance of the text.
Following are the Formatting tags that are listed below:
| Tags | Description | Examples |
|---|---|---|
| <abbr> | Specifies an abbreviation. It provides a semantic and accessible way to identify and explain their meanings. | Try It |
| <address> | Specifies an address element. The <address> tag provides a semantic way to structure contact information or the author’s detail within a document. | Try It |
| <bdi> | Represents text that must be isolated from its surrounding for bidirectional text formatting. It allows embedding a span of text with a different, or unknown, directionality | Try It |
| <bdo> | Specifies the direction of text display. IT is a markup element used to specify the direction of text within a document. | Try It |
| <blockquote> | Specifies a long quotation. It is a structural element used to identify and visually separate quoted content within a webpage. | Try It |
| <cite> | Specifies a citation. It is a semantic element used to mark up the title of a creative work, such as a book, article, song, or movie, that is referenced within a document. | Try It |
| <code> | Specifies computer code text. The HTML <code> tag is a semantic element used to mark up sections of text that represent computer code within a document. | Try It |
| <del> | Specifies deleted text. It is a semantic element used to mark up text that has been removed or deleted from a document. | Try It |
| <dfn> | Specifies a definition term. It is typically used within <dl> elements along with <dt> and <dd> tags | Try It |
| <em> | Specifies emphasized text.The <em> tag in HTML is used to emphasize text, typically by rendering it in italics. | Try It |
| <i> | Specifies italic text. The <i> tag in HTML is used to apply italic formatting to text, primarily for presentational purposes. | Try It |
| <ins> | Specifies inserted text. The <ins> tag in HTML is used to mark up text that has been inserted into a document. | Try It |
| <kbd> | Specifies keyboard text. The <kbd> tag in HTML is used to indicate text that represents user input or keyboard input | Try It |
| <mark> | Specifies a text highlighted for reference purposes, that is for its relevance in another context. | Try It |
| <meter> | The <meter> tag in HTML is used to represent a measurement within a predefined range. | Try It |
| <pre> | The <pre> tag in HTML is used to define preformatted text, which is displayed exactly as it appears in the HTML code. | Try It |
| <progress> | The <progress> tag in HTML is used to represent the progress of a task or the completion status of an operation. | Try It |
| <q> | The <q> tag in HTML is used to indicate short inline quotations within a paragraph or text. | Try It |
| <rp> | Specifies to show browsers that do not support the ruby element. | Try It |
| <rt> | The <rt> tag in HTML is used to define the text component of a ruby annotation | Try It |
| <ruby> | Specifies an ruby annotation. This tag is typically used in conjunction with <rt> and <rp> tags. | Try It |
| <s> | It is used to render text with a strike through. The <s> tag specifies text that is no longer correct, accurate, or relevant | Try It |
| <samp> | It is used to enclose the inline text that represents the sample output from a computer program or a script. | Try It |
| <small> | The <small> tag in HTML is used to indicate smaller text within a document. | Try It |
| <strong> | The <strong> tag in HTML is used to indicate smaller text within a document. | Try It |
| <sub> | The <sub> tag in HTML is used to define subscripted text within a document. | Try It |
| <sup> | The <sup> tag in HTML is used to define subscripted text within a document. | Try It |
| <template> | It is a mechanism for holding some client-side content hidden from the user when the page loads. | Try It |
| <time> | The <time> tag in HTML is used to represent a specific time or date within a document. | Try It |
| <var> | The <var> tag in Html represents the name of a variable in a mathematical expression or a programming context. | Try It |
| <wbr> | Indicates a potential word break point within a <nobr> section. | Try It |
| <b> | It is used to highlight the text and specify the bold text. | Try It |
HTML Forms and Input Tags
Forms plays a crucial role in a web page which is commonly used in collecting contact information, conducting surveys, and enabling user comments.
Following are the Forms and Input Tag tags that are listed below:
| Tags | Description | Examples |
|---|---|---|
| <form> | Specifies form within a document which is commonly used in collecting contact information, conducting surveys, and enabling user comments. | Try It |
| <input> | <input> tag is used to specify input field within a document and used to create interactive controls within web based forms. | Try It |
| <textarea> | <textarea> tag is used to specify textarea within a document or multi-line text input control within an HTML form. | Try It |
| <button> | Html <button> tag is used to insert button element within an HTML form | Try It |
| <select> | <select> tag is used in HTML forms and provides a menu of choices that users can select from. | Try It |
| <optgroup> | The <optgroup> tag in HTML is used to group related options within a <select> element (which represents a drop-down list). | Try It |
| <option> | <option> tag is used to specify options within an Html <select> tag by creating selectable options within a dropdown list. | Try It |
| <label> | Specifies a label for a form control and serves as a caption for an item in a user interface. | Try It |
| <fieldset> | Html <fieldset> tag used to group form controls (such as input fields, checkboxes, and radio buttons) together. | Try It |
| <legend> | Html <legend> tag is used to specify title in a HTML <fieldset> tag. | Try It |
| <datalist> | The <datalist> tag in HTML specifies a list of pre-defined options for an <input> element. | Try It |
| <output> | The <output> tag is used to Specify the result of a calculation within HTML form tag. | Try It |
HTML Image Tags
Images are crucial element of a web page, makes web page presentable and adds relativity towards the content.
Following are the Image tags that are listed below:
| Tags | Description | Examples |
|---|---|---|
| <img> | The <img> tag is used to specify image within a Html document. | Try It |
| <map> | The <map> tag in HTML is used to define an image map and and visually appealing interfaces by dividing an image into multiple clickable areas . | Try It |
| <area> | The <area> tag in HTML is used within an <map> element to define clickable regions in an image map. | Try It |
| <canvas> | The <canvas> tag in HTML is used to define an area on a webpage where graphics, animations, or visual elements can be dynamically rendered using JavaScript. | Try It |
| <figcaption> | The <figcaption> tag in HTML is used to provide a caption or description for a <figure> element and allows developers to add descriptive text with an image, illustration, diagram, video, or other multimedia content. | Try It |
| <figure> | The <figure> tag Specifies self-contained content such as images, illustrations, diagrams within a Html document.. | Try It |
| <picture> | Picture permits the specification of multiple images that are intended to more accurately fill the browser viewport. | Try It |
| <svg> | The <svg> tag in HTML is used to append Scalable Vector Graphics (SVG) directly into a webpage. It is a modular language used to describe visuals. | Try It |
HTML Audio and Video Tags
HTML <audio> and <video> tag appends visually appealing and informative content on a web page. This tags helps in enhancing user experiences.
Following are the Audio/Video tags that are listed below:
| Tags | Description | Examples |
|---|---|---|
| <audio> | The <audio> tag is used to insert sound content in an HTML document, such as music or other audio streams. | Try It |
| <source> | Specifies a media resources for media elements, defined inside video or audio elements. | Try It |
| <track> | The <track> tag is used to specify text tracks for multimedia elements such as <audio> and <video> tags. | Try It |
| <video> | HTML <video> tag is used to insert video content in an HTML document, such as movie clips or other video streams. Specifies a text tracks used in media players. | Try It |
HTML Link Tags
HTML Links are hyperlinks that means when you click on a link, it jump son another document. A webpage can contain various links that take us directly to other web pages or resources and even specific parts of a given page.
Following are the link tag that are listed below:
| Tags | Description | Examples |
|---|---|---|
| <a> | Specifies an anchor. The HTML <a> tag creates hyperlinks within a HTML document. | Try It |
| <link> | HTML <link> tag is used to link external resource within a HTML document. | Try It |
| <nav> | HTML <nav> tag is used to Specify a section that contains only navigation links. | Try It |
HTML List Tags
HTML lists are fundamental elements used to organize and structure content on web pages in a variety of ways.
Following are the list tags that are listed below:
| Tags | Description | Examples |
|---|---|---|
| <ul> | HTML <ul> tag Specifies an unordered list within a Html document. It is used to group to collection of items without any specific numerical order. | Try It |
| <ol> | HTML <ol> tag Specifies an ordered list within a Html document. It is used to group to collection of items in a specific numerical order. | Try It |
| <li> | HTML <li> is used to Specify a list item within a HTML document. It plays an important role in creating both ordered and unordered lists. | Try It |
| <dl> | HTML <dt> tag is used to Specify a definition list within a HTML document and serves a way to organize them. | Try It |
| <dt> | The <dt> tag is used to specify a term within a description or definition list. | Try It |
| <dd> | HTML <dd> tag plays a crucial role in Specifying a definition description within a description list . | Try It |
HTML Table Tags
Tables in HTML are commonly used to organize and present detailed data in rows and columns. They allow users to quickly scan and understand the information.
Following are the table tags that are listed below:
| Tags | Description | Examples |
|---|---|---|
| <table> | Specify a table within a HTML document in an organized and presentable Manner. | Try It |
| <caption> | Specify a table caption within a HTML document. | Try It |
| <th> | Specify a table heading within a HTML <table> tag . | Try It |
| <tr> | Specify a table row within a HTML <table>. | Try It |
| <td> | Specify a table cell within a HTML <table>. | Try It |
| <thead> | Specify a table heading within a HTML <table> and used to group header content within an HTML table. | Try It |
| <tbody> | Specify a table body within a HTML <table>. | Try It |
| <tfoot> | Specify a table footer within a HTML table and used to group footer content within an HTML table. | Try It |
| <col> | Specify attributes for table columns. The <col> element allows you to apply styles to entire columns. | Try It |
| <colgroup> | Specify groups of table columns. The <colgroup> tag must appear as a child of a <table> element. | Try It |
HTML Styles and Semantics Tags
HTML includes list of style and semantic tags. The HTML style tag enhances it’s appearance by adding style within HTML document. And HTML semantic tags embed simplicity by defining the meaning of the content they contain.
Following are the Styles and Semantics tags that are listed below:
| Tags | Description | Examples |
|---|---|---|
| <style> | HTML <style> tag defines CSS (Cascading Style Sheets) for document styling. This tags are used to define the presentation style of elements within a web page | Try It |
| <div> | HTML <div> tag is a fundamental building block for structuring web pages and is used to defines a division or section in an HTML document. | Try It |
| <span> | HTML <span> tag is an inline container for inline elements and content used to mark up a part of text or a section within a document. | Try It |
| <header> | Specify a header for a document or section. It is a semantic element and contain introductory content and navigational elements within a web page. | Try It |
| <footer> | Specify a footer for a document or section. It is a semantic element used to define the footer section of a webpage. | Try It |
| <main> | Specifies the main or important content in the document. There is only one <main> element in the document. | Try It |
| <section> | Specify a section within a document. The HTML <section> tag adds a well organized sections within a document. | Try It |
| <article> | Specify an article within a HTML document. It is a semantic element used to define a self-contained piece of content. | Try It |
| <aside> | Specifies some content loosely related to the page content. If it is removed, the remaining content still makes sense. | Try It |
| <details> | It is used to create a disclosure widget that contains some information, and is visible when the widget is toggled to the “open” state. | Try It |
| <dialog> | Specify a dialog box or window within a HTML document. | Try It |
| <summary> | Specify a summary, caption, or legend for a given <details>. | Try It |
| <data> | The HTML data tag is used to link the given piece of content with the machine-readable translation. | Try It |
HTML Meta Tags
HTML Meta tags is used to provide structured information within a webpage and it’s content is not displayed on the web page.
Following are the meta-info tags that are listed below:
| Tags | Description | Examples |
|---|---|---|
| <meta> | Specify meta data of an html document which is not displayed on the page. | Try It |
| <base> | Specify a base URL for all the links in a page. The <base> tag is typically placed within the <head> section of an HTML document. | Try It |
HTML Programming Tags
HTML Programming tags are building blocks of HTML document used to define different types of content within a document.
Following are the programming tags that are listed below:
| Tags | Description | Examples |
|---|---|---|
| <script> | Specify a script within a HTML document and used to embed client-side scripting languages. | Try It |
| <noscript> | Specify a noscript section within a HTML document. | Try It |
| <embed> | Specify a container for an external (non-HTML) application. | Try It |
| <object> | Specify an embedded object within a HTML document. | Try It |
Leave a Reply