<footer><\/code><\/td>Bottom area of page\/section<\/td> Copyright, links, author info<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nNow compare that to non-semantic tags:<\/p>\n\n\n\nNon-Semantic Tag<\/strong><\/th>Issue<\/strong><\/th><\/tr><\/thead><div><\/code><\/td>Doesn\u2019t convey meaning to browser or screen reader<\/td><\/tr> <span><\/code><\/td>Inline, but purely for styling \u2013 not structure<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nUsing semantic tags not only helps bots and browsers\u2014but also humans. Code becomes easier to read and edit later on.<\/p>\n\n\n\n
Here’s an overview of the HTML5 page structure will be presented at the end of this article.<\/p>\n\n\n\n
<!doctype html>\n<!-- This line declare the document is in HTML5 -->\n<html lang=\"en\">\n <!--You can declare language of the html document -->\n <head>\n <!-- Head tag open -->\n <!-- Meta tags of the document -->\n <meta charset=\"UTF-8\" \/>\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>Document<\/title>\n <meta name=\"description\" content=\"Hello World, This is example\" \/>\n <!-- Source element of the website -->\n <style>\n \/* add style for all tags *\/\n a,\n abbr,\n address,\n area {\n text-align: center;\n }\n <\/style>\n <\/head>\n <!-- Head tag close -->\n <!-- body Tag start, contain body items -->\n <body>\n <!-- Main navigation in the header section, you can use header tag can directly use nav tag -->\n <header>\n <nav>Navigational Item here like menu.<\/nav>\n <\/header>\n <!-- main item of the page will start with main tag, this tag doesn't include aside or sidebar elements. -->\n <main>\n <!-- article tag gives signal to search engine about the main article. -->\n <article> \n <header>\n <h1>Heading of the content<\/h1>\n <\/header>\n <h2>Add a subheading<\/h2>\n <!-- Add media, content etc -->\n <\/article>\n <\/main>\n <!-- aside will start just after main element, this tag use for sidebar elements. -->\n <aside>sidebar element goes here<\/aside>\n <!-- after aside tag, use footer tags to define footer items in a page. -->\n <footer>footer section of the website<\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nYou can use the tags below to make your webpage search engine friendly. We highlight each tag with its structure, and at the end, we finalize the structure that one should follow. We have divided each section element into parts to clarify how to use these HTML5 Tags.<\/p>\n\n\n\n
This is a detailed overview of HTML5 tags but let’s understand each and every tag with examples. So that you can imply the best practice of HTML5 tags in your website and enhance website SEO.<\/p>\n\n\n\n
<\/span>The <main><\/code> Tag in HTML5<\/span><\/h2>\n\n\n\nThe <main><\/code> element is one of the most important semantic tags introduced in HTML5. It represents the primary content area of a web page<\/strong> \u2014 the part that is unique and directly related to the central topic or functionality of that specific page.<\/p>\n\n\n\nThis is the section users come to see when they visit your page, whether it\u2019s a blog post, a product listing, a contact form, or a portfolio.<\/p>\n\n\n\n
When and Why to Use <main><\/code><\/h3>\n\n\n\n\nUse <main><\/code> once per page.<\/strong><header><\/code>, <footer><\/code>, <article><\/code>, <aside><\/code>, or <nav><\/code>.Ideal for screen readers and accessibility.<\/strong>Helps with SEO and content structure.<\/strong><main><\/code> element to focus on indexing the most important part of your page. That can improve relevance and keyword targeting.<\/li>\n<\/ul>\n\n\n\nExample of <main><\/code> in Use<\/strong><\/p>\n\n\n\nHere\u2019s how you might use the <main><\/code> tag in a simple layout:<\/p>\n\n\n\n<body>\n <header>\n <h1>My Website<\/h1>\n <nav>\n <!-- Navigation links -->\n <\/nav>\n <\/header>\n\n <main>\n <h2>Welcome to Our Homepage<\/h2>\n <p>This is where we highlight our services, team, and mission.<\/p>\n <\/main>\n\n <aside>\n <h3>Latest News<\/h3>\n <p>Upcoming events and updates.<\/p>\n <\/aside>\n\n <footer>\n <p>© 2025 My Company<\/p>\n <\/footer>\n<\/body>\n<\/code><\/pre>\n\n\n\nIn this example:<\/strong><\/p>\n\n\n\n\nThe header contains the logo and navigation.<\/li>\n\n\n\n The <main><\/code> tag wraps the unique content for that page.<\/li>\n\n\n\nThe <aside><\/code> adds extra information not essential to the page\u2019s main focus.<\/li>\n\n\n\nThe footer contains the copyright.<\/li>\n<\/ul>\n\n\n\nWhat Should Go Inside <main><\/code>?<\/h3>\n\n\n\nYou can include other semantic elements inside <main><\/code>, like:<\/p>\n\n\n\n\n<article><\/code> for blog posts or independent content pieces<\/li>\n\n\n\n<section><\/code> for organizing related groups of content<\/li>\n\n\n\n<figure><\/code> and <figcaption><\/code> for media and illustrations<\/li>\n<\/ul>\n\n\n\nBut remember: the <main><\/code> itself should not<\/strong> include the navigation, headers, footers, or sidebars \u2014 those belong elsewhere.<\/p>\n\n\n\nWhen Not to Use <main><\/code><\/h3>\n\n\n\nAvoid using <main><\/code> on pages that don\u2019t have meaningful content \u2014 like a simple redirect page or a blank placeholder. Also, don\u2019t use it more than once per page; that would defeat its purpose and reduce semantic clarity.<\/p>\n\n\n\nThe <main><\/code> tag is essential for writing clean, well-structured, and accessible HTML. It tells both users and search engines: “This is the most important part of the page.”<\/p>\n\n\n\nBy consistently using <main><\/code> to wrap your central content, you’re helping:<\/p>\n\n\n\n\nSearch engines understand your site better<\/li>\n\n\n\n Screen readers navigate your pages efficiently<\/li>\n\n\n\n Yourself and your team keep code cleaner and easier to maintain<\/li>\n<\/ul>\n\n\n\n<\/span>The <article><\/code> Tag in HTML5<\/span><\/h2>\n\n\n\nIn simple terms, the <article><\/code> tag is used in HTML5 to mark independent pieces of content<\/strong>. Think of an article like a self-contained block of information that makes sense on its own<\/strong>\u2014even if it\u2019s removed from the rest of the page.<\/p>\n\n\n\nIt could be a:<\/p>\n\n\n\n