The elements are building blocks that are used to create and structure the content of the webpage. Each element represents different part of the content such as paragraphs, heading and images. Lets discuss some of the key elements
Structural Elements
The html tag and body tag provides basic structure to the web page. They enclose all other tags inside them.
The head tag contains non-visible information like page title, metadata and link to stylesheets.
The Heading tag is used to provide headings to the web page. It range from h1 tag to h6 .
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Structural Elements</title>
</head>
<body>
<h1>This is h1</h1>
<h2>This is h1</h2>
<h3>This is h1</h3>
<h4>This is h1</h4>
<h5>This is h1</h5>
<h6>This is h1</h6>
</body>
</html>
Output:
Text-Formatting Elements
These elements are used to format the text in the web page
The paragraph tag is used to create paragraph <p> i.e text blocks.
In order to break within the text element and start from new line we use <br>.
we can emphasis the text in different ways using like bold(<b>), italic(<i>) and underlined(<u>) etc.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Elements</title>
</head>
<body>
<p>This is a sample text</p>
<p> You are not lost until you stop trying</p>
<p>Start your day with <b>Positive Thought</b>.</p>
<p>The greatest thing in the world is <u>Art</u></p>
<p></p><i>Don't doubt your ability</i></p>
</body>
</html>
Output:
Media Elements
These elements are used to represent media like images, video and audio in the webpage
<img> - It is used to embed image into an web page.
<audio> and <video> - These are used to embed videos and audios into the web page.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./stefan-cosma-0gO3-b-5m80-unsplash.jpg" height="200" alt="This a focus">
<video controls src="../video (2160p).mp4" height="400"></video>
<audio controls src="../sample-3s.mp3"></audio>
</body>
</html>
Output:
Interactive Elements
These elements are used to bring interactivity to the users
<a> - This tag is used to provide hyperlink where you can able to navigate or interact to other webpage.
<button> - This tag is used to provide a clickable area i.e button which performs some action based on the input.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p> This button will directly get you to google search :) </p>
<a href="https://www.google.com"> <button>Google</button></a>
</body>
</html>
Output:
Data Organization Elements
These elements are used to organize different types of data and present in understandable way
<ul> and <ol> -These are used to represent list of items. ul means unordered list and ol means ordered list.
table - This tag is used to represent table in the web page.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>These are things required while learning to code or during coding</p>
<ol>
<li>Patience</li>
<li>Time</li>
<li>Logical Thinking</li>
</ol>
<p> List of concepts in programming</p>
<ul>
<li>variables</li>
<li>loops</li>
<li>functions</li>
</ul>
<table border="2px">
<tr>
<th>
S.NO
</th>
<th>
Topics
</th>
</tr>
<tr>
<td>1</td>
<td>HTML</td>
</tr>
<td>2</td>
<td>CSS</td>
</table>
</body>
</html>
Output:
