Skip to content

HTML Review

Basic Elements

You should be familiar with all of the tags listed below, which have been excerpted from Kevin Powell's "The Only Tags You Need to Know (for now)."

  • Metadata tags: <html> <head> <title> <link> <body>
  • Content tags: <h1>...<h6> <p> <a> <ol> <ul> <li> <span> <img>
  • Layout tags: <header> <main> <footer> <nav> <article> <section> <div>

Semantic HTML

Semantic HTML tags describe the contents of the element and improve accessibility for people that use screen readers. Try to use the most appropriate tags whenever possible.

Examples of semantic tags include:

  • <form> (contains a collection of inputs)
  • <h1> (contains the top-level page heading)
  • <main> (identifies the main content area of the page)
  • <nav> (contains links to navigate the site)

Examples of generic tags:

  • <span>
  • <div>

Attributes

You will likely need use all of these attributes in your projects throughout the semester:

  • alt: alternate text for an <img> tag
  • class: for use as a selector in CSS
  • href: url for <a> tags
  • id: for use as a query in JavaScript
  • src: path to image to be displayed for <img> tags