Semantic elements are one of the most significant introductions in HTML5. In the previous versions of HTML, the generic\u00a0<div>\u00a0tag with an\u00a0id\u00a0or\u00a0class\u00a0attribute was used for structuring a web page. For example, for defining sidebars, footers, menu or other structural blocks, the <div> tag was used with the corresponding meaning (div class=”footer”).<\/p>\n\n\n\n
Semantic elements in HTML have intrinsic meaning and convey that meaning both to the browser and the developer. They clearly define what kind of content they contain (for example, the\u00a0<footer>\u00a0tag is used instead of\u00a0<div id=”footer”>).<\/p>\n\n\n\n
Let\u2019s have a look at semantic elements and their meaning.<\/p>\n\n\n\n
The\u00a0<header>\u00a0element defines a header for the document or section. It usually contains a logo, search bar, navigation links, etc.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n li {\n display: inline-block;\n margin-right: 10px;\n color: #778899;\n }\n <\/style>\n <\/head>\n <body>\n <header>\n <nav>\n <ul style=\"padding:0;\">\n <li>Home<\/li>\n <li>About us<\/li>\n <\/ul>\n <\/nav>\n <h1>Welcome to our page<\/h1>\n <hr>\n <\/header>\n <article>\n <header>\n <h2>Title of the document<\/h2>\n <p>The content of the paragraph.<\/p>\n <\/header>\n <\/article>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nThe <nav> element<\/h3>\n\n\n\n
The\u00a0<nav>\u00a0element defines a block of navigation links, either within the current document or to other documents. Note, that not all links in the HTML document can be placed inside the <nav> element; it can only include major navigation blocks. For example, the <nav> tag cannot be placed in the <footer> tag for defining links in the footer of the website.<\/p>\n\n\n\n
Example of the HTML <nav> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <header>\n <h1>Programming Courses<\/h1>\n <\/header>\n <nav>\n <a href=\"\/learn-html.html\">HTML<\/a> | <a href=\"\/learn-css.html\">CSS<\/a> | <a href=\"\/learn-javascript.html\">JavaScript<\/a> | <a href=\"\/learn-php.html\">PHP<\/a> |\n <\/nav>\n <h2>Welcome to W3Docs!<\/h2>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nThe <article> element<\/h3>\n\n\n\n
The\u00a0<article>\u00a0element is used to specify an independent, self-contained content (articles, blog posts, comments, etc.). The content of the element has its meaning, and it is easily differentiated from the rest of the webpage content.<\/p>\n\n\n\n
Example of the HTML <article> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <article>\n <h1>Title of the article<\/h1>\n <p>Text of the article<\/p>\n <\/article>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
The <section> element<\/h3>\n\n\n\n
The\u00a0<section>\u00a0element is used to group standalone sections within a webpage containing logically connected content (news block, contact information etc.).<\/p>\n\n\n\n
Example of the HTML <section> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Using the section tag<\/title>\n <\/head>\n <body>\n <section>\n <h1>Hypertext markup language HTML<\/h1>\n <p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.<\/p>\n <\/section>\n <section>\n <h1>CSS<\/h1>\n <p>A formal language that is used as a description zone, formatting the appearance of a web page written with the help of markup languages HTML and XHTML but it can be applied to any XML-document, for example, to SVG or XUL.<\/p>\n <\/section>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
The <aside> element<\/h3>\n\n\n\n
The\u00a0<aside>\u00a0element defines a section with additional information related to the content around the <aside> element. It is generally used to enhance an article with additional information, or highlight the parts that can be interesting to the user.<\/p>\n\n\n\n
Example of the HTML <aside> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <p>I like watching Game of Thrones.<\/p>\n <aside>\n <h4>Game of Thrones<\/h4>\n <p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels<\/p>\n <\/aside>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
The <footer> element<\/h3>\n\n\n\n
The\u00a0<footer>\u00a0element defines the footer of a web page or a section. As a rule, it contains copyright information, contact details, navigation links, etc.<\/p>\n\n\n\n
Example of the HTML <footer> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n .header {\n height: 40px;\n padding: 20px 20px 0;\n background: #e1e1e1;\n }\n .main-content {\n height: 60vh;\n padding: 20px;\n }\n footer {\n padding: 10px 20px;\n background: #666;\n color: white;\n }\n a {\n color: #00aaff;\n }\n <\/style>\n <\/head>\n <body>\n <div class=\"header\">Header \/ Menu<\/div>\n <div class=\"main-content\">\n <h1>Main content<\/h1>\n <p>This is some paragraph. <\/p>\n <\/div>\n <footer>\n <p>Company \u00a9 W3docs. All rights reserved.<\/p>\n <\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
The <address> element<\/h3>\n\n\n\n
The\u00a0<address>\u00a0element is used to provide contact information of the author or the owner of an article, document or the website.<\/p>\n\n\n\n
Example of the HTML <address> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <address>\n Author: W3docs Team<br \/>\n <a href=\"mailto:info@w3docs.com\">Send Mail to the Author<\/a>\n <\/address>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
The <main> element<\/h3>\n\n\n\n
The\u00a0<main>\u00a0element defines the main content of the page. The content of the <main> tag must be unique and not duplicate blocks of the same type that are repeated in other documents, such as the header of a site, footer, menu, search, copyright information, etc.<\/p>\n\n\n\n
Example of the HTML <main> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <main>\n <h1>Programming languages<\/h1>\n <p>Languages HTML and CSS are intended for site layout.<\/p>\n <article>\n <h2>HTML<\/h2>\n <p> HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages. <\/p>\n <p>... <\/p>\n <p>... <\/p>\n <\/article>\n <article>\n <h2>CSS<\/h2>\n <p>CSS is a language of styles, defining the display of HTML documents. <\/p>\n <p>... <\/p>\n <\/article>\n <\/main>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
The <figure> element<\/h3>\n\n\n\n
The\u00a0<figure>\u00a0element is used for indicating self-contained content. The tag can include images, diagrams, illustrations, code examples, etc.<\/p>\n\n\n\n
Example of the HTML <figure> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <p>A cute baby<\/p>\n <figure>\n <img src=\"\/uploads\/media\/default\/0001\/01\/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg\" alt=\"A Cute Baby\" width=\"250\" height=\"200\">\n <\/figure>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
The <figcaption> element<\/h3>\n\n\n\n
The\u00a0<figcaption>\u00a0element is used for adding signature or annotation to the <figure> tag.<\/p>\n\n\n\n
Example of the HTML <figcaption> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <p>Image of a baby<\/p>\n <figure>\n <img src=\"\/uploads\/media\/default\/0001\/01\/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg\" alt=\"A Cute Baby\" width=\"250\" height=\"200\">\n <figcaption>Fig.1 \u2013 Cute baby<\/figcaption>\n <\/figure>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
The <time> element<\/h3>\n\n\n\n
The\u00a0<time>\u00a0element defines a human-readable time on a 24-hour clock or a precise date in the Gregorian calendar.<\/p>\n\n\n\n
Example of the HTML <time> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document.<\/title>\n <\/head>\n <body>\n <p>The game will be held on<time datetime=\"2018-09-28 19:00\">September 28<\/time>.<\/p>\n <p>It will start at <time>19:00<\/time><\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
The <mark> element<\/h3>\n\n\n\n
The\u00a0<mark>\u00a0element is used to mark a part of the text which has relevance. It can be used to highlight a text for showing emphasis, highlight search terms in search results to provide context, or distinguish a new content added by the user by showing it differently.<\/p>\n\n\n\n
Example of the HTML <mark> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <p>Learn HyperText markup language (HTML) on <mark>W3Docs.com<\/mark> website.<\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
The <bdi> element<\/h3>\n\n\n\n
The\u00a0<bdi>\u00a0element is used to isolate bidirectional text when a language with a right-to-left directionality, such as Arabic or Hebrew, is used inline with left-to-right languages.<\/p>\n\n\n\n
Example of the HTML <bdi> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the documnet<\/title>\n <\/head>\n <body>\n <h1> Example of using the bdi element <\/h1>\n <p dir=\"ltr\"><bdi>\u0623\u0631\u0645\u064a\u0646\u064a\u0627 \u062c\u0645\u064a\u0644\u0629<\/bdi> This sentence in Arabic is automatically displayed from right to left.<\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
The <wbr> element<\/h3>\n\n\n\n
The\u00a0<wbr>\u00a0tag is used to instruct the browser, where a line-break could be added in the text. Unlike the <br> tag, which obliges the browser to insert a line-break, in the case of <wbr> the browser first analyzes its content, and then inserts a line-break if necessary (too long word or URL address).<\/p>\n\n\n\n
Example of the HTML <wbr> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <p>Example of a long string of text without wbr.<\/p>\n <p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis<\/p>\n <p>Example of a long string of text with wbr.<\/p>\n <p>This is the longest word you can ever meet in the English language pneumono<wbr>ultra<wbr>micro<wbr>scopic<wbr>silico<wbr>volcano<wbr>coniosis<\/p>\n <\/p>\n <\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Semantic elements are one of the most significant introductions in HTML5. In the previous versions of HTML, the generic\u00a0<div>\u00a0tag with an\u00a0id\u00a0or\u00a0class\u00a0attribute was used for structuring a web page. For example, for defining sidebars, footers, menu or other structural blocks, the <div> tag was used with the corresponding meaning (div class=”footer”). Semantic elements in HTML have […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[425],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/8479"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=8479"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/8479\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=8479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=8479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=8479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}