{"id":11188,"date":"2021-11-01T21:52:57","date_gmt":"2021-11-01T21:52:57","guid":{"rendered":"https:\/\/www.htmlgoodies.com\/?p=11188"},"modified":"2021-11-01T21:55:58","modified_gmt":"2021-11-01T21:55:58","slug":"ten-html-tags-for-more-modern-pages","status":"publish","type":"post","link":"https:\/\/www.htmlgoodies.com\/html\/ten-html-tags-for-more-modern-pages\/","title":{"rendered":"Ten HTML Tags for More Modern Pages"},"content":{"rendered":"
<\/p>\n
Most modern web developers dig into HTML tags as they create web pages. If you have been writing HTML for a while, then you are used to using a variety of standard tags ranging from\u00a0 and <embed><\/strong> to <table><\/strong>. Over time, however, the best tags used to obtain the most value from your HTML have changed. Indeed, HTML has evolved from being just simple markup to something that is more semantic in nature.\u00a0<\/span><\/p>\n By evolving to a more semantic paradigm, HTML markup not only indicates to a browser how to display the content of your web page, but it can also present the context<\/em>\u00a0of your markup. This context can be used to get more value from the content, whether in your own programs or by third parties, including the search engines.<\/span><\/p>\n So, what are a few of the key things in HTML that you should be using today to get the most semantic value? In the following web development tutorial, I will present 10 HTML tags that can help give your pages much more meaning.<\/span><\/p>\n While you have a body in your HTML document identified with a <body><\/strong> tag, web developers should (or could) also have header, footer, and main sections. Each of these help to organize the overall content within your HTML document.\u00a0<\/span><\/p>\n The <header><\/strong> tag is not the same thing as the <head><\/strong> tag. The <head><\/strong> tag comes before the <body><\/strong> tag and generally includes metadata that is not displayed. While it can contain other tags (including scripting), it is outside of the main HTML document\u2019s <body><\/strong> tag.<\/span><\/p>\n The <header><\/strong> tag is placed within the <body> tag. It should be used instead of a <div><\/strong> or other tag to contain the introductory content and navigational links presented in the current HTML document. This can include headings, a logo or icon for the page, and other information. Here is an example use of a header tag:<\/span>How to Modernize HTML<\/span><\/h2>\n
Expanding <Body> to Include Header, Footer, and Main Sections<\/span><\/h3>\n
\n<\/span><\/p>\n<header><\/span>\r\n\r\n\u00a0\u00a0<h1>My Page Heading<\/h1><\/span>\r\n\r\n\u00a0\u00a0<!-- My page Navigation -->\u00a0<\/span>\r\n\r\n<\/header><\/span><\/pre>\n