Semantic HTML

An HTML Cheatsheet

The goals of Semantic HTML are to create meaningul elements in the code that:

  1. help screen readers navigate our pages
  2. help other coders understand our code
  3. improve SEO of our website
An additional helpful feature of semantic HTML is that it gives more specific references to our items so we have an easier time with our CSS.

How can HTML be Semantic?

Semantic as defined by Google is "relating to meaning in language or logic." In this case we are creating and HTML code with meanings embedded into it. Semantic HTML replaces the <div> elements. As a reminder, <div> is an element that we use to group items on our page. However, since it is a basic element with no helpful information inside of it, we have to use attributes. These are the id and class tags that are added within the <div> element. This may appear like

<div id='nav'></div>

A replacement of this code in semantic HTML would appear like

<nav></nav>

This difference helps both front and back end users interact with your website. As previously mentioned, a screen reader can help users interact with your website navigation easier since it is outlined specifically in your code. The next programmer to look at your code would easily find your navigation code for updating purposes. Finally when you are making the stylesheet for your website, you have elements rather than class tags to help yourself with styling.

Semantic Elements

Remeber that all of these elements are in replacement of the <div> grouping element.

Element Tag Name Description
<article> Article An element of material that is self contained. Normally for blog posts or magazine/newspaper articles.
<aside> Aside Not apart of the current content but related to it (ie: Ads, related links, etc).
<details> Details Wraps the <summary> element along with all items inside. Only shows the summary element unless opened.
<figcaption> Figure Caption Describes the figure that is in the <figure> element.
<figure> Figure Used to wrap media (ie: images, diagrams, code, etc).
<footer> Footer Represents the bottom of the website. Normally for copyright & additional information/links for the site.
<header> Header Represents the top of the website. Normally for items like search bars, logos, and heading tags.
<main> Main Represents the main part of the website.
<mark> Mark An inline element used to highlight text (yellow highlight & black text). Can be restyled with CSS.
<nav> Navigation Used to block items for website navigation.
<section> Section This is used to enclose parts of the page. Helpful if there are multiple articles on one page.
<summary> Summary Used with the <details> element. Shows only this element when <details> is closed.
<time> Time Used to enclose date and time information. Can be used with the datetime attribute.

I hope this mini cheatsheet is helpful. Whatever you are working on, you got this. :)