{"id":78501,"date":"2020-06-23T09:00:28","date_gmt":"2020-06-23T03:30:28","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=78501"},"modified":"2024-07-26T15:33:10","modified_gmt":"2024-07-26T10:03:10","slug":"html-elements","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/html-elements\/","title":{"rendered":"HTML Elements to Grasp HTML Programming"},"content":{"rendered":"

Welcome to DataFlair HTML Tutorial.<\/strong> In this article, we will learn about HTML elements that will help in mastering the HTML Programming Language.<\/p>\n

\"HTML<\/a><\/p>\n

HTML Elements<\/h2>\n

HTML elements are defined with a starting tag, some content and an ending tag. This whole, together, is known as an HTML element.<\/p>\n

For example,
\n<p>This is a paragraph<\/p><\/p>\n

Here, everything from <p> to <\/p> is an HTML element, where <p> is the starting tag and <\/p> the ending tag.<\/p>\n

If there is no content within an HTML element, it is known as an empty tag, for example, <br>(line break), <hr>(horizontal rule), etc. In the following article, we\u2019ll look at some commonly used HTML elements.<\/p>\n

Nested HTML Elements<\/h2>\n

HTML elements can be contained within other HTML elements. For example,<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<h1>Heading<\/h1>\r\n<p>Paragraph<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Here,<\/p>\n
    \n
  • The <html> tag is the root element and has a starting tag,<html>, and an ending tag,<\/html>,and all the other elements reside within this element.<\/li>\n
  • The <body> tag contains all the content to be displayed on the web-page. It contains two other elements-<h1>(heading) and <p>(paragraph). It is a container element with <body> as the starting tag and <\/body> as the ending tag.<\/li>\n
  • <h1> element defines the heading tag.<\/li>\n
  • <p> element defines the paragraph tag. Though, <p> works even without an ending tag <\/p> i .e.<\/li>\n<\/ul>\n
    <!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<p>Paragraph1\r\n<p>Paragraph2\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
    This would also generate the same output which means, for some HTML elements like <p>,the ending tag is optional. It is recommended to always use the ending tags for container elements in order to escape the unexpected errors.<\/p>\n
    HTML Empty Elements<\/h2>\n
    HTML elements with only starting tag and no content are known as empty HTML elements, as discussed in the previous articles. Though, you can use ending tags to close these elements as well, but it is not recommended to do so.<\/p>\n
    For example:<\/strong>
    \nThe <br> tag, used as line break can be ended with <\/br>.<\/p>\n
    Other examples of HTML\u2019s empty tags are:
    \n<hr>,<link>,<input>,<img>,etc.<\/p>\n
    These will be discussed in detail in the upcoming articles.<\/p>\n
    Therefore, there is a distinction between the container elements and empty elements as both play entirely different roles in HTML. Container elements contain other content and is used to set up the structure of the webpage while empty elements oftentimes have content all to itself and is used for actions or breaks in the content.<\/p>\n
    Understanding these distinctions will be useful in writing better HTML and cleaner code in general.<\/p>\n
    Case Sensitivity<\/h3>\n
    HTML is not a case-sensitive language i.e. <HTML> would be treated the same as <html>. However, as per the W3C recommendation, lower case is followed.<\/p>\n
    Commonly Used HTML Elements<\/h2>\n
    Now we will discuss some commonly used HTML elements in brief.<\/p>\n
    HTML Document\u2019s Metadata<\/h3>\n
    Metadata has the important information related to the HTML document. The metadata contains details regarding the scripts, styles and other data which helps the browser to render pages. The examples are:<\/p>\n\n\n\n\n\n\n\n\n\n
    HTML Element<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
    <head><\/span><\/td>\nIt contains document\u2019s metadata such as its scripts,style,titles,links,etc.<\/span><\/td>\n<\/tr>\n
    <title><\/span><\/td>\nIt contains the title of the web-page, as it would appear on the tab.<\/span><\/td>\n<\/tr>\n
    <base><\/span><\/td>\nAll the links on a web-page will be rendered to a default web-page whose URL is specified in the <base> element.<\/span><\/td>\n<\/tr>\n
    <style><\/span><\/td>\nThe styling of the document i.e single HTML page or a part of it is specified in the <style> element.<\/span><\/td>\n<\/tr>\n
    <link><\/span><\/td>\nThis element is used to link the current HTML document with some other page i.e. frequently used to link style sheets.<\/span><\/td>\n<\/tr>\n
    <meta><\/span><\/td>\nThis element is used to specify all the meta-data that is not defined by the other tags such as charset, author, etc.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    HTML Sectioning Root<\/h3>\n\n\n\n\n
    HTML Element<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
    <body><\/span><\/td>\nThe <body> element contains all the content to be displayed on the web-page.There is only one body element in an HTML page.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Document Sectioning in HTML<\/h3>\n
    Document sectioning elements enable the developers to create sections in their documents. These may be headers, footers, divisions, navigation bars, etc.<\/p>\n\n\n\n\n\n\n\n\n\n
    HTML Element<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
    <article><\/span><\/td>\nIt represents the independent content of a web page. It is reusable i.e. it can be used independently from the rest of the site. For example- News story, Blog post, comment.<\/span><\/td>\n<\/tr>\n
    <aside><\/span><\/td>\nThis contains the content which is slightly related to the primary content, or acts as a highlighter to the main intent. Usually it contains references, details of the author, related content,etc.<\/span><\/td>\n<\/tr>\n
    <header><\/span><\/td>\nIt contains the introductory content, table of contents or important navigation links related to the web-page. It is possible to have several <header> elements in one document.<\/span><\/td>\n<\/tr>\n
    <footer><\/span><\/td>\nIt contains the footer for the document and information such as copyright information, related documents, contact information.<\/span><\/td>\n<\/tr>\n
    <nav><\/span><\/td>\n\u00a0This defines a set of important navigation links used within a document.<\/span><\/td>\n<\/tr>\n
    <section><\/span><\/td>\nIt provides a division of content within the document in terms of chapters, footers,headers,etc.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    HTML Content Sectioning<\/h3>\n
    These elements are used for sectioning the content within the <body> tag and provide a proper logical structure to the content.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n
    HTML Element<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
    <figure><\/span><\/td>\nIt represents self-contained content such as graphics,image,illustrations. Its position is independent of the main flow and is referred to as a single unit. For example, <figure> tag can be used to mark up an image.<\/span><\/td>\n<\/tr>\n
    <figcaption><\/span><\/td>\nIt is used to assign a caption to a <figure> element. For example, an image can be marked up using the <figure> element and <figcaption> can be used to assign a caption to it.<\/span><\/td>\n<\/tr>\n
    <hr><\/span><\/td>\nThe <hr>, Horizontal Rule, tag is used to demarcate the contents in a web-page using a horizontal line.<\/span><\/td>\n<\/tr>\n
    <ol>,<ul>,<li><\/span><\/td>\nIn HTML, the <ul>(unordered list) and <ol>(ordered list) tags are used to achieve this purpose. These tags are followed by <li> tags to specify the contents of the list.<\/span><\/td>\n<\/tr>\n
    <pre><\/span><\/td>\nThe <pre> tag of HTML allows the developers to display the text in the same format i.e. spaces, tabs, line breaks, etc as written in the code.<\/span><\/td>\n<\/tr>\n
    <div><\/span><\/td>\nThis element creates a logical container within the HTML document but does not represent anything. Instead it is used to organize similar content together so that they can be styled with CSS or may be used with JavaScript.<\/span><\/td>\n<\/tr>\n
    <dl>,<dt>,<\/span><\/p>\n
    <dd><\/span><\/td>\n
    		<dl> element contains the definition list i.e. <dt>(term) and <dd>(definition of each term).\u00a0<\/span><\/td>\n<\/tr>\n
    <blockquote><\/span><\/td>\nIt is useful for representing some content that has been referenced from some other web-page. It is usually indented by the browser and is defined using its \u2018cite\u2019 attribute.<\/span><\/td>\n<\/tr>\n
    <main><\/span><\/td>\nThis element contains the main and most important part of the document that specifies the functionality and goals of the entire web-page. There is only one main element and it is not a descendent of any other element. Also, the content within this element is unique and not repeated.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Multimedia and Images in HTML<\/h3>\n
    We use these HTML tags to add multimedia i.e. audio and video, and images to the web-page.<\/p>\n\n\n\n\n\n\n\n\n
    HTML Element<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
    <img><\/span><\/td>\nIn order to render images onto the web page, the <img> tag is used. The <\/span><img><\/span> tag creates a space for the image that has been referenced using the src attribute.<\/span><\/td>\n<\/tr>\n
    <audio><\/span><\/td>\nIt is useful for adding audio to the web-page.<\/span><\/td>\n<\/tr>\n
    <map>,<area><\/span><\/td>\n<map> defines an image-map i.e. an image with particular links in it. The <area> element defines these clickable areas within the map. The <area> elements are always embedded inside <map> elements.<\/span><\/td>\n<\/tr>\n
    <video><\/span><\/td>\nThis element is useful to add video to the web page. The supported formats are MP4,WebM and Ogg.<\/span><\/td>\n<\/tr>\n
    <track><\/span><\/td>\nIt is to specify additional files related to multimedia files i.e. text that should appear when a particular audio or video is playing. Example-captions or subtitles.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    HTML Scripts<\/h3>\n
    These HTML elements add dynamism to the web pages that can be achieved using JavaScript(predominantly) or other scripting languages such as JSP, PhP, Perl, Python, etc.<\/p>\n\n\n\n\n\n\n
    HTML Element<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
    <script><\/span><\/td>\nThis element contains the code which may be either written directly or referenced from.<\/span><\/td>\n<\/tr>\n
    <noscript><\/span><\/td>\nThis element contains the code in HTML that must be executed by default if the added scripting doesn\u2019t work or has stopped inevitably.<\/span><\/td>\n<\/tr>\n
    <canvas><\/span><\/td>\nIt is a container for graphics and is used for rendering dynamic graphics such as graphs or shapes onto the fly. It is used along with a scripting language,and is being widely used in game development.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    HTML Embedded Content<\/h3>\n
    Other than multimedia, other content such as those from external resources can also be embedded on to the HTML documents. These are defined by the following elements.<\/p>\n\n\n\n\n\n\n\n\n
    HTML Element<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
    <embed><\/span><\/td>\nThe <embed> tag is used to add plug-ins to the browser i.e. programs that extend the browser\u2019s functionality. For example,Java Applets, Maps,etc.<\/span><\/td>\n<\/tr>\n
    <iframe><\/span><\/td>\n<iframe> or Inline Frame Element is used to insert another web-page into the current HTML web-page.<\/span><\/td>\n<\/tr>\n
    <object><\/span><\/td>\nThis element is used to embed an external resource which can be a web page,image, multimedia or a plug-in.<\/span><\/td>\n<\/tr>\n
    <param><\/span><\/td>\nThis tag contains the parameters for plug-in applications in the <object> element.<\/span><\/td>\n<\/tr>\n
    <picture>,<source><\/span><\/td>\nThe <picture> element contains a set of images or audios or videos, that are scalable according to the device\u2019s viewport. These sources are specified using the <source> element and one <img> element. The first preference that matches the attribute \u2018srcset\u2019 of the <source> tag is rendered by the browser.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    HTML Table Elements<\/h3>\n
    These HTML elements are useful for creating table and handling its data as below:<\/p>\n\n\n\n\n\n\n\n\n\n\n
    HTML Element<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
    <caption><\/span><\/td>\nThis element is used to define the title of the table and is put immediately after the <table> tag.<\/span><\/td>\n<\/tr>\n
    <table><\/span><\/td>\nThis element is the root for creating a table i.e. a 2-D figure comprising rows and columns with data.<\/span><\/td>\n<\/tr>\n
    <colgroup>,<col><\/span><\/td>\nThe <colgroup> element is used to group a set of columns together in order to avoid the repeated formatting. It contains\u00a0 <col> elements which are used to define a particular column and specify its semantics.<\/span><\/td>\n<\/tr>\n
    <thead>,<tbody>,<tfoot><\/span><\/td>\nThese elements specify the header, body and footer of the HTML tables.<\/span><\/td>\n<\/tr>\n
    <td><\/span><\/td>\nWe use it to specify the data within the columns of the table.<\/span><\/td>\n<\/tr>\n
    <th><\/span><\/td>\nIt is useful to define the header column in a table.<\/span><\/td>\n<\/tr>\n
    <tr><\/span><\/td>\nWe use it to define rows within a HTML table.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    HTML Forms<\/h3>\n
    HTML elements used for creating and handling forms in HTML are defined below.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Elements<\/strong><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
    <form><\/span><\/td>\nThis element is for the creation of forms in order to take inputs from the users.<\/span><\/td>\n<\/tr>\n
    <input><\/span><\/td>\nIn order to take inputs from the users, the <input> elements are used where the user can input the data. It could be of various types,text,checkbox,radio buttons,etc.<\/span><\/td>\n<\/tr>\n
    <label><\/span><\/td>\nWe use it to define the caption of a particular input type i.e. whenever the mouse click will be focussed by the users on the input types, these labels will be read.<\/span><\/td>\n<\/tr>\n
    <datalist><\/span><\/td>\nThis element is to list predefined options, so that the user can easily choose an input.<\/span><\/td>\n<\/tr>\n
    <fieldset><\/span><\/td>\nIn order to group similar elements within a form, we use <fieldset> element in HTML. It draws a box around these items.<\/span><\/td>\n<\/tr>\n
    <legend><\/span><\/td>\nThis element is to specify a caption for the elements in <fieldset> element.<\/span><\/td>\n<\/tr>\n
    <meter><\/span><\/td>\nIt is for representing a scalar or a fractional value within a given range.<\/span><\/td>\n<\/tr>\n
    <optgroup><\/span><\/td>\nThis element is for grouping similar items within a given drop-down list created using a <select> element.<\/span><\/td>\n<\/tr>\n
    <option><\/span><\/td>\nThis element is for specifying the data contained within the <optgroup>,<select> and <datalist> element.<\/span><\/td>\n<\/tr>\n
    <output><\/span><\/td>\nThe <output> element contains the result given by some calculation or actions performed by the user.<\/span><\/td>\n<\/tr>\n
    <progress><\/span><\/td>\nThe <progress> element displays a bar that shows the completion of specific tasks.\u00a0<\/span><\/td>\n<\/tr>\n
    <select><\/span><\/td>\nIt is a form control used to create a drop-down list,from which the user can select from the options available.<\/span><\/td>\n<\/tr>\n
    <textarea><\/span><\/td>\nProvides the users with a typing space wherein they can write some multi-line text, such as feedback,address,etc.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Studying and understanding the basic HTML elements and their proper application would go a long way in reaching great achievements in web page designing. All the elements have unique functions and significantly impact the structure and functionality of any webpage. Knowledge and understanding of those aspects will enable the candidate to build a solid foundation on the web technologies.<\/p>\n
    HTML Text Semantics<\/h3>\n
    These HTML elements are used for the inline styling of text in the HTML document.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    HTML Element<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
    <a><\/span><\/td>\nThe <a>,anchor, tag is used to create hyperlinks within a web-page. On clicking these links, the control is transferred to another web-page. The href attribute specifies the destination of the link.<\/span><\/td>\n<\/tr>\n
    <b><\/span><\/td>\nUsed to bold the contents of a particular text.\u00a0<\/span><\/td>\n<\/tr>\n
    <abbr><\/span><\/td>\nThis element specifies the usage of an abbreviation within the HTML document.<\/span><\/td>\n<\/tr>\n
    <br><\/span><\/td>\nThe line-break tag <br> is an empty container tag to break lines i.e. it ends the current line and continues with the content on the next line.<\/span><\/td>\n<\/tr>\n
    <i><\/span><\/td>\nThis element is useful to italicize a particular content.<\/span><\/td>\n<\/tr>\n
    <bdi><\/span><\/td>\n<bdi> stands for bi-directional isolation and the text contained within its tags is isolated from the other surrounding text. It takes bi-directional algorithm into account.<\/span><\/td>\n<\/tr>\n
    <bdo><\/span><\/td>\n<bdo> stands for bi-directional text override and it overrides the current directionality of the text within its tags.<\/span><\/td>\n<\/tr>\n
    <cite><\/span><\/td>\nThis element specifies the title of some work that has been taken as a reference. It must include the title of the work.<\/span><\/td>\n<\/tr>\n
    <code><\/span><\/td>\nThis element is useful to insert computer codes within an HTML document.<\/span><\/td>\n<\/tr>\n
    <data><\/span><\/td>\nIt specifies the machine-readable translation of a particular content along with its layman translation.<\/span><\/td>\n<\/tr>\n
    <em><\/span><\/td>\nThis element is for emphasizing a particular content.<\/span><\/td>\n<\/tr>\n
    <q><\/span><\/td>\nThis element is to specify that a given content has been quoted and is usually rendered with quotation marks.\u00a0<\/span><\/td>\n<\/tr>\n
    <time><\/span><\/td>\n\u00a0It is for representing the time.<\/span><\/td>\n<\/tr>\n
    <var><\/span><\/td>\nThis element defines a variable in mathematical or programming semantics.<\/span><\/td>\n<\/tr>\n
    <span><\/span><\/td>\nThis element marks a particular part of the document or text. We usually use it to style the content with CSS or perform actions using JavaScript.<\/span><\/td>\n<\/tr>\n
    <sub><\/span><\/td>\nIt displays the content in subscript.<\/span><\/td>\n<\/tr>\n
    <sup><\/span><\/td>\nThis displays the content in superscript.<\/span><\/td>\n<\/tr>\n
    <strong><\/span><\/td>\nIt displays the content in a manner such that it appears as important.<\/span><\/td>\n<\/tr>\n
    <u><\/span><\/td>\nIt is for underlining text that may be mis-spelled or is different from the other texts.<\/span><\/td>\n<\/tr>\n
    <ruby><\/span><\/td>\nThese elements specify the text in Ruby annotations i.e. East Asian Characters.<\/span><\/td>\n<\/tr>\n
    <rt><\/span><\/td>\nThis element is contained within the <ruby> element and contains the Ruby text.<\/span><\/td>\n<\/tr>\n
    <rp><\/span><\/td>\nFor browsers that do not display ruby annotations,the <rp> element is used to display a fall-back parenthesis.<\/span><\/td>\n<\/tr>\n
    <rb><\/span><\/td>\nThe <rb> element is used to demarcate or separate the base text defined in ruby.<\/span><\/td>\n<\/tr>\n
    <rtc><\/span><\/td>\nThe HTML Ruby Text Container, contains the semantic annotations defined in Ruby.<\/span><\/td>\n<\/tr>\n
    <wbr><\/span><\/td>\n<wbr> or word-break opportunity is used to specify where in a specific text, it would be alright to add line breaks i.e. provide appropriate opportunities.<\/span><\/td>\n<\/tr>\n
    <small><\/span><\/td>\nThis element is for defining small texts to add comments, notes, copyright, etc.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    HTML Interactive Elements<\/h3>\n
    In order to make the web-page dynamic or create interactive user-interface, we use the following HTML elements:<\/p>\n\n\n\n\n\n\n\n
    HTML Elements<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
    <summary><\/span><\/td>\nIt is used within the <details> element and provides a summary to the user. It is usually hidden but when clicked by the user, it becomes visible.<\/span><\/td>\n<\/tr>\n
    <details><\/span><\/td>\nThis element is for creating a widget, containing text, that the user can toggle between, as per his preference.<\/span><\/td>\n<\/tr>\n
    <dialog><\/span><\/td>\nIt is useful to create a dialog box or any other interactive component, such as a sub-window.<\/span><\/td>\n<\/tr>\n
    <menu><\/span><\/td>\nThis element contains a list of actions or commands that can be performed by the user. The menu could be either on top of the screens or implicit with specific buttons,after they have been clicked.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Demarcation in HTML<\/h3>\n
    These elements are for indicating that a particular part of the document has been manipulated or altered.<\/p>\n\n\n\n\n\n
    HTML Elements<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
    <ins><\/span><\/td>\nThis element specifies and\u00a0 insert a particular content onto the web-page.<\/span><\/td>\n<\/tr>\n
    <del><\/span><\/td>\nIt specifies deleted content from the document.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    HTML Web Components<\/h3>\n\n\n\n\n\n
    HTML Elements<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
    <slot><\/span><\/td>\nThis element contains a placeholder wherein the users can add their own mark up, create their own DOM tree and present them.<\/span><\/td>\n<\/tr>\n
    <template><\/span><\/td>\nThis element is to halt the rendering of an HTML page as and when it is loaded. It is useful to render the page later during run-time using JavaScript.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Summary<\/h2>\n
    In this article, we\u2019ve seen the difference between container and empty tags and the basic definition of HTML elements. We\u2019ve gone through some of the basic HTML elements to carry out tasks such as document sectioning, context sectioning, creation and manipulation of tables, forms, images, multimedia, etc. In the following articles, brighter light would be thrown on these elements and their intrinsic details will be studied.<\/p>\n
    So stay with DataFlair to Master HTML!!!!\u00a0<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
    Welcome to DataFlair HTML Tutorial. In this article, we will learn about HTML elements that will help in mastering the HTML Programming Language. HTML Elements HTML elements are defined with a starting tag, some...<\/p>\n","protected":false},"author":10,"featured_media":78613,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22400],"tags":[22441,22443,22439,22440,22442,22444],"class_list":["post-78501","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-demarcation-in-html","tag-html-documents","tag-html-elements","tag-html-nested-elements","tag-html-table","tag-html-web-components"],"yoast_head":"\nHTML Elements to Grasp HTML Programming - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn what are HTML elements and their types, Nested elements, Empty Elements. Learn some commonly used HTML elements with their description.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/html-elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Elements to Grasp HTML Programming - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn what are HTML elements and their types, Nested elements, Empty Elements. Learn some commonly used HTML elements with their description.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/html-elements\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-23T03:30:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-26T10:03:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-elements.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Elements to Grasp HTML Programming - DataFlair","description":"Learn what are HTML elements and their types, Nested elements, Empty Elements. Learn some commonly used HTML elements with their description.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/html-elements\/","og_locale":"en_US","og_type":"article","og_title":"HTML Elements to Grasp HTML Programming - DataFlair","og_description":"Learn what are HTML elements and their types, Nested elements, Empty Elements. Learn some commonly used HTML elements with their description.","og_url":"https:\/\/data-flair.training\/blogs\/html-elements\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2020-06-23T03:30:28+00:00","article_modified_time":"2024-07-26T10:03:10+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-elements.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/html-elements\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/html-elements\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33"},"headline":"HTML Elements to Grasp HTML Programming","datePublished":"2020-06-23T03:30:28+00:00","dateModified":"2024-07-26T10:03:10+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-elements\/"},"wordCount":3154,"commentCount":2,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-elements.jpg","keywords":["demarcation in html","html documents","HTML Elements","html nested elements","html table","html web components"],"articleSection":["HTML Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/html-elements\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/html-elements\/","url":"https:\/\/data-flair.training\/blogs\/html-elements\/","name":"HTML Elements to Grasp HTML Programming - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-elements\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-elements.jpg","datePublished":"2020-06-23T03:30:28+00:00","dateModified":"2024-07-26T10:03:10+00:00","description":"Learn what are HTML elements and their types, Nested elements, Empty Elements. Learn some commonly used HTML elements with their description.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/html-elements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/html-elements\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/html-elements\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-elements.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-elements.jpg","width":1200,"height":628,"caption":"HTML elements"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/html-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"HTML Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/html\/"},{"@type":"ListItem","position":3,"name":"HTML Elements to Grasp HTML Programming"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"The DataFlair Team is passionate about delivering top-notch tutorials and resources on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. With expertise in the tech industry, we simplify complex topics to help learners excel. Stay updated with our latest insights.","url":"https:\/\/data-flair.training\/blogs\/author\/dfadteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=78501"}],"version-history":[{"count":5,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78501\/revisions"}],"predecessor-version":[{"id":142953,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78501\/revisions\/142953"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/78613"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=78501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=78501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=78501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}