DEV Community

Dom
Dom

Posted on

Web Developer Bootcamp Day Three

Section 4: HTML: Next Steps & Semantics

semantic html tags

HTML semantics cheat sheet

title

  • Second most important piece of content.
  • Shown in the browser tab & search results.
  • Should be unique for every page on the site.

main

  • Primary content of the page.

section

  • A group in a series of related content pieces.

article

  • A piece of content that’s independent.
  • Could be removed from this website and still make sense.

aside

  • Secondary content not required to understand the main content.

nav

  • Defines a group a navigation links.

header

  • When inside body it’s the website masthead.
  • When inside article it’s the most important information.

footer

  • When inside body it’s the website footer.
  • When inside article it’s the least important information.

figure

  • Embeds annotated images, illustrations, photos, code, etc.
  • Could be moved out of place and would still make sense.

figcaption

  • For adding a caption/annotation to the figure
  • Must be inside a figure element—cannot stand alone.

Figures & captions

  • Use only if there’s a caption.

time datetime="…"

  • Marks some text as a time or date.
  • datetime defines the machine readable version.

VSCode Tip: Emmet

emmet cheatsheet

Top comments (0)