HTML Programming

1. Introduction to HTML

HTML (HyperText Markup Language) is the standard language for creating web pages. It provides the basic structure of a webpage.

<!-- HTML is used to define elements like headings, paragraphs, links, images, and more. -->

2. HTML Editors

HTML editors help in writing HTML code easily. Some popular editors are:

<!-- You can use editors like Sublime Text, Visual Studio Code, or Notepad++ -->

3. Basic HTML Structure

HTML documents have a standard structure...

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Welcome to HTML!</h1>
  </body>
</html>

Welcome to HTML!

4. HTML Comments

HTML comments are used to add notes in the code that are not visible on the page.

<!-- This is a comment -->

5. HTML Elements

HTML elements are the building blocks of HTML. They consist of a start tag, content, and an end tag.

<div>Content goes here</div>
<p>This is a paragraph</p>
Content goes here

This is a paragraph

6. HTML Headings

HTML supports six levels of headings, from <h1> (largest) to <h6> (smallest).

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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

7. HTML Attributes

HTML attributes provide additional information about HTML elements. They are written inside the start tag.

<a href="https://www.example.com">Click Here</a>
Click Here

Some attributes names with examples

Attribute Name Description Example
id Unique identifier for an element. <div id="header"></div>
class Specifies one or more class names for an element (used for CSS/JS). <p class="text-bold"></p>
style Inline CSS styling for the element. <h1 style="color: red;"></h1>
title Tooltip text displayed on hover. <a title="Click here">Link</a>
src Specifies the source URL of an image, video, or script. <img src="image.jpg">
alt Alternative text for an image when it cannot be displayed. <img src="image.jpg" alt="A tree">
href Hyperlink reference URL for anchor tags. <a href="https://example.com">Visit</a>
target Specifies where to open the linked document (`_blank`, `_self`, etc.). <a href="#" target="_blank"></a>
width Width of an element (commonly images, videos, etc.). <img src="image.jpg" width="300">
height Height of an element (commonly images, videos, etc.). <img src="image.jpg" height="200">
name Specifies a name for the element (commonly used in forms). <input name="username">
value Specifies the value of an input field, button, etc. <input type="text" value="John">
placeholder Placeholder text for an input field. <input placeholder="Enter your name">
type Specifies the type of input field (`text`, `password`, `email`, etc.). <input type="email">
readonly Makes an input field read-only (cannot be edited). <input type="text" readonly>
disabled Disables an element, preventing interaction. <button disabled>Click</button>
checked Indicates whether a checkbox or radio button is checked by default. <input type="checkbox" checked>
multiple Allows multiple values to be selected (commonly used with ` <select multiple></select>
maxlength Specifies the maximum number of characters allowed in an input field. <input type="text" maxlength="10">
min Specifies the minimum value for numeric inputs. <input type="number" min="1">
max Specifies the maximum value for numeric inputs. <input type="number" max="100">
step Specifies the interval between valid values in numeric inputs. <input type="number" step="5">
autocomplete Enables or disables autocomplete for input fields (`on` or `off`). <input autocomplete="off">
required Makes an input field mandatory to fill before form submission. <input type="text" required>
pattern Specifies a regular expression for input validation. <input type="text" pattern="[A-Za-z]+">
data-* Used to define custom data attributes for an element. <div data-role="admin"></div>
lang Specifies the language of the element's content. <p lang="en">Hello</p>
dir Specifies the text direction (`ltr`, `rtl`). <p dir="rtl">مرحباً</p>
hidden Hides the element from the display. <div hidden></div>
tabindex Specifies the tab order of an element. <button tabindex="1"></button>
for Specifies the associated ` <label for="username"></label>

8. HTML Paragraphs

HTML paragraphs are created using the <p> tag to define text blocks.

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

This is a paragraph of text.

9. HTML Styles

You can apply CSS styles to HTML elements using the <style> tag.

<style>
  p { color: red; }
</style>
<p>This text is red.</p>

This text is red.

HTML styles allow you to customize the appearance of HTML elements using CSS. You can apply styles in three ways:

1. Inline Style

Inline styles are used to apply styles to individual elements.

<p style="color: red; font-size: 20px;">This is a red colored text with font size 20px.</p>

2. Internal Style

Internal styles are defined inside the <style> tag in the HTML <head> section.

<style>
  h1 { color: blue; font-size: 30px; }
</style>

3. External Style

External styles are defined in a separate CSS file and linked to the HTML document using the <link> tag.

<link rel="stylesheet" href="styles.css">

CSS Properties

Some commonly used CSS properties are:

10. HTML Formatting

HTML provides tags for formatting text, such as bold, italics, and underlined.

<b>Bold Text</b>
<i>Italic Text</i>
<u>Underlined Text</u>
Bold Text
Italic Text
Underlined Text

Some name and examples of formatting

This table contains various HTML formatting tags, their examples, and the corresponding outputs:

Formatting Tag Example Output
<p> (Paragraph) <p>This is a paragraph of text.</p> This is a paragraph of text.
<br> (Line Break) Line 1<br>Line 2 Line 1
Line 2
<b> (Bold) <b>Bold Text</b> Bold Text
<strong> (Important/Bold) <strong>Important Text</strong> Important Text
<i> (Italic) <i>Italic Text</i> Italic Text
<em> (Emphasis/Italic) <em>Emphasized Text</em> Emphasized Text
<u> (Underline) <u>Underlined Text</u> Underlined Text
<s> (Strike-through) <s>Strikethrough Text</s> Strikethrough Text
<q> (Inline Quotation) <q>This is a short quote.</q> This is a short quote.
<blockquote> (Block-level Quotation) <blockquote>This is a longer quote.</blockquote>
This is a longer quote.
<mark> (Highlighted Text) <mark>Highlighted Text</mark> Highlighted Text
<del> (Deleted Text) <del>Deleted Text</del> Deleted Text
<ins> (Inserted Text) <ins>Inserted Text</ins> Inserted Text
<small> (Smaller Text) <small>Smaller Text</small> Smaller Text

11. HTML Quotations

HTML supports blockquotes for long quotes and inline quotes for short quotes.

<blockquote>This is a blockquote.</blockquote>
<q>This is an inline quote.</q>
This is a blockquote.

This is an inline quote.

12. HTML Colors

HTML allows you to define colors using names, hexadecimal, or RGB values.

<body style="background-color: lightblue;">
  <p>This page has a light blue background.</p>
</body>

This page has a light blue background.

In HTML, colors can be applied using various methods such as color names, hex codes, RGB values, and more. Below are the most common ways to use colors in HTML:

1. Color Name

You can use predefined color names in HTML. These are simple and easy to remember.

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

Output:

This text is red.

2. Hexadecimal Color Code

Hex codes are a combination of six digits and letters used to represent colors. The format is #RRGGBB.

<p style="color: #00FF00;">This text is green.</p>

Output:

This text is green.

3. RGB Color

RGB (Red, Green, Blue) defines the intensity of red, green, and blue components in a color. The format is rgb(R, G, B), where R, G, and B are values from 0 to 255.

<p style="color: rgb(0, 0, 255);">This text is blue.</p>

Output:

This text is blue.

4. RGBA Color

RGBA is similar to RGB but includes an additional alpha value, which defines the opacity of the color. The format is rgba(R, G, B, A), where A is the opacity (from 0 to 1).

<p style="color: rgba(255, 0, 0, 0.5);">This text is semi-transparent red.</p>

Output:

This text is semi-transparent red.

5. HSL Color

HSL stands for Hue, Saturation, and Lightness. The format is hsl(H, S%, L%), where H is the color's hue (0 to 360), S is saturation (0% to 100%), and L is lightness (0% to 100%).

<p style="color: hsl(120, 100%, 50%);">This text is green.</p>

Output:

This text is green.

13. HTML CSS

CSS can be applied to HTML elements to style them. You can use inline, internal, or external CSS.

<style>
  p { color: green; }
</style>
<p>This text is green.</p>

This text is green.

15. HTML Images

Images can be added in HTML using the <img> tag. The source is provided using the "src" attribute.

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

16. HTML Favicon

Favicon is a small icon displayed in the browser tab. It can be set using the <link> tag in the <head> section.

<link rel="icon" href="favicon.ico">

17. HTML Page Title

The title of an HTML page is defined using the <title> tag inside the <head> section.

<title>My Awesome Page</title>

18. HTML Tables

HTML tables are used to display data in a tabular format using the <table>, <tr>, <td>, and <th> tags.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
Header 1 Header 2
Data 1 Data 2

19. HTML Lists

You can create ordered (<ol>) and unordered (<ul>) lists:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>
  • Item 1
  • Item 2
  • Item 3
  1. First
  2. Second
  3. Third

20. HTML Block & Inline

Block elements take up the full width, whereas inline elements take up only the space required by their content.

<div>This is a block element</div>
<span>This is an inline element</span>
This is a block element
This is an inline element

21. HTML Classes

Classes are used to group multiple elements with the same styling. You can apply a class to an element using the class attribute.

<div class="box">This is a div with a class.</div>
This is a div with a class.

22. HTML Id

The id attribute is used to identify a unique element on the page. It must be unique within the page.

<div id="unique">This is a div with an id.</div>
This is a div with an id.

23. HTML Iframes

Iframes allow you to embed another HTML document inside the current document.

<iframe src="https://www.example.com"></iframe>

some real life example

An iframe is used to embed another document (like a web page) within the current page. Below is a responsive example of an iframe:

1. Iframe with YouTube Video (Responsive)

This example demonstrates embedding a YouTube video inside a responsive iframe.

<div class="iframe-container">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Output:

1. Google Maps (Responsive)

This iframe embeds a Google Map with a specified location. It's responsive to screen size and mobile-friendly.

<div class="iframe-container">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.689597548209!2d-122.41941548468197!3d37.77492977975981!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085808dcd1ffebd%3A0x2ed9825d28399db2!2sSan%20Francisco%2C%20CA!5e0!3m2!1sen!2sus!4v1611119021000!5m2!1sen!2sus" frameborder="0"></iframe>
</div>

Output:

2. Twitter Feed (Responsive)

Embed a Twitter feed with this responsive iframe example:

<div class="iframe-container">
  <iframe src="https://platform.twitter.com/widgets/tweet_button.html?size=l&text=Check%20out%20this%20tweet%20embed&url=https%3A%2F%2Ftwitter.com%2Ftwitterapi%2Fstatus%2F1000000000" frameborder="0"></iframe>
</div>

Output:

3. Vimeo Video (Responsive)

Embed a Vimeo video in a responsive iframe:

<div class="iframe-container">
  <iframe src="https://player.vimeo.com/video/76979871" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>

Output:

4. Instagram Post (Responsive)

Embed an Instagram post using a responsive iframe:

<div class="iframe-container">
  <iframe src="https://www.instagram.com/p/CJGH1QJlfYm/embed" frameborder="0"></iframe>
</div>

Output:

24. HTML JavaScript

JavaScript can be included in HTML to make the page interactive.

<script>
  alert('Hello, World!');
</script>

25. HTML File Paths

File paths are used to link to files in a web page, and they can be either relative or absolute.

<a href="images/photo.jpg">Click to view image</a>
Click to view image

26. HTML Head

The <head> section contains metadata, links to external files, and other resources for the page.

<head>
  <title>My Web Page</title>
</head>

27. HTML Layout

HTML layout defines the structure of a webpage, often divided into header, navigation, content, and footer.

<header>Header Content</header>
<nav>Navigation Links</nav>
<main>Main Content</main>
<footer>Footer Content</footer>

28. HTML Responsive

Responsive design ensures the webpage adapts to different screen sizes using CSS media queries.

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

29. HTML Computercode

To display computer code in a readable format, use the <pre> tag, which preserves whitespace and line breaks.

<pre>let x = 10;
console.log(x);</pre> 
let x = 10;
        console.log(x);

30. HTML Semantics

Semantic HTML tags provide meaning to the web page and improve accessibility and SEO.

<article>Article Content</article>
<section>Section Content</section>
Article Content
Section Content

31. HTML Style Guide

Following a style guide ensures consistency and best practices in HTML code.

<!-- Always indent your code and use meaningful tag names -->

32. HTML Entities

HTML entities are used to represent special characters that can't be typed directly in HTML.

& < > " ©
& < > " ©

33. HTML Symbols

HTML symbols are used to display characters that are not part of the standard character set.

<div>&#9733;</div>
★

34. HTML Emojis

HTML supports emojis by using Unicode or by directly typing emoji characters.

<p>😀 Smiling Face</p>

😀 Smiling Face

35. HTML Charsets

Character sets (charsets) define the encoding used for the document's characters. The most common charset is UTF-8.

<meta charset="UTF-8">

36. HTML URL Encode

URL encoding converts characters into a valid URL format.

<a href="https://example.com?name=John&age=25">Click Here</a>
Click Here

37. HTML vs. XHTML

HTML is a loose standard, whereas XHTML is stricter and requires all tags to be closed and case-sensitive.

<html> (HTML)
<html xmlns="http://www.w3.org/1999/xhtml"> (XHTML)

38. HTML Forms

Forms are used to collect user input. The data is sent to a server for processing.

<form action="/submit" method="POST">
  <input type="text" name="name">
  <input type="submit" value="Submit">
</form>

39. HTML Form Attributes

Form elements can include various attributes such as action, method, target, and name.

<form action="submit.php" method="POST" target="_blank">
  <input type="text" name="name">
  <input type="submit" value="Submit">
</form>

40. HTML Form Elements

HTML form elements include inputs, selects, textareas, and more to gather user input.

<form>
  <input type="text">
  <textarea>Enter your message</textarea>
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</form>

41. HTML Input Types

Different types of inputs, such as text, password, email, etc., define the behavior of form fields.

<input type="text">
<input type="password">
<input type="email">
<input type="number">
<input type="date">
<input type="color">
<input type="tel">
<input type="file">
<input type="radio">
<input type="checkbox">
<input type="range">
<input type="submit">








Male Female
Subscribe to Newsletter

42. HTML Input Attributes

Input elements support various attributes such as placeholder, value, required, and more.

<input type="text" placeholder="Enter name">
<input type="text" value="John">
<input type="text" required>
<input type="text" maxlength="10">
<input type="text" minlength="5">
<input type="text" disabled>
<input type="text" readonly>
<input type="text" autofocus>
<input type="text" pattern="[A-Za-z]+">
<input type="text" size="20">
<input type="text" tabindex="1">
<input type="text" name="username">

43. Input Form Attributes

Input elements can also have attributes like disabled, readonly, autofocus, and more.

<input type="text" disabled>
<input type="text" readonly>
<input type="text" autofocus>
<input type="text" required>
<input type="text" placeholder="Enter text">
<input type="text" maxlength="15">
<input type="text" size="25">
<input type="text" pattern="[A-Za-z]{5,15}">
<input type="text" name="username">
<input type="text" value="Default Text">

44. HTML Graphics

HTML provides support for graphics using elements like <canvas> and <svg>.

<canvas width="200" height="200"></canvas>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle>
</svg>

45. HTML Canvas

The <canvas> element is used to draw graphics via JavaScript.

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(20, 20, 150, 100);
</script>

46. HTML SVG

Scalable Vector Graphics (SVG) allows you to define vector-based graphics in XML format.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle>
</svg>

47. HTML Media

The <audio> and <video> elements in HTML allow you to embed multimedia such as audio and video files directly into a webpage. These elements provide a user-friendly interface for media playback without the need for third-party plugins.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>


1. HTML Audio Element

The <audio> element is used to embed audio files in a webpage. You can control the playback with attributes like controls, autoplay, and loop.

<audio controls>
  <source src="audio-file.mp3" type="audio/mp3">
  <source src="audio-file.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

2. HTML Video Element

The <video> element is used to embed video files in a webpage. You can control playback using attributes like controls, autoplay, and loop.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video element.
</video>

3. HTML Object Element (For Embedding Media)

The <object> element allows you to embed media such as videos, audio, images, and PDFs in your webpage.

<object data="movie.mp4" type="video/mp4" width="400" height="300"></object>

4. HTML Picture Element (For Images)

The <picture> element helps you specify multiple sources for images based on screen sizes and formats. It helps make your website more responsive.

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Sample Image">
</picture>
Sample Image

48. HTML Video

The <video> element is used to embed a video file in an HTML document.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

49. HTML Audio

The <audio> element is used to embed an audio file in an HTML document.

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

50. HTML Plug-ins

Plug-ins are used to embed non-HTML content like Flash movies or Java applets in a web page.

<object data="plugin.swf" type="application/x-shockwave-flash"></object>

51. HTML YouTube

You can embed YouTube videos using the iframe element.

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0"></iframe>

52. HTML APIs

HTML provides a set of APIs for interacting with web pages and applications, such as the Geolocation API and the Web Storage API.

<script>
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log(position);
  });
</script>

53. HTML Geolocation

The Geolocation API allows you to access the user's location information.

<script>
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      alert("Latitude: " + position.coords.latitude + "
Longitude: " + position.coords.longitude);
    });
  } else {
    alert("Geolocation is not supported by this browser.");
  }
</script>

54. HTML Drag/Drop

The Drag and Drop API enables users to drag elements within a page.

<div id="drag1" draggable="true" ondragstart="drag(event)">Drag me!</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">Drop here</div>
<script>
  function allowDrop(ev) {
    ev.preventDefault();
  }
  function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }
  function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }
</script>
Drag me!
Drop here

55. HTML Web Storage

The Web Storage API allows you to store data locally within the user's browser.

<script>
  localStorage.setItem("username", "John Doe");
  var user = localStorage.getItem("username");
  alert(user);
</script>

56. HTML Web Workers

Web Workers allow you to run scripts in the background thread without affecting the performance of the web page.

<script>
  var worker = new Worker("worker.js");
  worker.onmessage = function(e) {
    alert("Message from worker: " + e.data);
  };
</script>

57. HTML Examples

HTML examples help to showcase the implementation of different HTML elements and techniques.

<p>This is an example paragraph.</p>
<a href="https://example.com">Visit Example</a>

This is an example paragraph.

