Home Blog HTML Tags Coding Examples
HTML

HTML tags, their purpose and example of how to use them in code Part 1

HTML Tags Coding Examples:

  1. <html> – Defines an HTML document
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Welcome to my webpage</h1>
    <p>This is some content on my webpage</p>
  </body>
</html>
  1. <head> – Defines information about the document
 
<head>
  <title>My Webpage</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>

 
     
  1. <title> – Defines the title of the document
    2.  
 
 
<head>
  <title>My Webpage</title>
</head>

 
     
  1. <body> – Defines the document body
    2.  
 
 
<body>
  <h1>Welcome to my webpage</h1>
  <p>This is some content on my webpage</p>
</body>

 
     
  1. <h1> to <h6> – Defines headings
    2.  
 
 
<h1>Welcome to my webpage</h1>
<h2>Introduction</h2>
<h3>About me</h3>
<h4>My interests</h4>
<h5>Contact me</h5>
<h6>Footer</h6>

 
     
  1. <p> – Defines a paragraph
    2.  
 
 
<p>This is some content on my webpage</p>

 
     
  1. <a> – Defines a hyperlink
    2.  
 
 
<a href="https://www.google.com">Google</a>

 
     
  1. <img> – Defines an image
    2.  
 
 
<img src="image.jpg" alt="My image">

 
     
  1. <ul> – Defines an unordered list
    2.  
 
 
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

 
     
  1. <ol> – Defines an ordered list
    2.  
 
 
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

 
     
  1. <li> – Defines a list item
    2.  
 
 
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

 
     
  1. <div> – Defines a division or section
    2.  
 
 
<div>
  <h1>Welcome to my webpage</h1>
  <p>This is some content on my webpage</p>
</div>

 
     
  1. <span> – Defines a small section of text
    2.  
 
 
<p>This is <span>some</span> content on my webpage</p>

 
     
  1. <form> – Defines a form for user input
    2.  
 
 
<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">
  <input type="submit" value="Submit">
</form>

 
     
  1. <input> – Defines an input field
    2.  
 
 
<input type="text" id="name" name="name">
<input type="email" id="email" name="email">
<input type="submit" value="Submit">

 
     
  1. <label> – Defines a label for an input field
    2.  
 
<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</form>

 
     
  1. <textarea> – Defines a multiline input field
    2.  
 
 
<textarea id="message" name="message"></textarea>

 
     
  1. <select> – Defines a drop-down list
    2.  
 
 
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="audi">Audi</option>
</select>

 
     
  1. <option> – Defines an option in a drop-down list
    2.  
 
 
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="audi">Audi</option>
</select>

 
     
  1. <button> – Defines a clickable button
    2.  
 
 
<button type="button">Click me</button>

 
     
  1. <label> – Defines a label for an input element
    2.  
 
 
<label for="name">Name:</label>
<input type="text" id="name" name="name">

 
     
  1. <table> – Defines a table
    2.  
 
 
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
    <td>25</td>
  </tr>
</table>

 
     
  1. <tr> – Defines a table row
    2.  
 
 
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>30</td>
</tr>

 
     
  1. <th> – Defines a table header cell
    2.  
 
 
<th>Firstname</th>

 
     
  1. <td> – Defines a table data cell
    2.  
 
 
<td>John</td>

 
     
  1. <thead> – Defines a table header
    2.  
 
 
<thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
</thead>

 
     
  1. <tbody> – Defines a table body
    2.  
 
 
<tbody>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
    <td>25</td>
  </tr>
</tbody>

 
     
  1. <tfoot> – Defines a table footer
    2.  
 
 
<tfoot>
  <tr>
    <td colspan="2">Total</td>
    <td>$50</td>
  </tr>
</tfoot>

 
     
  1. <col> – Defines a column within a table
    2.  
 
 
<table>
  <colgroup>
    <col style="background-color: yellow;">
    <col style="background-color: lightgreen;">
  </colgroup>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>

 
     
  1. <colgroup> – Specifies a group of one or more columns in a table for formatting
    2.  
 
 
<table>
  <colgroup>
    <col style="background-color: yellow;">
    <col style="background-color: lightgreen;">
  </colgroup>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

 
     
  1. <caption> – Defines a table caption
    2.  
 
 
 
<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

 
     
  1. <br> – Defines a line break
    2.  
 
 
<p>This is some text.<br>This is some more text.</p>

 
     
  1. <hr> – Defines a thematic break between paragraphs
    2.  
 
 
<p>This is some text.</p>
<hr>
<p>This is some more text.</p>

 
     
  1. <style> – Defines a style sheet
    2.  
 
 
<style>
  body {
    background-color: lightblue;
  }
  h1 {
    color: white;
    text-align: center;
  }
  p {
    font-family: verdana;
    font-size: 20px;
  }
</style>

 
     
  1. <link> – Defines the relationship between a document and an external resource
    2.  
 
 
