HTML Elements Complete List with Example.

This blog post contains an alphabetical list of all the HTML elements with examples and explanations.

Element	Description
<!DOCTYPE>	The HTML document must start with <!DOCTYPE> declaration to inform the browser about the document type.
<a>	The <a> HTML element which is also known as the anchor element used with href attribute to create hyperlinks to web pages, files, different locations on the same page, or anything a URL can address. href holds the URL that the hyperlink is going to load. e.g. Click Me
<abbr>	The <abbr> HTML element is known as the Abbreviation element used to represent abbreviations or acronyms like "WHO", "CSS", "Dr.", and "Mr.". The title attribute is used with <abbr> to show the description of the abbreviation whenever the user hovers the mouse on it. e.g. Hover on -> HTML
<address>	The <address> HTML element is used to provide the contact information of a person or an organization. It can include any kind of contact information like email id, phone number, URL, location, etc.
<area>	The <area> HTML element is used to defines particular area inside an image map. This element is always used inside the <map> element which can add geometric areas to an image and add hyperlinks to that area.
<article>	The <article> HTML element represents a self-contained composition in a document, page, application or website.
<aside>	The <aside> HTML element is used to represent a portion of content that is indirectly related to the surrounding content. The <aside> content are usually placed as a side-bar in a HTML document.
<audio>	The <audio> HTML element is used to add sound content in HTML documents like music or other aduio streams, represented by using scr attribute or <source> element. The audio tag can contain more than one source tag and the browser will choose the most suitable one. HTML supports three audio formats: MP3, WAV, and OGG. e.g.
<b>	The <b> HTML element is used to represent bold text for giving more attention or for giving special importance. Tip: Most browser still support this <b> element but it is recommended to use CSS font-weight property or to use <strong> element for giving text speical importance.
<base>	The <base> HTML element is used to specifies the base/target URL for all relative URLs in a HTML document. There can be only one <base> element in a document and it must be inside <head> element.
<bdi>	The <bdi> HTML element stands for Bi-Directional Isolation and is used to isolate a part of the text that might be formatted in a different way from its surrounding text. e.g. When an Arabic quotation is added in an English string the browser implements the Unicode Bidirectional Algorithm to handle such a situation.
<bdo>	The <bdo> stands for Bi-Directional Override and is used Override the current text direction. The direction of the text is defined by the dir attribute with two different values ltr (left-to-right direction) and rtl (right-to-left direction).
<big>	The <big> HTML element is used to enclosed text for one level larger font-size (e.g. medium become large) than the surrounding text. Tips: It is not recommended to use this element because many browsers do not support it. Use CSS font-size property to change the font size.
<blink>	The <blink> HTML element is the non-standard element that flashes the enclosed text slowly on the screen. Tip: It is not recommended to use this element in HTML documents it is a bad design practice and many browsers do not support this feature.
<blockquote>	The <blockquote> HTML element is used quote a section of text which is taken from another source and browser usually add some indentation to <blockquote> elements. The cite attribute is used with URL as a value to specify the source of the quotation.
<body>	The <body> HTML element one the most important element used to represent all the content of an HTML document. There can be only one <body> element in an HTML document.
<br>	The <br> HTML element is an empty element also known as the Line Break element used to break lines in text. e.g. It is used in between paragraphs or for writing any poems or addresses.
<button>	The <button> HTML element clickable element which performs some action whenever a user clicks on it using mouse or keyboard. Tip: Always specify the type attribute for a button so a browser can understand it. e.g.
<canvas>	The <canvas> HTML element is a transparent container used for graphical drawing using JavaScript. The text content inside the <canvas> element will be displayed only when the browser does not support JavaScript or the <canvas> element.
<caption>	The <caption> HTML element is used to give a title to a table. It must be inserted immediately after the <table> tag. Tip: The caption content is by default center-aligned but you can use the CSS text-align property to place the content in the correct position.
<center>	The <center> HTML element was a block-level element used in HTML4 to center-align the text element. It is no longer recommended to use this feature it is not supported in HTML5.
<cite>	The <cite> HTML element is used to define the title of creative work like a book, a poem, a song, a movie, a painting, etc.
<code>	The <code> HTML element is used to define a piece of computer code in the default monospace font.
<col>	The <col> HTML element is used to define a column within a table present inside <colgroup> element. It is mainly used to apply the same style to an entire column instead of each row.
<colgroup>	The <colgroup> HTML element is used to create a group of one or more than one columns in a table. It is a child of <table> element which is mainly used to style the entire column together instead of each row.
<data>	The <data> HTML element is used to link the given piece of content with a machine-readable translation of the given content. Tip: If the content is time or date-related then we should use the <time> element.
<datalist>	The <datalist> is an HTML element which contain a set of <option> elements used to store pre-defined options to choose for an <input> element. It is basically used to create a drop-down list of available options.
<dd>	The <dd> HTML element is used in conjuction with <dl> and <dt> element for providing description, definition or value.
<del>	The <del> HTML element is used to represent a portion of text that has been deleted from the document. e.g. The browser usually shows deleted text like this- ~~This text is deleted~~.
<details>	The <details> HTML element is used to create a widget for storing additional information and that will be visible only when the user toggle the widget to open state. e.g. Click Me This is an example of a details disclosure element.
<dfn>	The <dfn> HTML element is known as the "definition element" used to indicate that the term is going to define within the context. Rule: The nearest parent element must contain the definition or explanation for that term.
<dialog>	The <dialog> HTML element is used to create a dialog box like a subwindow or a popup on a web page.
<dir>	The <dir> HTML was used as a container for a directory of files but user use <ul> HTML element for list of files. Warning: It is no longer supported by HTML5.
<div>	The <div> HTML element stand for division which is used to separate different section of an HTML document. It is easy to style a <div> using class or id attribute. Note: By default, the browser always adds a line break before and after the <div> element.
<dl>	The <dl> HTML element is used to represent description list and it is always use with <dt> (defines terms) and <dd> (describes term) element.
<dt>	The <dt> HTML element is used to define a term in a description list and it is always use with <dl> (defines a description list) and <dd> (describes each term) element.
<em>	The <em> HTML element is used to represent emphasized text.
<embed>	The <embed> HTML element is a container used for content from an external resource such as a web page, a picture, video, or browser plug-in. Tip: It is better to use <img> tag to display images, <iframe> tag to display HTML and <video> tag to display videos.
<fieldset>	The <fieldset> HTML element is used to group related form elements together in a box.
<figcaption>	The <figcaption> HTML element is used to add caption for the parent content of <figure> element.
<figure>	The <figure> HTML element is used to specify self-contained content like a diagram or an image. Tip: Use <figcaption> to add caption for the <figure> element.
<font>	The <font> HTML element was used to define the font size, color, and face of the content. Warning: This element is no longer in use from HTML5 because now you can give all these properties using CSS properties.
<footer>	The <footer> HTML element is used to represent a footer for its nearest ancestor. It basically contains information about the owner of the content or shows copyright information.
<form>	The <form> HTML element is used to create a form with interactive controls and input fields to collect information from the user. The List of elements a form tag can contain to get information from user: <input>, <textarea>, <button>, <select>, <option>, <optiongroup>, <fieldset>, <label>, <output>
<frame>	The <frame> HTML element was used in HTML4 for creating a particular window within a <frameset>. It is recommended not to use both elements because it is not supported in HTML5.
<head>	The <head> HTML element is a container for metadata (information about data) like <title>, <script> and <style> sheets. <head> is always declared inside <html> tag and the data present in this tag is not displayed on the web page.
<header>	The <header> HTML element is used to group together the set of introductory content like website name, logo, or navigational links.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>	The <h1> HTML element represent heighest level of heading section. There are total six heading level from <h1> to <h6> and font-size keep on decreasing from each level. e.g. This is h1 Heading This is h2 Heading This is h3 Heading This is h4 Heading This is h5 Heading This is h6 Heading
<hr>	The <hr> HTML element represents a thematic break in HTML (e.g. shift of topic within a section). It is displayed as a horizontal rule or line that is used to separate content in an HTML page.
<html>	The <html> HTML element is the root element of an HTML document which hold all other HTML elements. Tip: It is always recommended to add a lang attribute in the side <html> tag used to declare the language of the Web page.
<i>	The <i> HTML element is used to represent a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, etc. The content inside <i> tag displayed in italic.
<iframe>	The <iframe> HTML element is an inline frame used to represent browsing context, showing another HTML page into current HTML document.
<img>	The <img> HTML element is used to add image into an HTML document. Technically images are not inserted into an HTML document, they are linked to an HTML document. The two very important attribute for the <img> tag are src (use to declare the path of the image) and alt (use to display alternate text if the image fail to load due to some reason)
<input>	The <input> HTML element use mostly use for creating an input field to collect data from users. Note: The default input type is text. Some example of <input> type: Checkbox Color Picker Choose Date Choose Date and Time Enter Email Hidden Image Range Enter Password Radio Button Search Box
<ins>	The <ins> HTML element is used to represent a range of text that is inserted into a document.
<kbd>	The <kbd> HTML element is used to define Keyboard input and the content by default stay in monospace font.
<label>	The <label> HTML element is used to give a caption for an several HTML elements. Tip: Always use an id attribute for a label tag element to bind the related element together.
<legend>	The <legend> HTML element is used to add caption to the <fieldset> parent element.
<li>	The <li> HTML element stands for a list item used to represent an item in a list. It is used inside ordered lists <ol>, unordered lists <ul> and menu list menu. The <ul> and <menu> list item is displayed as bullet points and <ol> list item is displayed as numbers or letters.
<link>	The <link> HTML element is an empty element used to specifies relationships between the current HTML document and an external resource. It is mostly used to link external CSS style sheets or to add the favicon to a website.
<main>	The <main> HTML element is used to specify the main content of an HTML document. There should not be more than one <main> element and content inside the main tag should be unique.
<map>	The <map> HTML element is used with <area> element to map an image (defining clickable area of an image)
<mark>	The <mark> HTML element is used to represent a marked or highlighted text. e.g. highlighted Text
<meta>	The <meta> HTML element is used to provide information about data and is always present in the head tag. The content of metadata is not visible on a web page but the browser can understand this to get information like character set, page description, viewport settings, title, etc.
<meter>	The meter HTML element is used to define scalar measurement within a known range or fractional value. e.g. Download 75%
<p>	The <p> HTML element is a block-level element that is used to represent a paragraph or block of text separated from an adjacent block by blank lines.

HTML Elements Complete List with Example.

This is h1 Heading

This is h2 Heading

This is h3 Heading

This is h4 Heading

This is h5 Heading

This is h6 Heading

No comments:

Post a Comment