Basic HTML Tags
HTML Tags: What Are They?
HTML tags are the words that determine the syntax and appearance of a web page in your web browser. Almost all tags include an opening tag and a closing tag. Consider the beginning and closing tags, respectively. The closing tag, which includes an extra forward-slash (/) character, has the same text as the opening tag. One hundred HTML tags are present.
- <A> </A>
This tag enables you to create links to web pages, your page, social networking sites, products within online stores, and more. The primary feature of this HTML element is the href (Hypertext Reference) attribute, which provides a link to a desired website. Target is an additional feature that may be used to launch a link in a new window, keeping visitors' attention they are currently on.
- <B> </B>
It would be best to emphasize certain words to make the reader aware of the most significant terms in a lengthy paragraph. And you use bolded wording to do that.
- <BODY> </BODY>
the portion of an HTML page that is the body. Though it is only a tag that indicates the visible content of the page—where the majority of the material resides—this is a necessary component of all HTML compositions.
- <BR>
Using this simple HTML element, we can tell where we want text breaks or blank lines in the text. In actuality, including a few gaps allows our content to breathe, facilitating reading and comprehension.
How to Verify the HTML Tags on Your Website
Examining your page's HTML will allow you to determine whether the HTML tags currently on your page are being utilized appropriately. Your web browser is all you need to do this.
You should see the HTML on your website.
- With Google Chrome open, right-click on your website. Press "Inspect."
- The HTML code will appear in a box on the side or bottom of your website.
- To locate certain tags or elements, use Ctrl + F.
How do Web Pages Read HTML Tags?
Servers read HTML code. As you're reading this tutorial, it will read the HTML from top to bottom. You may use as many or as few tags as you desire when formatting material. However, there are a few fundamental HTML elements and guidelines that you must adhere to.
Three components are required for an HTML tag:
- An opening tag will begin with the symbol <>.
- Content: a brief set of guidelines for displaying the on-page element
- A closing tag, which will include a </> at the conclusion
Some HTML tags, nevertheless, are capable of being left open. That implies that a </> is not required to close the HTML element. Unclosed tags are often used for line breaks or metadata.
How Do HTML Tags and Attributes Differ From One Another?
The differences between HTML tags, elements, and attributes should be understood even if this article only focuses on HTML tags.
A piece of material on a web page is called an HTML element. An HTML tag influences the display of an HTML element, and that element's properties are described via an HTML attribute.
The following summarizes the interactions between elements, tags, and attributes:
- An on-page element's presentation may be customized using HTML tags. They come before and after the element's content, starting and ending with a < and a >. <b> Bold Tag</b>, for example
- Within the tags are the on-page contents, which are HTML elements. (<b> Bold Mark</b>)
- HTML attributes are located within the HTML tag and provide further details about HTML components.
List of Fundamental HTML Tags
Here is our list of fundamental HTML tags:
- <a> For the website link
- To make text bold, use <b>.
- <strong> denotes bold text with emphasis
- <body> the main HTML section
- <br>In case of a break
- <div> represents a section or division inside an HTML page.
- <h1>... about titles
- <i> to create an italicized text
- <img> refers to pictures inside the document.
- An ordered list is represented by <ol>, and an unordered list by <ul>.
- A list item in a bulleted (ordered list) is <li>.
- <p> For the paragraph
- Use <span> to style a specific text section.
Fundamental HTML Tags
- Head Tag
Each element that describes the page is included inside the head tag <head>.
- Title Tag
The HTML title of a page is specified by the title element <title> and appears in the browser's title bar.
- Body Tag
You place the content of your web page within the <body> body element.
- Paragraph Tag
The <p> paragraph element defines an online page's paragraph.
- Heading Tag
To specify the header of an HTML document, use the HTML heading element. The tag with the most importance is <h1>, while the tag with the lowest is <h6>.
Example
<!DOCTYPE html>
<html>
<head>
<title> My First Page </title>
</head>
<body>
<p> This is k chandan </p>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Output
Tags for Formatting
- Emphasis tag
You may highlight a certain text in a paragraph using the HTML <em> element.
- Bold Tag
You may make the text bold by using the <b> element.
- Italic Tag
You may make the text italic by using the <i> element.
- Underline Tag
You may make the text underlined by using the <u> element.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> This is <em>k chandan </em></p>
<p> This is the <b>HTML</b> tags <u><article></article></u> </p>
</body>
</html>
Output
Link Tag
A page is linked to another page with the element. Using the href property, one may construct
Example Code
<!DOCTYPE html>
<html>
<head>
<title> My First Page </title>
</head>
<body>
<p> Welcome to <em> article </em></p>
<p>
This is the <b>HTML</b> tags <u>article</u>
<a href="https://www.javatpoint.com/"> This is the link to javatpoint website</a>
</p>
</body>
</html>
Output
List Tag
When entering the items in the listed sequence, you utilize the <li> element. Lists come in two flavors.
- Ordered list <ol>
- Unordered list <ul>
Example code
<!DOCTYPE html>
<html>
<head>
<title> My First Page </title>
</head>
<body>
<ol>
<li>HTML</li>
<li>Tags</li>
<li>Article</li>
</ol>
<ul>
<li>HTML</li>
<li>Tags</li>
<li>Article</li>
</ul>
</body>
</html>
Output
Image Tag
When integrating a picture into an HTML text, use the element. Within the tag, you must provide the image's source.
Example code
<!DOCTYPE html>
<html>
<head>
<title> My First Page </title>
</head>
<body>
<center>
<img src="https://www.tutorialandexample.com/images/logo.png">
</center>
</body>
</html>
Output
The Table Tag
- To build a table on an HTML page, use the <table> element.
- The rows in the table are created using the table row (<tr>) tag, and the data is entered using the table data (<td>) tag.
- The code is entered directly into the HTML file using the style (<style>) element to add methods to the content.
Example code
<!DOCTYPE html>
<html>
<head>
<title> My First Page </title>
</head>
<style type="text/css">
table, th, td{
border: 1px solid black;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Saving</th>
</tr>
</thead>
<tr>
<td>January</td>
<td>Rs.400</td>
</tr>
<tr>
<td>February</td>
<td>Rs.700</td>
</tr>
</table>
</body>
</html>
Output
Conclusion
In conclusion, anybody interested in web development should become proficient with the fundamental HTML tags. These tags are the foundation for organizing and designing visually attractive web pages. HTML provides the framework that the whole web is constructed upon, from establishing the general structure of the page with `<html>}, {<head>}, and `<body>} to organizing content with {<p>}, {<h1>} through {<h6>}, and lists.
Additionally, by adding hyperlinks and pictures to web pages, components like {<a>} and `<img>} improve the user experience and ease navigation. Proficiency in using these tags is essential for developing interactive and useful websites.
As you continue your web development adventure, you'll surely run into increasingly complex HTML components and approaches. Nonetheless, developing a firm knowledge of these foundational tags is necessary to comprehend web development principles fully. Now explore, letting your imagination run wild as you use HTML to create engaging web content.