HTML tags, their purpose and example of how to use them in code Part 1
HTML Tags Coding Examples:
<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>
<head>– Defines information about the document
<head>
<title>My Webpage</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<title>– Defines the title of the document
<head>
<title>My Webpage</title>
</head>
<body>– Defines the document body
<body>
<h1>Welcome to my webpage</h1>
<p>This is some content on my webpage</p>
</body>
<h1>to<h6>– Defines headings
<h1>Welcome to my webpage</h1>
<h2>Introduction</h2>
<h3>About me</h3>
<h4>My interests</h4>
<h5>Contact me</h5>
<h6>Footer</h6>
<p>– Defines a paragraph
<p>This is some content on my webpage</p>
<a>– Defines a hyperlink
<a href="https://www.google.com">Google</a>
<img>– Defines an image
<img src="image.jpg" alt="My image">
<ul>– Defines an unordered list
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>– Defines an ordered list
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<li>– Defines a list item
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div>– Defines a division or section
<div>
<h1>Welcome to my webpage</h1>
<p>This is some content on my webpage</p>
</div>
<span>– Defines a small section of text
<p>This is <span>some</span> content on my webpage</p>
<form>– Defines a form for user input
<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>
<input>– Defines an input field
<input type="text" id="name" name="name">
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
<label>– Defines a label for an input field
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>
<textarea>– Defines a multiline input field
<textarea id="message" name="message"></textarea>
<select>– Defines a drop-down list
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="audi">Audi</option>
</select>
<option>– Defines an option in a drop-down list
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="audi">Audi</option>
</select>
<button>– Defines a clickable button
<button type="button">Click me</button>
<label>– Defines a label for an input element
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<table>– Defines a table
<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>
<tr>– Defines a table row
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<th>– Defines a table header cell
<th>Firstname</th>
<td>– Defines a table data cell
<td>John</td>
<thead>– Defines a table header
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>– Defines a table body
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>25</td>
</tr>
</tbody>
<tfoot>– Defines a table footer
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>$50</td>
</tr>
</tfoot>
<col>– Defines a column within a table
<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>
<colgroup>– Specifies a group of one or more columns in a table for formatting
<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>
<caption>– Defines a table caption
<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>
<br>– Defines a line break
<p>This is some text.<br>This is some more text.</p>
<hr>– Defines a thematic break between paragraphs
<p>This is some text.</p>
<hr>
<p>This is some more text.</p>
<style>– Defines a style sheet
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
<link>– Defines the relationship between a document and an external resource
<head>
<link rel="stylesheet" href="styles.css">
</head>
<meta>– Provides metadata about the document
<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>
<script>– Defines a client-side script
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World!";
}
</script>
<noscript>– Defines an alternate content for users that do not support client-side scripts
<noscript>
<p>JavaScript is disabled in your browser.</p>
</noscript>
<iframe>– Defines an inline frame
<iframe src="https://www.w3schools.com" title="W3Schools" width="100%" height="300"></iframe>
<embed>– Defines a container for an external application or interactive content
<embed src="helloworld.swf" width="550" height="400">
<object>– Defines an embedded object within an HTML document
<object data="helloworld.swf" width="550" height="400"></object>
<param>– Defines a parameter for an object element
<object data="helloworld.swf" width="550" height="400">
<param name="bgcolor" value="#FFFFFF">
<param name="movie" value="helloworld.swf">
</object>
<canvas>– Used to draw graphics, animations, and other visual images on a web page
<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>
<svg>– Used to create graphics and animations
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<audio>– Used to play audio files on a web page
<audio controls>
<source src="music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video>– Used to play video files on a web page
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<source>– Used to specify multiple media resources for media elements like<audio>and<video>
<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>
<track>– Used to specify timed text tracks for media elements like<audio>and<video>
<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>
<map>– Used to define an image map
<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>
<area>– Used to define a clickable area within an image map
<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
Leave a Comment