Visit Example

58. HTML Editor

An HTML editor is a tool that allows you to write and edit HTML code.

<textarea rows="10" cols="50">Write your HTML code here</textarea>

59. HTML Quiz

HTML quizzes help to test your knowledge about HTML concepts.

<form>
  <input type="radio" name="q1" value="a"> Option A
  <input type="radio" name="q1" value="b"> Option B
  <input type="submit" value="Submit">
</form>
Option A Option B

60. HTML Exercises

HTML exercises help in practicing and learning HTML by writing and modifying code.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
  • Item 1
  • Item 2

61. HTML Website

HTML websites consist of pages created using HTML elements to structure content.

<html>
  <head><title>My Website</title></head>
  <body><h1>Welcome to My Website</h1></body>
</html>

Welcome to My Website

62. HTML Syllabus

The HTML syllabus covers various topics such as elements, attributes, forms, and media.

<ul>
  <li>Basic HTML Structure</li>
  <li>HTML Forms</li>
  <li>HTML Media</li>
</ul>
  • Basic HTML Structure
  • HTML Forms
  • HTML Media

63. HTML Study Plan

A structured study plan helps you organize your learning process for HTML effectively.

<ul>
  <li>Learn basic HTML structure</li>
  <li>Understand HTML elements and attributes</li>
  <li>Practice with HTML forms and tables</li>
  <li>Explore HTML5 new features</li>
