Understanding HTML Tags and Elements
HTML Introduction
Hyper Text Markup Language also known as HTML is a the standard markup language for creating Web pages. HTML describes the structure of a Web page.
If you consider a website as a human being then HTML is the skeleton of it. It doesn’t style or add any feature to it but it gives it a structure.
Basic Terms to know about:
Tag:
A tag is a fundamental building block in HTML that defines the start and end of an element. Tags are enclosed in angle brackets (< >) and often come in pairs: an opening tag and a closing tag.
Element:
The HTML element is everything from the start tag to the end tag.
Example: <h1>My First Heading</h1>
attribute:
An attribute provides additional information about an element. Attributes are always written inside the opening tag and follow the pattern: name="viewport".
HTML Basics:
<!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>
</body>
</html>
<!DOCTYPE html> It means that the document is type HTML. It’s a standard syntax. So even if HTML gets an upgradation this syntax wont change
<head></head> Head tag contains all the meta data of the webpage. Meta data is the data that is not visible on web-page but it helps the page to be rendered properly.
<meta charset="UTF-8"> Here charset defines character-set and UTF-8 is a character encoding system that allows computers to represent and store text in a consistent way. It is compatible with ASCII, meaning any valid ASCII text is also valid UTF-8, like English characters, emojis etc.
name="viewport" This meta tag allows developers to specify how the viewport should behave, improving the user experience on various devices specially mobile. content="width=device-width, initial-scale=1.0" We all might use different devices like mobile phones laptops, desktops etc. Here the width of the content should be with of the specific device user’s using.
<title>Document</title> Look upward, you might see “Hashnode — Build blogs and…”. That is the title of this page and you set the title of any page with the help of this tag. Like in this scenario the title of the page will be “Document”.
<body></body> Everything that this body tag contains will be shown on the web page.
<html></html>
HTML Tags:
In this section we will be learning about some of the most important and used HTML tags:
Text Contents:
Header tag:
<h1></h1> tag is known as the header Tag. It is used to create the headers or headlines of a page. Header tags create a hierarchy of headings, where <h1> represents the most significant heading, and <h6> represents the least significant one. These tags not only impact the visual appearance of your content but also affect its accessibility and SEO performance.
<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>
Here you can see h1 being the biggest and h6 being the smallest tag:
Paragraph Tag:
<p></p> this tag is known as the paragraph tag. This is one of the most used tags in HTML. Paragraph always starts on a new line and some space before and after the content for readability.
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
As you can see here that despite having enough space left on the first line, the 2nd paragraph started on a new line.
SPOILER ALERT: This is called block elements. We’ll learn about it later on.
Anchor Tag:
<a></a> This tag is used to attach link on a text.
<a href="<https://hashnode.com/>"> Hashnode website</a>
<a href="<https://hashnode.com/>" target="_blank"> Hashnode website</a>
Here the target = “_blank” suggests the linked webpage will be opened on a new tab and not on the original website tab itself.
By default it is target = “_self”
Strong and Bold tag:
<strong></strong> and <b></b> these two tags are used to make a text bold.
Italic Tag:
<em></em> This tag turns a text into italic.
<p>
Lorem ipsum dolor sit amet <strong>consectetur</strong> ,
<em>adipisicing</em> elit. Ratione consectetur magnam dolore,
<b>odit</b> cum vitae ea possimus deleniti eaque quas!
</p>
Line Break:
<br> used as a line break. It breaks a line from the middle and creates a new line.
Horizontal Rule:
<hr> creates a horizontal line on the web page.
<p>
Lorem ipsum dolor sit amet adipisicing elit. <br />
Ullam debitis iure cupiditate dicta porro, laboriosam officia consequuntur
aut magnam iusto.
</p>
<hr />
Here you can see that the <br> tag created a new line and <hr> created a horizontal line.
List Tags:
There are some tags which are used to create ordered or unordered lists:
Unordered list:
<ul></ul> This tag creates an unordered list. that contains bullets, squares etc.
Ordered list:
<ol></ol> This tag creates an ordered list that contains numeric (both English and Roman) and alphabetic.
List items:
<li></li> This tag contains the individual list items of list. It’s used in both unordered and ordered list.
<ul>
<li>List item-1</li>
<li>List item-2</li>
<li>List item-3</li>
</ul>
<ol>
<li>List item-1</li>
<li>List item-2</li>
<li>List item-3</li>
</ol>
Media Tags
Image Tags:
<img src=" " alt =" "> This tag is used to render an image on the webpage
Video Tags:
<video src=" " controls ></video> This tag is used to render a video on the webpage
Structure and Semantics
The structure and semantic tags are the ones which are not visible on a browser but helps the webpage to be more structured and helps to design it better.
before learning about these tags learn about two types of elements:
1. Block element
Elements which take the entire space of a row. So by default every block element starts on a different line
2. Inline element
Elements which only take the required space of a row not the entire row. So by default on a single line there can be multiple inline elements.
<div>: Imagine this as a box that separates a code snippet from others.<span>This is same as a div but it is not block element but an inline element.<section>: Defines a section in a document.<header>: Represents introductory content or navigation links.<footer>: Represents footer content.
Table:
Table is one of the most useful feature of HTML.
<table border="1">
<tr>
<th>Company</th>
<th>CEO</th>
<th>Country Origin</th>
</tr>
<tr>
<td>Reliance</td>
<td>Mukesh Ambani</td>
<td>India</td>
</tr>
<tr>
<td>Mercedes</td>
<td>Ola Källenius</td>
<td>Germany</td>
</tr>
<tr>
<td>USA</td>
<td>Mark Zuckerberg</td>
<td>USA</td>
</tr>
</table>
<table> is the table tag.
<tr> denotes each row of the table.
<th> denotes the header row of table.
<td> denotes table data.
border="1" Setting border of 1px.
You can modify table with CSS.
Conclusion:
This was a brief introduction to HTML and its commonly used elements. While there are countless other features and capabilities within HTML, it's often best to learn them as you encounter specific needs or challenges. Hopefully, this article has been helpful in getting you started or refreshing your knowledge. Happy coding!