<head>
  <link rel="stylesheet" href="styles.css">
</head>

 
     
  1. <meta> – Provides metadata about the document
    2.  
 
 
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

 
     
  1. <script> – Defines a client-side script
    2.  
 
 
<script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World!";
  }
</script>

 
     
  1. <noscript> – Defines an alternate content for users that do not support client-side scripts
    2.  
 
 
<noscript>
  <p>JavaScript is disabled in your browser.</p>
</noscript>

 
     
  1. <iframe> – Defines an inline frame
    2.  
 
 
<iframe src="https://www.w3schools.com" title="W3Schools" width="100%" height="300"></iframe>

 
     
  1. <embed> – Defines a container for an external application or interactive content
    2.  
 
 
<embed src="helloworld.swf" width="550" height="400">

 
     
  1. <object> – Defines an embedded object within an HTML document
    2.  
 
 
<object data="helloworld.swf" width="550" height="400"></object>

 
     
  1. <param> – Defines a parameter for an object element
    2.  
 
 
<object data="helloworld.swf" width="550" height="400">
  <param name="bgcolor" value="#FFFFFF">
  <param name="movie" value="helloworld.swf">
</object>

 
     
  1. <canvas> – Used to draw graphics, animations, and other visual images on a web page
    2.  
 
 
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
</script>

 
     
  1. <svg> – Used to create graphics and animations
    2.  
 
 
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

 
     
  1. <audio> – Used to play audio files on a web page
    2.  
 
 
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

 
     
  1. <video> – Used to play video files on a web page
    2.  
 
 
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

 
     
  1. <source> – Used to specify multiple media resources for media elements like <audio> and <video>
    2.  
 
 
<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 tag.
</video>

 
     
  1. <track> – Used to specify timed text tracks for media elements like <audio> and <video>
    2.  
 
 
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
  Your browser does not support the video tag.
</video>

 
     
  1. <map> – Used to define an image map
    2.  
 
 
<img src="worldmap.jpg" alt="World Map" usemap="#worldmap">
<map name="worldmap">
  <area shape="rect" coords="0,0,82,126" href="northamerica.html" alt="North America">
  <area shape="circle" coords="90,58,3" href="europe.html" alt="Europe">
  <area shape="poly" coords="143,124,170,139,169,171,139,166,135,136" href="africa.html" alt="Africa">
</map>

 
     
  1. <area> – Used to define a clickable area within an image map
    2.  
 
 
<img src="worldmap.jpg" alt="World Map" usemap="#worldmap">
<map name="worldmap">
  <area shape="rect" coords="0,0,82,126" href="northamerica.html" alt="North America">
  <area shape="circle" coords="90,58,3" href="europe.html" alt="Europe">
  <area shape="poly" coords="143,124,170,139,169,171,139,166,135,136" href="africa.html" alt="Africa">
</map>

 
These are just a few more examples of HTML tags that can be used to create a wide variety of content on a web page. We will discuss more HTML Tags Coding Examples in the Part 2
 
Photo by Miguel Á. Padriñán
 
 
 
 
  
 
Azeem Khan
 
 
  
 
 
 Leave a Comment 
 
 
 
 
 
 Share  
 
 Published by 
 
Azeem Khan 
 
 
 
 Tags:  HTML 
 
 
2 years ago
 
 
  
 
 
 
 
 
 
 
Recent Posts
 
 
 
 
 
 
  
Scope of Accounting & Finance: A Detailed Overview
 
Scope of accounting and finance: The fields of accounting and finance are pivotal to the…
 
 
4 months ago
 
 
 
 
 
 
 
 
  
Top Programming Languages in 2024 That Everyone Should Know
 
Top Programming Languages in 2024: Staying ahead in the ever-evolving field of programming requires keeping…
 
 
4 months ago
 
 
 
 
 
 
 
 
  
Discover the Top Nihari Restaurants in Karachi | Best Nihari Spots
 
Top Nihari Restaurants in Karachi, the bustling metropolis of Pakistan, is a food lover's paradise.…
 
 
4 months ago
 
 
 
 
 
 
 
 
  
Chapter 3 Advancing Your Skills: Intermediate Python Concepts
 
Advancing Your Skills: Welcome back, Python programmers! Now that you've grasped the fundamental building blocks…
 
 
5 months ago
 
 
 
 
 
 
 
 
  
Chapter 2: Building the Foundation: Python Fundamentals
 
Building the Foundation: Welcome back, aspiring Python programmers! In the previous chapter, we explored the…
 
 
5 months ago
 
 
 
 
 
 
 
 
  
Chapter 1: Dive into Python: Your Guide to Mastering the Beginner-Friendly Powerhouse
 
Chapter 1: Dive into Python: Welcome, aspiring programmers! Have you ever felt the thrill of…
 
 
5 months ago
 
 
 
 
 
 
 
 
  
  
                 
This website uses cookies.