</ul>
  • Learn basic HTML structure
  • Understand HTML elements and attributes
  • Practice with HTML forms and tables
  • Explore HTML5 new features

64. HTML Interview Prep

Prepare for HTML-related interview questions by understanding key concepts and practicing.

<ol>
  <li>What is the difference between HTML and XHTML?</li>
  <li>Explain the structure of an HTML document.</li>
  <li>What are semantic elements in HTML?</li>
</ol>
  1. What is the difference between HTML and XHTML?
  2. Explain the structure of an HTML document.
  3. What are semantic elements in HTML?

65. HTML Bootcamp

HTML Bootcamp offers intensive learning of HTML with hands-on projects and exercises.

<h3>Day 1: HTML Basics</h3>
  <p>Learn the structure and basic tags.</p>
<h3>Day 2: Forms and Tables</h3>
  <p>Understand forms, inputs, and table layout.</p>

Day 1: HTML Basics

Learn the structure and basic tags.

Day 2: Forms and Tables

Understand forms, inputs, and table layout.

66. HTML Certificate

Earn an HTML certificate after successfully completing a course or bootcamp.

<h3>Certificate of Completion</h3>
  <p>This certifies that the learner has completed the HTML Bootcamp successfully.</p>

Certificate of Completion

This certifies that the learner has completed the HTML Bootcamp successfully.

