A semantic HTML element is an element which has its meaning clearly defined to both the browser and the developer. By merely looking at a semantic element or tag you can tell its function. In this example we will learn about HTML5 semantic elements.
\n
\n
\n
\n
\n
\n
\n
\n[ulp id=’tgm4cmEWcKUikZNn’]
\n
\nFor this example we will use:<\/p>\n
Semantics, to put it simply, is the study of meanings. According to the definition by W3C\u00a0a semantic element clearly describes its meaning to both the browser and the developer.
\nSemantic tags or elements have been before the advent of HTML5. Elements like table(< table >) image ( < img > ) are semantic elements, by merely looking at the names of the tags you have an idea of their respective functions.<\/p>\n
Examples of non semantic elements are div(< div >) and span (< span >). They tell us nothing about their contents. Semantic tags or elements make it easy for developers and computers to easily understand your mark up.
\nLet’s look at some HTML5 semantic tags.<\/p>\n
The header tag defines the header for a document or section. It is used to hold introductory content. It is also valid to have several header tags in your HTML document. A header tag usually contains a heading element(< h1> – <h2>). A <header> tag cannot be placed within a <footer> or another <header> element.
\nThe syntax for the header tag is below.<\/p>\n
< header>\r\n<\/header>\r\n<\/pre>\nAn example below.<\/p>\n
index.html<\/em><\/span><\/p>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> \r\nHtml5 Semantic Elements Example\r\n<\/title>\r\n\r\n\t<\/head>\r\n\t<body>\r\n\u00a0<header>\r\n\u00a0<h1>\r\nOnclick Event Attribute\r\n<\/h1>\r\nThe onclick event occurs when the user clicks on an element. When a user clicks on an element with the mouse or touches an element in a touchscreen environment. We can listen for click events on an element in so many ways.\r\nOne way we can do this is to add an onClick attribute directly to the element\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\n1.2 <footer><\/h3>\n
A footer element defines a footer for the document or a section. A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
\nA document can has more than one footer, although it cannot be placed within a <header>\u00a0or another <footer>\u00a0element, and it cannot contain a\u00a0<header> element.<\/p>\nindex2.html<\/em><\/span><\/p>\n
\r\n<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> \r\nHtml5 Semantic Elements Example\r\n<\/title>\r\n\t<style>\r\n\r\n\r\n<\/style>\r\n\t<\/head>\r\n\t<body>\r\n\u00a0<header>\r\n\u00a0<h1>\r\nOnclick Event Attribute\r\n<\/h1>\r\n<\/header>\r\nThe onclick event occurs when the user clicks on an element. When a user clicks on an element with the mouse or touches an element in a touchscreen environment. We can listen for click events on an element in so many ways.\r\nOne way we can do this is to add an onClick attribute directly to the element\r\n<footer>\r\n\u00a9 2016 HTML5 LEARN Corporation\r\n<\/footer>\r\n\t<\/body>\r\n\t<\/html>\r\n\t\r\n\t\r\n<\/pre>\n1.3 <aside><\/h3>\n
The aside element defines content aside from the page content. Its content should always be related to the page content. It is often represented as side bars.<\/p>\n
index3.html<\/em><\/span><\/p>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t #as{\r\nfont-size:larger;\r\nfont-style:italic;\r\ncolor:red;\r\nfloat:right;\r\nwidth:35%;\r\npadding-left:5px;\r\n\r\n}\r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> \r\nHtml5 Semantic Elements Example\r\n<\/title>\r\n\t<style>\r\n\r\n\r\n<\/style>\r\n\t<\/head>\r\n\t<body>\r\n\u00a0<header>\r\n\u00a0<h1>\r\nOnclick Event Attribute\r\n<\/h1>\r\n<\/header>\r\n<aside id=as>\r\nIn HTML and JavaScript parlance an event can be something the browser does or something the user does. \r\n\r\n<\/aside>\r\nThe onclick event occurs when the user clicks on an element. When a user clicks on an element with the mouse or touches an element in a touchscreen environment. We can listen for click events on an element in so many ways.\r\nOne way we can do this is to add an onClick attribute directly to the element\r\n\r\n<footer>\r\n\u00a9 2016 HTML5 LEARN Corporation\r\n<\/footer>\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\n1.4 <main><\/h3>\n
This tag defines the main content of the page. An HTML document can has a maximum of one\u00a0<main> element. It must not appear within the\u00a0<article>, <aside>,\u00a0<footer>, <header>\u00a0or\u00a0<nav>\u00a0tags. The\u00a0<main> tag was introduced in HTML5.<\/p>\n
index4.html<\/em><\/span><\/p>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t #as{\r\nfont-size:larger;\r\nfont-style:italic;\r\ncolor:red;\r\nfloat:right;\r\nwidth:35%;\r\npadding-left:5px;\r\n\r\n}\r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> \r\nHtml5 Semantic Elements Example\r\n<\/title>\r\n\t<style>\r\n\r\n\r\n<\/style>\r\n\t<\/head>\r\n\t<body>\r\n\u00a0<header>\r\n\u00a0<h1>\r\nOnclick Event Attribute\r\n<\/h1>\r\n<\/header>\r\n<aside id=as>\r\nIn HTML and JavaScript parlance an event can be something the browser does or something the user does. \r\n<\/aside>\r\n<main>\r\nThe onclick event occurs when the user clicks on an element. When a user clicks on an element with the mouse or touches an element in a touchscreen environment. We can listen for click events on an element in so many ways.\r\nOne way we can do this is to add an onClick attribute directly to the element\r\n<\/main>\r\n<footer>\r\n\u00a9 2016 HTML5 LEARN Corporation\r\n<\/footer>\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\n1.5 <article><\/h3>\n
The article tag defines an article in the document. The content within the\u00a0<article> tag is independent from the other content on the site (even though it could be related). Examples of article content could include a forum post, a newspaper article, a blog entry, or a user-submitted comment.
\nThe\u00a0<article>\u00a0tag was introduced in HTML5.<\/p>\nindex5.html<\/em><\/span><\/p>\n
\r\n<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> \r\nHtml5 Semantic Elements Example\r\n<\/title>\r\n\t<style>\r\n\r\n\r\n<\/style>\r\n\t<\/head>\r\n\t<body>\r\n\u00a0<header>\r\n\u00a0<h1>\r\nOnclick Event Attribute\r\n<\/h1>\r\n<\/header>\r\nThe onclick event occurs when the user clicks on an element. When a user clicks on an element with the mouse or touches an element in a touchscreen environment. We can listen for click events on an element in so many ways.\r\nOne way we can do this is to add an onClick attribute directly to the element\r\n<footer>\r\n\u00a9 2016 HTML5 LEARN Corporation\r\n<\/footer>\r\n\t<\/body>\r\n\t<\/html><\/pre>\n