What are HTML elements???
Table of contents
An HTML element is a piece of text wrapped by <>, It is referred to as HTML tags to be specific. HTML offers a wide variety of such tags and this increases with every version of HTML.
Why are the tags so important?
The tags give us a structure in the website and allow the browsers to know which is what. It also helps web crawlers to scrap the web for better visibility or data scraping.
Each set of tags has its own unique purpose and behavior. For example <img> tag holds the source link to an image and it is used to display images.
HTML tags can be divided into different categories, Some of the important ones are
Structural Tags: These tags are used to create the overall structure of web pages and it also helps the crawler look for the things it needs. Some of these tags are
<html>,<body>and<head>Headings and paragraphs: These tags are used to organize the title and paragraphs in the webpage. The crawler uses these tags to check the heading/title and content of the page. Tags are
<h1>which ranges fromh1toh6and there is<p>tag for the paragraphs.Lists: These tags are used to create lists in a webpage. This can be an ordered list or an unordered list. The tag for the ordered list is
<ol>and the tag for the unordered list is<ul>and the<li>tag is used to specify the list item inside the ordered or unordered list.Links: The tag for creating a hyperlink is
<a>tag and we can use it to create hyperlinks and add the link tohrefattribute and we can also have atargetwhich can be assigned to_blank, if we do this the hyperlink will open in a new tabImages: The tag
<img>used to show images in a page. It has attributes forsrcwhich points to the source of the image and analttag which shows up in case the image doesn't load up.alttag helps the crawler and adds to the accessibility of the web pageTables: The tags which help us to create a table falls under this category. The tags are
<table>,<tr>and<td>. Where<table>is the parent tag and<tr>represents the table row and<td>represents the table data?Forms: The tags which help us to create forms fall under this section.
<form>,<input>and<button>are some examples of form tags.
How does HTML semantics affect SEO?
What is SEO you might ask?
Well, SEO stands for Search Engine Optimization. Whenever we search google for something the google crawler crawls the websites to look for relevant information and returns the results.
Suppose your website has the exact information someone is looking for but your web pages are poorly optimized for SEO, In that case, that person will no see your web page in the first few pages of the search maybe not even later. So proper SEO is desired in websites.
HTML semantics come to the rescue for this. <h1> should only be used for the main heading of the website, if there are two <h1> tags the crawler will get confused as to which is the main heading. Similarly the <h2> and <h3> Tags are used for the subheadings and should be used in that manner.
Another useful thing is the <meta> tag which can be used to provide additional information about the web page. Using HTML tags correctly and consistently can help search engines to understand the content of a page and return to the web page when a user searches for the information.
HTML semantics are often overlooked by beginners but it is one of the most important overlooked topics because using correct semantics makes the website more readable to machines and machines are the ones who show your website to everyone.