Scribd
Upload
958 views

50 HTML Codes

The document provides 50 HTML code snippets for common elements and features used in web development, including boilerplate code, headings, paragraphs, links, images, lists, forms, tables, semantic elements, multimedia, and interactivity features like geolocation, drag-and-drop, and video playback controls. The snippets are intended to be used as a reference for building web pages and applications.

Uploaded by

Ash Naz
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
958 views

50 HTML Codes

The document provides 50 HTML code snippets for common elements and features used in web development, including boilerplate code, headings, paragraphs, links, images, lists, forms, tables, semantic elements, multimedia, and interactivity features like geolocation, drag-and-drop, and video playback controls. The snippets are intended to be used as a reference for building web pages and applications.

Uploaded by

Ash Naz
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

Sure!

Here are 50 HTML code snippets for various elements and features commonly used in web
development:

1. **HTML Boilerplate:**

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My Website</title>

</head>

<body>

</body>

</html>

```

2. **Heading Tags:**

```html

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

```
3. **Paragraph:**

```html

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

```

4. **Anchor (Link) Tag:**

```html

<a href="https://www.example.com">Visit Example</a>

```

5. **Image Tag:**

```html

<img src="image.jpg" alt="Image Description">

```

6. **Line Break:**

```html

<p>This is the first line.<br>This is the second line.</p>

```

7. **Unordered List:**

```html

<ul>

<li>Item 1</li>
<li>Item 2</li>

<li>Item 3</li>

</ul>

```

8. **Ordered List:**

```html

<ol>

<li>First</li>

<li>Second</li>

<li>Third</li>

</ol>

```

9. **Nested Lists:**

```html

<ul>

<li>Item 1

<ul>

<li>Subitem 1</li>

<li>Subitem 2</li>

</ul>

</li>

<li>Item 2</li>

</ul>
```

10. **Div Element:**

```html

<div>

<p>This is inside a div element.</p>

</div>

```

11. **Span Element:**

```html

<p>This is a <span style="color: red;">colored</span> text.</p>

```

12. **Bold Text:**

```html

<p>This is <strong>bold</strong> text.</p>

```

13. **Italic Text:**

```html

<p>This is <em>italic</em> text.</p>

```

14. **Underlined Text:**


```html

<p>This is <u>underlined</u> text.</p>

```

15. **Horizontal Line:**

```html

<hr>

```

16. **HTML Comment:**

```html

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

```

17. **HTML Entity:**

```html

<p>&copy; 2023 My Website. All rights reserved.</p>

```

18. **HTML Form:**

```html

<form action="/submit" method="post">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<input type="submit" value="Submit">


</form>

```

19. **Input Types:**

```html

<input type="text">

<input type="password">

<input type="email">

<input type="number">

<input type="date">

<input type="checkbox">

<input type="radio">

```

20. **Textarea:**

```html

<textarea rows="4" cols="50"></textarea>

```

21. **Select Dropdown:**

```html

<select>

<option value="option1">Option 1</option>

<option value="option2">Option 2</option>

</select>
```

22. **Button:**

```html

<button>Click Me</button>

```

23. **Radio Buttons:**

```html

<label>

<input type="radio" name="gender" value="male"> Male

</label>

<label>

<input type="radio" name="gender" value="female"> Female

</label>

```

24. **Checkbox:**

```html

<label>

<input type="checkbox" name="subscribe"> Subscribe to Newsletter

</label>

```

25. **Form Label:**


```html

<label for="email">Email:</label>

<input type="email" id="email" name="email">

```

26. **Form Placeholder:**

```html

<input type="text" placeholder="Enter your name">

```

27. **Form Required Attribute:**

```html

<input type="text" required>

```

28. **Form Disabled Attribute:**

```html

<input type="text" disabled>

```

29. **Form Autocomplete:**

```html

<input type="text" autocomplete="off">

```
30. **HTML Tables:**

```html

<table>

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

</tr>

</table>

```

31. **Table Rowspan and Colspan:**

```html

<table>

<tr>

<td rowspan="2">Cell 1</td>

<td>Cell 2</td>

</tr>

<tr>

<td>Cell 3</td>

</tr>

</table>
```

32. **HTML Semantic Elements:**

```html

<header>

<h1>Website Header</h1>

</header>

<nav>

<ul>

<li>Home</li>

<li>About</li>

<li>Contact</li>

</ul>

</nav>

<main>

<article>

<h2>Article Title</h2>

<p>Article content goes here.</p>

</article>

</main>

<footer>

<p>&copy; 2023 My Website</p>

</footer>
```

33. **HTML Audio Player:**

```html

<audio controls>

<source src="audio.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

```

34. **HTML Video Player:**

```html

<video controls width="320" height="240">

