![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Semantic-Elements-df.jpg\")
<\/a><\/p>\nAdvantages of HTML Semantic Elements<\/h2>\n
1. Readability-<\/strong> The block of code becomes easier to read by the use of semantic elements. The semantic elements easily group similar elements together. In addition to these benefits, semantic elements also improve SEO (Search Engine Optimization). Most search engines support the use of descriptive tags and can interpret the structure of your web pages along with the content in them hence improving on the web page ranking. This can bring more people to your site and thus increase the chances of finding and sharing your content. Also, semantic elements assist in keeping a better layout or structure of the webpage in its development, thus proving essential when other developers continue on the work.<\/p>\n Below are the semantic tags in HTML which we often use:<\/p>\n This element defines a section within an HTML document. It groups similar content together with a heading. Output-<\/strong><\/p>\n We can specify independent and self-contained content using the <article> element. An article is distributed solely as opposed to the rest of the website and has its unique significance. It can be used for creating forums, blogs, and newspaper editorials. For Example<\/strong><\/p>\n Output-<\/strong><\/p>\n We can use CSS styling to explicitly style the article element.<\/p>\n Output-<\/strong><\/p>\n It is possible to nest section elements in article elements and vice-versa. As per the definition, article elements are self-contained, and section elements define a particular section, but this does not affect their nesting in an HTML document.<\/p>\n We can display the introductory content or navigational links as a container, using the <header> element. It contains the logo of a particular brand or website, the title or heading of the web-page, and information related to the ownership of the website. For Example<\/strong><\/p>\n Output-<\/strong><\/p>\n The footer of an HTML document is defined by the <footer> element. It contains information such as copyright, contact, related documents, sitemap, etc. For Example<\/strong><\/p>\n Output-<\/strong><\/p>\n The <nav> element contains the set of major links related to an HTML document. It is not necessary for all the links to be a part of the <nav> elements. For Example<\/strong><\/p>\n Output-<\/strong><\/p>\n The <aside> element contains information that may not be directly related to the web-content but is relevant to the overall website. For Example<\/strong><\/p>\n Output-<\/strong><\/p>\n
\n2. Accessibility-<\/strong> Semantic elements provide greater accessibility to assistive technologies like screen-readers and also to developers.
\n3. Consistent coding-<\/strong> With the use of semantic elements, one can easily get hold of consistent coding since the overall view of the web-page is defined by these elements.
\n4. Reusability-<\/strong> An HTML document created using semantic elements can be easily shared and reused across various developers and enterprises.<\/p>\nHTML Semantic Tags<\/h2>\n
1. <section><\/h3>\n
\nSyntax-<\/strong><\/p>\n<section><\/section>\r\n<\/pre>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n<section>\r\n<h1>DataFlair<\/h1>\r\n<p>Walking with the crowd is good. But performing outstanding in the crowd is what makes you different. This is what DataFlair aims to make its students.\r\nWe continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.<\/p>\r\n<\/section>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\n2. <article><\/h3>\n
\nSyntax-<\/strong><\/p>\n<article><\/article>\r\n<\/pre>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n<h1>Welcome to DataFlair!<\/h1>\r\n<article>\r\n <h2>About Us<\/h2>\r\n <p>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.<\/p>\r\n<\/article>\r\n<article>\r\n <h2>Vision<\/h2>\r\n <p>To provide the best training in latest cutting edge technologies across the globe and help learners carve their career.<\/p>\r\n<\/article>\r\n<article>\r\n <h2>Mission<\/h2>\r\n <p>To provide quality education at an affordable price to help everyone develop their career in the latest technologies. We aim to reach the mass through our unique pedagogy model for Self-paced learning and Instructor-led learning that includes personalized guidance, lifetime course access, 24\u00d77 support, live project, resume and interview preparation and ready to work level learning. <\/p>\r\n<\/article>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\nUse of CSS<\/h2>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.DataFlair {\r\n margin: 0;\r\n padding: 5px;\r\n background-color: #ffcccc;\r\n}\r\n\r\n.DataFlair > h1, .df {\r\n margin: 10px;\r\n padding: 5px;\r\n}\r\n\r\n.df {\r\n background: white;\r\n}\r\n\r\n.df > h2, p {\r\n margin: 4px;\r\n font-size: 90%;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<article class=\"DataFlair\">\r\n<h1>Welcome to DataFlair!<\/h1>\r\n<article class=\"df\">\r\n <h2>About Us<\/h2>\r\n <p>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.<\/p>\r\n<\/article>\r\n<article class=\"df\">\r\n <h2>Vision<\/h2>\r\n <p>To provide the best training in latest cutting edge technologies across the globe and help learners carve their career.<\/p>\r\n<\/article>\r\n<article class=\"df\">\r\n <h2>Mission<\/h2>\r\n <p>To provide quality education at an affordable price to help everyone develop their career in the latest technologies. We aim to reach the mass through our unique pedagogy model for Self-paced learning and Instructor-led learning that includes personalized guidance, lifetime course access, 24\u00d77 support, live project, resume and interview preparation and ready to work level learning. <\/p>\r\n<\/article>\r\n<\/article>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<\/a><\/p>\nNesting of <article> and <section> Elements in HTML<\/h2>\n
1. HTML <header> element<\/h3>\n
\nA single HTML document can have multiple <header> elements but we cannot place a <header> element in a <footer> or <address> element.
\nSyntax-<\/strong><\/p>\n<header><\/header><\/pre>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<\/head>\r\n<body>\r\n<article class=\"DataFlair\">\r\n<header>\r\n<h1>Welcome to DataFlair!<\/h1>\r\n<\/header>\r\n<article class=\"df\">\r\n <h2>About Us<\/h2>\r\n <p>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.<\/p>\r\n<\/article>\r\n<\/article>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\n2. HTML <footer> element<\/h3>\n
\nAn HTML document can have multiple footer elements.
\nSyntax-<\/strong><\/p>\n<footer><\/footer>\r\n<\/pre>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n<footer>\r\n <p>Posted by DataFlair<\/p>\r\n <p>Contact information: <a href=\"mailto:abc@example.com\">\r\n https:\/\/data-flair.training\/<\/a>.<\/p>\r\n<\/footer>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\n3. HTML <nav> element<\/h3>\n
\nSyntax-<\/strong><\/p>\n<nav><\/nav>\r\n<\/pre>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n<nav>\r\n <a href=\"#\">HTML<\/a> |\r\n <a href=\"#\">CSS<\/a> |\r\n <a href=\"#\">PhP<\/a> |\r\n <a href=\"#\">XML<\/a>\r\n<\/nav>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\n4. HTML <aside> element<\/h3>\n
\nIt can also be styled using CSS.
\nSyntax-<\/strong><\/p>\n<aside><\/aside>\r\n<\/pre>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\naside {\r\n width: 30%;\r\n padding-left: 15px;\r\n margin-left: 15px;\r\n float: right;\r\n font-style: italic;\r\n background-color: #ffcccc;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<p>I visited the Central Park this morning. The weather was nice, and it was amazing. I had a great time with my family!<\/p>\r\n<aside>\r\n<p>The Central Park is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.<\/p>\r\n<\/aside>\r\n<p>I visited the Central Park this morning. The weather was nice, and it was amazing. I had a great time with my family!<\/p>\r\n<p>I visited the Central Park this morning. The weather was nice, and it was amazing. I had a great time with my family!<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<\/a><\/p>\n5. HTML <figure> and <figcaption> elements<\/h3>\n