HTML introduction

A quick introduction to HTML, how it works, what it’s purpose is, and how to write it.

Go fullscreen: ⌃⌥F

HTML introduction

The layers of the web

  1. HTML
  2. CSS
  3. JavaScript
HTML: content/peanut
CSS: design/chocolate
JavaScript: interactivity/candy

Semantics

Choose elements for their purpose
not what they look like

  • The b tag doesn’t mean “bold”
  • The ul doesn’t mean add “bullets”
  • The h1 doesn’t mean “big text”
A basic HTML element, specifically and <h1>
The different parts of an HTML element
An example of an <a> (link) tag
An example of an <img> tag
HTML 
<header>
  <h1>Titanosaur</h1>
  <img src="images/titanosaur.jpg" alt="Titanosaur skeleton">
  <p>The heaviest creatures ever to walk the earth.</p>
  <nav>
    <ul>
      <li><a href="#desc">Description</a></li>
      <li><a href="#paleo">Paleobiology</a></li>
      <li><a href="#tax">Taxonomy</a></li>
    </ul>
  </nav>
</header>

Videos & tutorials

Start

HTML introduction

A quick introduction to HTML, how it works, what it’s purpose is, and how to write it.