67. HTML Summary

HTML is the standard language for creating web pages, and it defines the structure and content of web pages.

<h3>HTML Basics</h3>
  <p>HTML stands for Hypertext Markup Language.</p>
<h3>HTML Structure</h3>
  <p>HTML documents are structured using tags like <html>, <head>, <body>.</p>

HTML Basics

HTML stands for Hypertext Markup Language.

HTML Structure

HTML documents are structured using tags like , , .

68. HTML Accessibility

Ensure that web content is accessible to all users, including those with disabilities, by following accessibility guidelines.

<button aria-label="Close">X</button>
<img src="image.jpg" alt="Description of image">
Description of image

69. HTML References

HTML references include external resources like documentation, tutorials, and books to further your learning.

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN Web Docs</a>
MDN Web Docs

70. HTML Tag List

HTML includes a variety of tags used to structure and format web content.

<div>Content</div>
<p>Paragraph</p>
<a href="https://example.com">Link</a>
Content

Paragraph

Link

71. HTML Attributes

HTML attributes provide additional information about an element, such as its style, behavior, or data.

<img src="image.jpg" alt="Image description">
<a href="https://example.com">Visit Example</a>
Image description Visit Example

72. HTML Global Attributes

Global attributes are attributes that can be applied to any HTML element.

<div id="myDiv" class="example">Content</div>
Content

