DEV Community

Software Developer
Software Developer

Posted on

50 Most Useful HTML5 Snippets

#webdev #programming #html #beginners

Basic Structure

1. HTML5 Doctype 

<!DOCTYPE html>
Enter fullscreen mode Exit fullscreen mode

2. Basic HTML Page Template 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <h1>Hello HTML5</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

3. Responsive Meta Tag 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

4. Favicon Link 

<link rel="icon" href="favicon.ico" type="image/x-icon">
Enter fullscreen mode Exit fullscreen mode

5. Linking External CSS 

<link rel="stylesheet" href="styles.css">
Enter fullscreen mode Exit fullscreen mode

Text & Semantics

6. Article Element 

<article>
  <h2>Blog Title</h2>
  <p>Content goes here...</p>
</article>
Enter fullscreen mode Exit fullscreen mode

7. Section Element 

<section>
  <h2>Section Title</h2>
</section>
Enter fullscreen mode Exit fullscreen mode

8. Header & Footer 

<header><h1>Website Title</h1></header>
<footer><p>&copy; 2025 My Site</p></footer>
Enter fullscreen mode Exit fullscreen mode

9. Aside Element 

<aside>
  <p>Related info or sidebar content.</p>
</aside>
Enter fullscreen mode Exit fullscreen mode

10. Marking Important Text 

<p>This is <strong>important</strong>!</p>
Enter fullscreen mode Exit fullscreen mode

Forms

11. Basic HTML5 Form 

<form action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit">Send</button>
</form>
Enter fullscreen mode Exit fullscreen mode

12. Email Input 

<input type="email" name="email" required>
Enter fullscreen mode Exit fullscreen mode

13. Number Input 

<input type="number" min="0" max="100">
Enter fullscreen mode Exit fullscreen mode

14. Date Input 

<input type="date" name="dob">
Enter fullscreen mode Exit fullscreen mode

15. Range Slider 

<input type="range" min="0" max="100" value="50">
Enter fullscreen mode Exit fullscreen mode

16. Search Input 

<input type="search" placeholder="Search...">
Enter fullscreen mode Exit fullscreen mode

17. Color Picker 

<input type="color" value="#ff0000">
Enter fullscreen mode Exit fullscreen mode

18. Datalist Autocomplete 

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>
Enter fullscreen mode Exit fullscreen mode

19. Required Field 

<input type="text" required>
Enter fullscreen mode Exit fullscreen mode

20. Placeholder Example 

<input type="text" placeholder="Enter your name">
Enter fullscreen mode Exit fullscreen mode

Media

21. Embedding Video 

<video controls width="400">
  <source src="video.mp4" type="video/mp4">
</video>
Enter fullscreen mode Exit fullscreen mode

22. Autoplay & Loop Video 

<video autoplay loop muted>
  <source src="loop.mp4" type="video/mp4">
</video>
Enter fullscreen mode Exit fullscreen mode

23. Embedding Audio 

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>
Enter fullscreen mode Exit fullscreen mode

24. Poster Image for Video 

<video controls poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
</video>
Enter fullscreen mode Exit fullscreen mode

25. Responsive Image 

<img src="image.jpg" alt="Sample" style="max-width:100%;">
Enter fullscreen mode Exit fullscreen mode

Canvas & Graphics

26. Canvas Element 

<canvas id="myCanvas" width="400" height="200"></canvas>
Enter fullscreen mode Exit fullscreen mode

27. SVG Inline Example 

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red"/>
</svg>
Enter fullscreen mode Exit fullscreen mode

28. Progress Bar 

<progress value="70" max="100"></progress>
Enter fullscreen mode Exit fullscreen mode

29. Meter Element 

<meter value="0.7">70%</meter>
Enter fullscreen mode Exit fullscreen mode

30. Figure with Caption 

<figure>
  <img src="pic.jpg" alt="Nature">
  <figcaption>Nature Scene</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

Lists & Navigation

31. Navigation Menu 

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>
Enter fullscreen mode Exit fullscreen mode

32. Ordered List 

<ol>
  <li>Step One</li>
  <li>Step Two</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

33. Unordered List 

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

34. Description List 

<dl>
  <dt>HTML</dt>
  <dd>A markup language</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

35. Breadcrumb Navigation 

<nav aria-label="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li>Page</li>
  </ol>
</nav>
Enter fullscreen mode Exit fullscreen mode

Accessibility & SEO

36. Alt Attribute for Images 

<img src="logo.png" alt="Company Logo">
Enter fullscreen mode Exit fullscreen mode

37. aria-label Example 

<button aria-label="Close">X</button>
Enter fullscreen mode Exit fullscreen mode

38. lang Attribute 

<html lang="en">
Enter fullscreen mode Exit fullscreen mode

39. Title Attribute 

<p title="Tooltip text">Hover over me</p>
Enter fullscreen mode Exit fullscreen mode

40. Main Landmark 

<main>
  <h1>Main Content</h1>
</main>
Enter fullscreen mode Exit fullscreen mode

Advanced HTML5 Features

41. Local Storage Access (inline JS example) 

<script>
  localStorage.setItem('key', 'value');
  alert(localStorage.getItem('key'));
</script>
Enter fullscreen mode Exit fullscreen mode

42. Geolocation API 

<script>
navigator.geolocation.getCurrentPosition(pos => {
  console.log(pos.coords.latitude, pos.coords.longitude);
});
</script>
Enter fullscreen mode Exit fullscreen mode

43. Drag and Drop 

<div draggable="true">Drag me</div>
Enter fullscreen mode Exit fullscreen mode

44. Content Editable 

<p contenteditable="true">Edit this text</p>
Enter fullscreen mode Exit fullscreen mode

45. details and summary 

<details>
  <summary>More Info</summary>
  <p>This section expands on click.</p>
</details>
Enter fullscreen mode Exit fullscreen mode

Miscellaneous

46. time Element 

<time datetime="2025-09-26">September 26, 2025</time>
Enter fullscreen mode Exit fullscreen mode

47. mark Element 

<p>Highlight <mark>this text</mark>.</p>
Enter fullscreen mode Exit fullscreen mode

48. small Element 

<p>Copyright <small>2025</small></p>
Enter fullscreen mode Exit fullscreen mode

49. code Element 

<code>console.log("Hello World");</code>
Enter fullscreen mode Exit fullscreen mode

50. preformatted Text 

<pre>
  Line One
  Line Two
</pre>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)