HTML Cheatsheet

Basic Structure

HTML5 Document Structure

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page Title</title> </head> <body>  </body> </html>

Basic HTML5 document structure with essential elements

Meta Tags

Common meta tags for SEO and responsive design

Text Formatting

Headings

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

Six levels of HTML headings

Text Elements

<p>Paragraph</p> <strong>Bold text</strong> <em>Italic text</em> <u>Underlined text</u> <small>Small text</small> <mark>Highlighted text</mark> <code>Inline code</code>

Common text formatting elements

Lists

<ul> <li>Item 1</li> <li>Item 2</li> </ul>  <ol> <li>First</li> <li>Second</li> </ol>  <dl> <dt>Term</dt> <dd>Description</dd> </dl>

Different types of HTML lists

Links and Media

Links

<a href="https://example.com">Link</a> <a href="mailto:email@example.com">Email</a> <a href="tel:+1234567890">Phone</a> <a href="#section">Anchor Link</a> <a href="document.pdf" download>Download</a>

Various types of hyperlinks

Images

<img src="image.jpg" alt="Description"> <img src="image.jpg" alt="Description" width="300"> <figure> <img src="image.jpg" alt="Description"> <figcaption>Image caption</figcaption> </figure>

Image elements with accessibility features

Audio and Video

<audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support audio. </audio> <video width="400" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support video. </video>

Media elements with fallback content

Forms

Form Elements

<form action="/submit" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email"> <label for="password">Password:</label> <input type="password" id="password" name="password"> <label for="message">Message:</label> <textarea id="message" name="message"></textarea> <label for="country">Country:</label> <select id="country" name="country"> <option value="us">United States</option> <option value="ca">Canada</option> </select> <input type="checkbox" id="subscribe" name="subscribe"> <label for="subscribe">Subscribe to newsletter</label> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label> <button type="submit">Submit</button> </form>

Complete form with various input types

Semantic Elements

Layout Elements

<header>Header content</header> <nav>Navigation</nav> <main> <article>Article content</article> <aside>Sidebar content</aside> </main> <section>Section content</section> <footer>Footer content</footer>

HTML5 semantic layout elements

Other Semantic Elements

<figure><img><figcaption> <details><summary>Expandable content</summary></details> <time datetime="2023-01-01">January 1, 2023</time> <mark>Highlighted text</mark> <code>Inline code</code> <pre>Preformatted text</pre>

Additional semantic HTML elements