73. HTML Browser Support

HTML elements are supported across all modern browsers, but some features may require specific browser versions.

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

74. HTML Events

HTML events are actions that can trigger functions, such as clicks, keypresses, or loading.

<button onclick="alert('Button clicked!')">Click me</button>

75. HTML Colors

Colors can be applied using color names, hex codes, rgb(), or rgba().

<div style="background-color: #ff6347;">Tomato Color</div>
<div style="background-color: rgb(255, 99, 71);">Tomato Color</div>
Tomato Color
Tomato Color

76. HTML Canvas

The canvas element is used to draw graphics on the fly using JavaScript.

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  var ctx = document.getElementById("myCanvas").getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(20, 20, 150, 100);
</script>

77. HTML Audio/Video

HTML provides elements for embedding audio and video on web pages.

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
</audio>
<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

78. HTML Character Sets

Character encoding ensures that characters display correctly across different platforms.

<meta charset="UTF-8">

79. HTML Doctypes

Doctype declaration is required to define the document type and version of HTML being used.

<!DOCTYPE html>

80. HTML URL Encode

URL encoding replaces characters with a special code that can be safely transmitted over the internet.

<a href="https://example.com?name=John%20Doe">Visit John</a>
Visit John

81. HTML Language Codes

Language codes are used to specify the language of the document content.

