DEV Community

Abdul Haseeb
Abdul Haseeb

Posted on

HTML cheat sheet covering various concepts!

HTML Basics

  • Document Declaration 
  <!DOCTYPE html>
Enter fullscreen mode Exit fullscreen mode
  • HTML Document Structure 
  <html>
    <head>
      <title>Document Title</title>
    </head>
    <body>
      <h1>Heading</h1>
      <p>Paragraph</p>
    </body>
  </html>
Enter fullscreen mode Exit fullscreen mode

Text Formatting

  • Headings 
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <!-- up to <h6> -->
Enter fullscreen mode Exit fullscreen mode
  • Paragraph 
  <p>This is a paragraph.</p>
Enter fullscreen mode Exit fullscreen mode
  • Bold and Italic 
  <b>Bold text</b>
  <i>Italic text</i>
  <strong>Strong importance</strong>
  <em>Emphasized text</em>
Enter fullscreen mode Exit fullscreen mode

Lists

  • Unordered List 
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
Enter fullscreen mode Exit fullscreen mode
  • Ordered List 
  <ol>
    <li>First item</li>
    <li>Second item</li>
  </ol>
Enter fullscreen mode Exit fullscreen mode
  • Description List 
  <dl>
    <dt>Term 1</dt>
    <dd>Description for Term 1</dd>
    <dt>Term 2</dt>
    <dd>Description for Term 2</dd>
  </dl>
Enter fullscreen mode Exit fullscreen mode

Tables

  • Table Structure 
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
      </tr>
    </tfoot>
  </table>
Enter fullscreen mode Exit fullscreen mode

Forms

  • Form Structure 
  <form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">

    <input type="submit" value="Submit">
  </form>
Enter fullscreen mode Exit fullscreen mode
  • Text Input 
  <input type="text" id="input-id" name="input-name" placeholder="Placeholder text">
Enter fullscreen mode Exit fullscreen mode
  • Email Input 
  <input type="email" id="email" name="email" placeholder="example@example.com">
Enter fullscreen mode Exit fullscreen mode
  • Password Input 
  <input type="password" id="password" name="password">
Enter fullscreen mode Exit fullscreen mode
  • Checkbox 
  <input type="checkbox" id="checkbox-id" name="checkbox-name" value="value">
  <label for="checkbox-id">Checkbox Label</label>
Enter fullscreen mode Exit fullscreen mode
  • Radio Button 
  <input type="radio" id="radio-id1" name="radio-group" value="value1">
  <label for="radio-id1">Option 1</label>

  <input type="radio" id="radio-id2" name="radio-group" value="value2">
  <label for="radio-id2">Option 2</label>
Enter fullscreen mode Exit fullscreen mode
  • Select Dropdown 
  <label for="car">Choose a car:</label>
  <select id="car" name="car">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
Enter fullscreen mode Exit fullscreen mode
  • Textarea 
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea>
Enter fullscreen mode Exit fullscreen mode
  • Button 
  <button type="button">Click Me</button>
  <button type="submit">Submit</button>
Enter fullscreen mode Exit fullscreen mode
  • File Input 
  <input type="file" id="file" name="file">
Enter fullscreen mode Exit fullscreen mode

Links and Media

  • Links 
  <a href="https://www.example.com" target="_blank" title="Link Title">Visit Example</a>
  <a href="mailto:someone@example.com">Send Email</a>
Enter fullscreen mode Exit fullscreen mode
  • Images 
  <img src="image.jpg" alt="Description" width="600" height="400">
Enter fullscreen mode Exit fullscreen mode
  • Audio 
  <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
Enter fullscreen mode Exit fullscreen mode
  • Video 
  <video width="600" controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
Enter fullscreen mode Exit fullscreen mode

Semantic HTML

  • Common Elements 
  <header>Header content</header>
  <nav>Navigation links</nav>
  <main>Main content</main>
  <section>Section content</section>
  <article>Article content</article>
  <aside>Aside content</aside>
  <footer>Footer content</footer>
Enter fullscreen mode Exit fullscreen mode

Attributes

  • Common Attributes 
  <a href="url" target="_blank" title="Link Title">Link Text</a>
  <img src="image.jpg" alt="Image description" width="200" height="100">
  <input type="text" name="username" placeholder="Enter username">
Enter fullscreen mode Exit fullscreen mode

Meta Tags

  • Meta Information 
  <meta charset="UTF-8">
  <meta name="description" content="Page description">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Author Name">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

HTML5 Features

  • Data Attributes 
  <div data-info="Some information">Content</div>
Enter fullscreen mode Exit fullscreen mode
  • Custom Elements 
  <my-custom-element></my-custom-element>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

ifeanyi_aladi profile image

My thoughts on the use() hook — A deep dive into React 19’s latest experimental feature

Ifeanyi Aladi -

nilscoding profile image

Beyond Stream.distinct()

Nils -

anhchienvu profile image

Exploring ImprovedTube: A Beginner's Journey into Open Source Chrome Extensions

AnhChienVu -

enzo_dechaene profile image

User Authentication 🔑: Your Ultimate Digital Shield ! 🛡️

Enzo dechaene -