HTML tutorials :- Tags in HTML.
"Building Blocks of the Web: Exploring the Versatility and Functionality of HTML Tags"
A markup language called HTML is used to make web pages. A web page's structure and content are defined by a variety of tags. To build functional and well-structured web pages, an understanding of HTML tags is necessary. We'll examine HTML tags in more detail in this blog and explain how they function.
What are HTML tags?
A web page's structure and content are specified using HTML tags. Angle brackets surround them, and they appear in pairs, with the opening tag coming before the content and the closing tag coming after the content. A paragraph of text is designated by the <p> tag, which is expressed as <p>Content goes here</p>.
Additionally, HTML tags can include attributes that change how the tag behaves or offer more details about the element. The opening tag is expanded with attributes, which are formatted as attribute="value". For instance, the <a> element can include characteristics like href="https://example.com" to indicate the link's URL when it is used to generate hyperlinks.
Syntax
<tag> content </tag>
Common Tags
Following are a few frequently used HTML tags:
<html> - The tag <HTML> is used to denote the beginning of an HTML document. HTML code is found anywhere between the opening and closing <html> tags.
<head> - This tag is used to specify the HTML document's head section. The page title, links to stylesheets, and other metadata are all found in the document's head section.
<body> - This element is used to specify an HTML document's title. Search engines utilize the title to index the page and show it in the browser's title bar.
<h1> to <h6> - Headings are defined by these tags. The level of the heading is indicated by the number, with <h1> being the most significant and <h6> being the least.
<p> - This tag is used to define paragraphs of text.
<div> - To create a container for HTML content, use this element. To bring together comparable items, use the div tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
</head>
<body>
<head>This is the header.</head>
<div>
<h1>This is heading.</h1>
<p>This is paragraph.</p>
</div>
</body>
</html>
Image and Anchor tags
Image tag
To show pictures on a web page, an HTML document uses the <img> tag. Because it is an empty tag, the closing tag is not necessary. It is independent and includes a set of attributes that describe the characteristics of the image.
Here is an illustration of how to show an image on a web page using the <img> tag:
<img src="https://source.unsplash.com/cars" alt= "Car image">
The src property in this illustration indicates the URL or file location of the image file. If the user is using a screen reader or the picture cannot be loaded, the alt property offers alternate text that is shown.
Anchor tag
In HTML, connections to other web pages or resources are made with the <a> tag. Link text is the text that appears as a clickable link on the web page, and the tag is expressed as <a href="url">link</a>, where href provides the URL or file path of the linked resource.
Here is an illustration of how to make a hyperlink using the <a> tag:
<a href="https://google.com" target="_blank">This link will open google for you.</a>
In this example, the href attribute specifies the URL of the linked web page and target specifies where to open the linked document. The _blank value opens the linked document in a new window or tab.
List and Table tag
List tag
To generate ordered lists, unordered lists, and definition lists, HTML offers a variety of list tags. Lists help organize and structure information presentations.
Here is an overview of list tags in HTML:
<ul> - Unordered List: This tag is used to create a bulleted list. Each list item is marked with a bullet point.
<ul type="disc"> <li>This is my first unordered list</li> <li>This is my second unordered list</li> <ul> <li>this is nested list</li> </ul> <li>This is my third unordered list</li> </ul><ol> - Ordered List: This tag is used to create a numbered list. Each list item is marked with a number.
<ol type="I"> <li>This is my first ordered list</li> <li>This is my second ordered list</li> <ol type="a"> <li>this is second nested list</li> </ol> <li>This is my third ordered list</li> </ol>
Table tag
To construct data tables on a web page, use the HTML <table> element. Tables help organize and structure information presentations. Several more tags are needed to specify the table rows, cells, headers, and footers in addition to the tag used to define the table and its contents.
Here is an illustration of how to make a simple table using the <table> tag:
<table>
<thead>
<tr>
<th>Name</th>
<th>Employee Id</th>
<th>Employee Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>XYZ</td>
<td>30013</td>
<td>Programmer</td>
</tr>
<tr>
<td>ABC</td>
<td>30023</td>
<td>Developer</td>
</tr>
<tr>
<td>PQR</td>
<td>34113</td>
<td>Dancer</td>
</tr>
</tbody>
</table>
Form and Input tag
Two crucial HTML tags required to build online forms are the "form" and "input" tags. A form is a portion of a web page where users may enter data that can later be processed by a server after being submitted. The types of data that a user can enter into a form are specified by the input tags.
A summary of these tags is provided below:
<form action="backend.php">
<div>
<label for="name">Name: </label>
<input type="text" name="myname" id="name">
</div>
<br>
<div>Role: <input type="text" name="myrole"></div>
<br>
<div>Email: <input type="email" name="myemail"></div>
<br>
<div>Date: <input type="date" name="mydate"></div>
<br>
<div>Bonus: <input type="number" name="mybonus"></div>
<br>
<div>Are you eligible? : <input type="checkbox" name="myeligibility"></div>
<br>
<div>
Gender: Male <input type="radio" name="mygender"> Female <input type="radio" name="mygender"> other <input
type="radio" name="mygender">
</div>
<br>
Write about yourself: <br><textarea name="mytext" cols="30" rows="10"></textarea>
<br>
<div>
<label for="car">Car: </label>
<select name="mycar" id="car">
<option value="ind">Indigo</option>
<option value="swf">Swift</option>
<option value="dzr">Dzire</option>
<option value="thr" selected>Thar</option>
</select>
</div>
<br>
<div>
<input type="submit" value="Submit Now">
<input type="reset" name="Reset Now">
</div>
</form>
By using the <form> and <input> tags, you can create powerful web forms that allow users to input data and submit it for processing.
Semantic tag
HTML semantic tags are used to provide material on a web page structure and meaning. These tags are intended to provide a clear description of a page's content that search engines and other web-crawling equipment can readily understand. Web designers may use semantic tags to make their web pages more user-friendly, accessible, and search engine-friendly.
There are many examples of Semantics. You can take the reference of the internet to view all. Here are some of the important semantic elements-
<header>
<nav>
<section>
<article>
<footer>
<summary>
<h3>Semantic tags.</h3>
<details>
<summary>Tap to expand.</summary>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia quas distinctio cupiditate illum eaque autem deserunt officiis impedit unde temporibus, eum omnis esse et alias consequuntur debitis. Unde quisquam voluptatum quas necessitatibus quibusdam itaque delectus officia neque minima, ab quae?
</details>
Conclusion
In conclusion, HTML tags are a crucial component of web development since they provide the text on a web page structure and meaning. Web developers now find it simpler to increase the usability, accessibility, and SEO of their websites thanks to HTML5's usage of semantic tags. It's essential to comprehend HTML tags and use them appropriately if you want to build well-organized, successful web pages that are simple to use.
Recommended Books
"Get ready to create stunning websites from scratch with in-depth manual, 'MASTERING HTML, CSS & Java Script Web' Publishing. This book offers everything you need to succeed, regardless of your level of experience with web development or desire to improve it. Order your copy today and start developing professional-looking websites!"