3-semantic-html-custom-web-font.html

# Why Semantic Elements?

* With HTML4, developers used their own id/class names to style elements: 
  header, top, bottom, footer, menu, navigation, main, container, 
  content, article, sidebar, topnav, etc.
  
* This made it impossible for search engines to identify the correct web page content.

* With the new HTML5 elements (<header> <footer> <nav> <section> <article>), 
  this will become easier.

* A semantic element clearly describes its meaning to both the browser and the developer.
  
* Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
  
* Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
  
  
  

# Semantic Elements in HTML5

* Below is an alphabetical list of the new semantic elements in HTML5.

* <article>Defines an article
* <aside> Defines content aside from the page content
* <details> Defines additional details that the user can view or hide
* <figcaption> Defines a caption for a <figure> element
* <figure> Specifies self-contained content, like illustrations, 
  diagrams, photos, code listings, etc.
* <footer> Defines a footer for a document or section
* <header> Specifies a header for a document or section
* <main> Specifies the main content of a document
* <mark> Defines marked/highlighted text
* <nav> Defines navigation links
* <section> Defines a section in a document
* <summary> Defines a visible heading for a <details> element
* <time> Defines a date/time