HTML Cheatsheet

Commonly Used Tags

DIV Section

<div>This element goes on its own line.</div>

Span Section

<span>This element goes on the same line as other elements.</span>

Paragraph

<p>This is a paragraph.</p>

Line-break

<br>

Images

<img src="my-image.jpg" alt="desc">

Links

Same Tab

<a href="https://yesterweb.org/">Yesterweb.org</a>

New Tab

<a href="https://yesterweb.org/" target="_blank">Yesterweb.org</a>

Headings

<h1>Heading</h1>
  <h2>Heading</h2>
  <h3>Heading</h3>
  <h4>Heading</h4>
  <h5>Heading</h5>
  <h6>Heading</h6>

Lists

Ordered (Numbers)

<ol>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ol>

Unordered (Bullets)

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>

Comments

<!-- This is a comment! -->

Anchor Links

<a href="#links">Click to jump to section</a>
  <div id="links">Welcome to the new section!</div>

Horizontal Rule

This displays a horizontal line across the screen.

<hr>

Summary/Details

This allows you to expand more text upon clicking the summary.

<details>
    <summary>Click to read more...</summary>
    <p>Here is the rest of the text!</p>
  </details>

Marquee

Text that scrolls across the screen

<marquee>This text is scrolling!</marquee>

Button

<button>Click here</button>

Mark

<mark>This text will be highlighted.</mark>

Page Structure

Boilerplate HTML Template

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>My title here!</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <p>My content here!</p>
    </body>
  </html>

Open Graph Tags

Site Preview

These display previews when you share your website on certain sites. They go in your <head> tag.

<meta property="og:title" content="Your Website">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://yourwebsite.com/">
  <meta property="og:image" content="https://yourwebsite.com/images/og-preview.jpg">
  <meta property="og:description" content="A brief page description">
  <meta property="twitter:card" content="summary_large_image">

Tables

Sample Table

<table>
    <caption>Table Caption</caption>
    <thead>
      <th>Col Name</th>
      <th>Col Name</th>
      <th>Col Name</th>
    </thead>
    <tbody>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
  </table>

Noscript

No scripts message

This tag should be used on pages with JavaScript

<noscript>This page requires JavaScript.</noscript>

Semantic HTML

Semantic HTML Template

This makes websites more accessible with screen readers.

<body>
    <header>
      <h1>Welcome to my website!</h1>
      <nav>
        <ul>
          <li>link</li>
          <li>link</li>
          <li>link</li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h2>Title of my page</h2>
        <p>Writing here!</p>
      </article>
      <aside>
        <h3>This is my sidebar!</h3>
        <section>
          <p>First section...</p>
          <p>Second section...</p>
        </section>
      </aside>
      <footer>
        <p>Footer text here...</p>
      </footer>
    </main>
  </body>

Images with Captions

Figure

 <figure>
     <img src="image.jpg" alt="desc">
     <figcaption>Image caption here</figcaption>
  </figure>

Embedded Media

iFrame

<iframe src="page.html" width="200" height="200"></iframe>

Audio Player

<audio controls>
    <source src="https://yourwebsite.mp3" type="audio/mpeg">
  </audio>

Video Player

<video width="300" height="150" controls>
     <source src="https://yourwebsite.com/video.mp4" type="video/mp4">
  </video>

Lorem Ipsum

<p>Lorem ipsum dolor sit amet adipiscing bibendum sem orci tempus aliquet gravida, orci amet iaculis aptent blandit quam accumsan donec in facilisis, cursus ante curabitur aliquet condimentum tincidunt facilisis non cubilia lorem et pretium aliquam phasellus ipsum metus quisque auctor tristique donec nibh, praesent congue ultricies aenean ornare ligula sagittis proin sed vestibulum purus tempus aenean neque aliquam curae vivamus purus egestas ligula tincidunt nullam.</p>
  <p>Dolor id fringilla ut lacinia sem ut pretium ante, luctus hendrerit porttitor etiam malesuada eleifend vel suscipit fusce molestie posuere venenatis pellentesque fusce eros, etiam amet est netus nostra suspendisse condimentum, nulla felis inceptos id quam velit integer orci pretium placerat maecenas ante congue purus enim sociosqu odio erat eleifend vestibulum euismod, quam convallis posuere habitasse odio vitae quisque faucibus vulputate primis integer tellus fusce.</p>
  <p>Suscipit conubia volutpat potenti eu nostra eleifend hac neque tellus nisl, curae nunc porta turpis aptent donec litora velit elit sagittis, dolor non dapibus luctus gravida donec ultrices leo scelerisque risus eleifend vehicula morbi orci ultrices lacinia platea consectetur, dictum curabitur habitant turpis dapibus volutpat metus mollis habitasse, eget venenatis arcu congue potenti imperdiet varius.</p>
  <p>Placerat ultrices lacus elementum eu purus, proin ullamcorper class sagittis molestie, aliquam tempor nec maecenas varius sem neque metus nostra ut tortor et auctor augue feugiat, taciti justo sapien lobortis vivamus taciti malesuada accumsan egestas.</p>
  <p>Leo sed dolor quam feugiat ut suscipit praesent fusce bibendum magna mattis, mi laoreet eu orci integer pretium sapien litora sit quisque velit torquent ut aenean per conubia velit, dictum gravida viverra nibh curabitur, donec platea lobortis leo tincidunt.</p>
  <p>Interdum congue class ipsum suspendisse eu libero malesuada lobortis facilisis, leo platea tempor ad sit nisi dapibus aliquam nibh, integer pellentesque commodo tellus ipsum ut facilisis aliquam bibendum hac bibendum quis nulla sodales augue himenaeos ipsum felis donec dapibus etiam congue.</p>