Оффлайн
- Регистрация
- 9 Май 2015
- Сообщения
- 1,559
- Баллы
- 155
Basic Structure
1. HTML5 Doctype
<!DOCTYPE html>
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>
3. Responsive Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4. Favicon Link
<link rel="icon" href="favicon.ico" type="image/x-icon">
5. Linking External CSS
<link rel="stylesheet" href="styles.css">
Text & Semantics
6. Article Element
<article>
<h2>Blog Title</h2>
<p>Content goes here...</p>
</article>
7. Section Element
<section>
<h2>Section Title</h2>
</section>
8. Header & Footer
<header><h1>Website Title</h1></header>
<footer><p>© 2025 My Site</p></footer>
9. Aside Element
<aside>
<p>Related info or sidebar content.</p>
</aside>
10. Marking Important Text
<p>This is <strong>important</strong>!</p>
Forms
11. Basic HTML5 Form
<form action="/submit" method="post">
<input type="text" name="username">
<button type="submit">Send</button>
</form>
12. Email Input
<input type="email" name="email" required>
13. Number Input
<input type="number" min="0" max="100">
14. Date Input
<input type="date" name="dob">
15. Range Slider
<input type="range" min="0" max="100" value="50">
16. Search Input
<input type="search" placeholder="Search...">
17. Color Picker
<input type="color" value="#ff0000">
18. Datalist Autocomplete
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>
19. Required Field
<input type="text" required>
20. Placeholder Example
<input type="text" placeholder="Enter your name">
Media
21. Embedding Video
<video controls width="400">
<source src="video.mp4" type="video/mp4">
</video>
22. Autoplay & Loop Video
<video autoplay loop muted>
<source src="loop.mp4" type="video/mp4">
</video>
23. Embedding Audio
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
24. Poster Image for Video
<video controls poster="poster.jpg">
<source src="movie.mp4" type="video/mp4">
</video>
25. Responsive Image
<img src="image.jpg" alt="Sample" style="max-width:100%;">
Canvas & Graphics
26. Canvas Element
<canvas id="myCanvas" width="400" height="200"></canvas>
27. SVG Inline Example
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red"/>
</svg>
28. Progress Bar
<progress value="70" max="100"></progress>
29. Meter Element
<meter value="0.7">70%</meter>
30. Figure with Caption
<figure>
<img src="pic.jpg" alt="Nature">
<figcaption>Nature Scene</figcaption>
</figure>
Lists & Navigation
31. Navigation Menu
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
32. Ordered List
<ol>
<li>Step One</li>
<li>Step Two</li>
</ol>
33. Unordered List
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
34. Description List
<dl>
<dt>HTML</dt>
<dd>A markup language</dd>
</dl>
35. Breadcrumb Navigation
<nav aria-label="breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li>Page</li>
</ol>
</nav>
Accessibility & SEO
36. Alt Attribute for Images
<img src="logo.png" alt="Company Logo">
37. aria-label Example
<button aria-label="Close">X</button>
38. lang Attribute
<html lang="en">
39. Title Attribute
<p title="Tooltip text">Hover over me</p>
40. Main Landmark
<main>
<h1>Main Content</h1>
</main>
Advanced HTML5 Features
41. Local Storage Access (inline JS example)
<script>
localStorage.setItem('key', 'value');
alert(localStorage.getItem('key'));
</script>
42. Geolocation API
<script>
navigator.geolocation.getCurrentPosition(pos => {
console.log(pos.coords.latitude, pos.coords.longitude);
});
</script>
43. Drag and Drop
<div draggable="true">Drag me</div>
44. Content Editable
<p contenteditable="true">Edit this text</p>
45. details and summary
<details>
<summary>More Info</summary>
<p>This section expands on click.</p>
</details>
Miscellaneous
46. time Element
<time datetime="2025-09-26">September 26, 2025</time>
47. mark Element
<p>Highlight <mark>this text</mark>.</p>
48. small Element
<p>Copyright <small>2025</small></p>
49. code Element
<code>console.log("Hello World");</code>
50. preformatted Text
<pre>
Line One
Line Two
</pre>