<html lang="en"> ... </html>

82. HTML Country Codes

Country codes are used for region-specific information like language or location.

<html lang="en-US"> ... </html>

83. HTTP Messages

HTTP messages consist of requests and responses that are exchanged between client and server.

<!-- Example of an HTTP request --><br> GET /index.html HTTP/1.1
Host: www.example.com

84. HTTP Methods

HTTP methods define actions to be performed on resources, such as GET, POST, PUT, and DELETE.

GET /index.html HTTP/1.1
POST /form HTTP/1.1
PUT /resource HTTP/1.1
DELETE /item HTTP/1.1

85. PX to EM Converter

Use this converter to change pixel values to em units based on font size.

<style>
  body { font-size: 16px; }
  h1 { font-size: 2em; }
</style>

Font size is 2em based on the body font size of 16px

86. Keyboard Shortcuts

Keyboard shortcuts allow users to quickly perform actions without using a mouse.

<ul>
  <li>Ctrl + C: Copy</li>
  <li>Ctrl + V: Paste</li>
  <li>Ctrl + Z: Undo</li>
</ul>
  • Ctrl + C: Copy
  • Ctrl + V: Paste
  • Ctrl + Z: Undo

87. HTML Div

The <div> tag is a block-level element used to group content.

<div>This is a div element</div>
This is a div element

88. HTML Tags names

HTML tags are the building blocks of HTML documents. Below is a table listing various HTML tags categorized into rows and columns.

Tag Example
<!DOCTYPE> <!DOCTYPE html>
<html> <html>...</html>
<head> <head>...</head>
<title> <title>Page Title</title>
<meta> <meta charset="UTF-8">
<link> <link rel="stylesheet" href="style.css">
<style> <style>...</style>
<body> <body>...</body>
<header> <header>...</header>
<footer> <footer>...</footer>
<main> <main>...</main>
<nav> <nav>...</nav>
<section> <section>...</section>
<article> <article>...</article>
<aside> <aside>...</aside>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> <h1>Heading 1</h1>
<p> <p>This is a paragraph</p>
<br> <br>
<hr> <hr>
<blockquote> <blockquote>...</blockquote>
<ol>, <ul>, <li> <ul><li>Item 1</li></ul>
<a> <a href="https://example.com">Link</a>
<img> <img src="image.jpg" alt="Image">
<div> <div>...</div>
<span> <span>...</span>
<form> <form>...</form>
<input> <input type="text">
<button> <button>Click Me</button>
<textarea> <textarea>...</textarea>
<select>, <option> <select><option>Option 1</option></select>
<label> <label for="name">Name:</label>
<fieldset> <fieldset>...</fieldset>
<legend> <legend>Form Details</legend>
<table>, <tr>, <th>, <td> <table><tr><td>Cell 1</td></tr></table>
<caption> <caption>Table Caption</caption>
<colgroup>, <col> <colgroup><col></colgroup>
<thead>, <tbody>, <tfoot> <thead>...</thead>
<iframe> <iframe src="frame.html"></iframe>
<script> <script>...</script>
<noscript> <noscript>No Script</noscript>
<canvas> <canvas>...</canvas>
<audio>, <video> <audio>...</audio>
<source> <source src="audio.mp3">
<track> <track src="subtitle_en.vtt" kind="subtitles">
<embed> <embed src="file.pdf">
<object> <object data="file.pdf">
<param> <param name="autoplay" value="true">
<cite> <cite>...</cite>
<abbr> <abbr title="Hypertext Markup Language">HTML</abbr>
<q> <q>Quoted text</q>