<source src="video.mp4" type="video/mp4">

Your browser does not support the video element.

</video>

```

35. **Iframe for Embedded Content:**

```html

<iframe src="https://www.youtube.com/embed/video-id" width="560" height="315" frameborder="0"


allowfullscreen></iframe>

```

36. **Meta Tags for SEO:**

```html
<meta name="description" content="Website description">

<meta name="keywords" content="keyword1, keyword2, keyword3">

```

37. **Viewport Meta Tag for Responsive Design:**

```html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

```

38. **HTML5 Canvas:**

```html

<canvas id="myCanvas" width="200" height="100"></canvas>

```

39. **SVG (Scalable Vector Graphics):**

```html

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" fill="red" />

</svg>

```

40. **HTML Geolocation:**

```html

<button onclick="getLocation()">Get Location</button>

<p id="demo"></p>
<script>

function getLocation() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition);

} else {

document.getElementById("demo").innerHTML = "Geolocation is not supported by this browser.";

function showPosition(position) {

document.getElementById("demo").innerHTML = "Latitude: " + position.coords.latitude +


"<br>Longitude: " + position.coords.longitude;

</script>

```

41. **HTML Drag and Drop:**

```html

<div id="drag" draggable="true" ondragstart="drag(event)">Drag this text</div>

<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<script>

function allowDrop(event) {

event.preventDefault();

function drag(event) {
event.dataTransfer.setData("text", event.target.id);

function drop(event) {

event.preventDefault();

var data = event.dataTransfer.getData("text");

event.target.appendChild(document.getElementById(data));

</script>

```

42. **HTML Marquee with Scrolling Behavior:**

```html

<marquee behavior="scroll" direction="left">This text will scroll from right to left.</marquee>

```

43. **HTML Marquee with Bouncing Behavior:**

```html

<marquee behavior="alternate" direction="right">This text will bounce back and forth.</marquee>

```

44. **HTML Geolocation with Google Maps Display:**

```html

<button onclick="getLocation()">Get Location</button>

<div id="map" style="width: 400px; height: 300px;"></div>


<script>

function getLocation() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition);

} else {

alert("Geolocation is not supported by this browser.");

function showPosition(position) {

var lat = position.coords.latitude;

var lon = position.coords.longitude;

var mapOptions = {

center: new google.maps.LatLng(lat, lon),

zoom: 10,

};

var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({

position: new google.maps.LatLng(lat, lon),

map: map,

});

</script>

```
45. **HTML Video Autoplay with Loop:**

```html

<video controls autoplay loop>

<source src="video.mp4" type="video/mp4">

Your browser does not support the video element.

</video>

```

46. **HTML Video Autoplay with Muted:**

```html

<video controls autoplay muted>

<source src="video.mp4" type="video/mp4">

Your browser does not support the video element.

</video>

```

47. **HTML Video Autoplay with Controls Hidden:**

```html

<video autoplay muted>

<source src="video.mp4" type="video/mp4">

Your browser does not support the video element.

</video>

```

48. **HTML Video Autoplay with Playback Speed Control:**


```html

<video controls autoplay>

<source src="video.mp4" type="video/mp4">

Your browser does not support the video element.

</video>

<input type="range" id="speed" min="0.5" max="2" step="0.1" value="1" onchange="changeSpeed()">

<script>

var video = document.querySelector("video");

var speedSlider = document.getElementById("speed");

function changeSpeed() {

video.playbackRate = speedSlider.value;

</script>

```

49. **HTML Video Autoplay with Fullscreen Button:**

```html

<video controls width="640" height="360">

<source src="video.mp4" type="video/mp4">

Your browser does not support the video element.

</video>

<button onclick="toggleFullscreen()">Fullscreen</button>

<script>

var video = document.querySelector("video");


function toggleFullscreen() {

if (video.requestFullscreen) {

video.requestFullscreen();

} else if (video.mozRequestFullScreen) {

video.mozRequestFullScreen();

} else if (video.webkitRequestFullscreen) {

video.webkitRequestFullscreen();

} else if (video.msRequestFullscreen) {

video.msRequestFullscreen();

</script>

```

50. **HTML Video Autoplay with Seek Bar:**

```html

<video controls width="640" height="360">

<source src="video.mp4" type="video/mp4">

Your browser does not support the video element.

</video>

<input type="range" id="seekbar" min="0" max="100" step="1" value="0" onchange="seekVideo()">

<script>

var video = document.querySelector("video");

var seekbar = document.getElementById("seekbar");


function seekVideo() {

var time = (video.duration / 100) * seekbar.value;

video.currentTime = time;

</script>

```

These 50 HTML code snippets cover a range of elements and features that are commonly used in web
development. Use them as a reference to build your web pages and applications. Happy coding!

You might also like