HTML (Hyper Text Markup Language) is the essential structure of every webpage. It utilizes various tags to structure content, improve readability, and enhance SEO performance. This article will explore the most fundamental HTML5 tags, including semantic tags, non-semantic tags, block elements, inline elements, attributes, and the HTML boilerplate.
Topics covered in this article are:
What are HTML Tags?
HTML tags are unique keywords enclosed within angle brackets (<>). They define elements on a webpage. The majority of HTML tags appear in pairs, consisting of an opening tag (<>) and a closing tag (</>), which help define and structure content effectively.
Example:
<p>This article discusses HTML </p>
HTML Boilerplate
An HTML boilerplate refers to the basic structure of an HTML document. It includes essential tags that every web page needs.
Basic HTML Boilerplate Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>We are discussing HTML boilerplate</title>
</head>
<body>
<h1>Welcome to upskillinghub HTML basics article</h1>
<p>Below you will get clear idea on html boilerplate</p>
</body>
</html>
- <!DOCTYPE html> – Declares the document as HTML5.
- <html> – The roote lement of the html page.
- <head> – Head Includes metadata and the document title..
- <meta> –Defines character encoding and viewport settings.
- <title> – Sets the page title visible in the browser tab.
- <body> – Encloses all the visible content.
Semantic HTML Tags
Semantic HTML elements clearly define the purpose of webpage content, enhancing both SEO and accessibility. These tags help search engines understand the structure of a page, improving rankings.
Common Semantic HTML Tags:
- <header> – Represents introductory or navigation-related content.
- <nav> – Defines a section specifically for navigation links.
- <section> – Organizes related content into distinct sections, improving readability, and structure.
- <article> – Defines independent, self-contained content, such as blog entries, news articles, or user-generated posts, making it more readable and SEO-friendly.
- <aside> – Contains supplementary information like sidebars or widgets.
- <footer> – Defines the footer section, including copyright, links, or additional details.
Example:
<section>
<h2>HTML Basics</h2>
<p>HTML structures webpages using various elements.</p>
</section>
Non-Semantic HTML Tags
Non-semantic elements do not convey specific meaning about their content but are used for layout and styling purposes. They are essential for web design but do not contribute to SEO directly.
Common Non-Semantic Tags:
- <div> – A block-level container for grouping multiple elements.
- <span> – An inline container used for applying styles to parts of text.
- <b> – Makes text bold without indicating emphasis or importance.
- <i> – Italicizes text purely for styling, without adding semantic value.
Using semantic HTML improves search engine rankings, enhances user experience, and makes webpages more accessible to screen readers.
Example:
<div>
<p>This is a paragraph inside a div.</p>
</div>
<i>This is will appear in Italic.</i>
Block-Level Elements
Block elements occupy the full width available and begin on a new line.
Examples of Block Elements:
- <div> – A generic container.
- <p> – Defines a paragraph.
- <h1> to <h6> – Headings with different importance levels.
- <ul> and <ol> – Unordered and ordered lists.
- <li> – List items within lists.
Example:
<div>
<h1>Website Title</h1>
<p>This is a paragraph.</p>
</div>
Inline Elements
Inline elements do not start on a new line and occupy only the required width.
Examples of Inline Elements:
- <span> – A container for inline content.
- <a> – Creates hyperlinks.
- <strong> – Displays text in bold with emphasis.
- <em> – Italicizes text to show importance.
- <img> – Displays images.
Example:
<p>This is <strong>bold</strong> and <em>italic</em> text.</p>
HTML Attributes
Attributes enhance HTML elements by providing additional information.
Commonly Used Attributes:
- href – Defines the destination URL for hyperlinks, guiding users to internal or external pages.
- src – Defines the source path of an <img>.
- alt – Provides alternative text for images.
- id – Assigns a unique identifier to an element, enabling precise styling and scripting.
- class – Groups multiple elements under a shared style.
- style – Adds inline styling to elements.
Example:
<a href="https://example.com">Visit Example</a>
<img decoding="async" src="image.jpg" alt="A descriptive image">
Understanding Div tag, Id and Class attributes
The <div> tag, along with id and class attributes, help structure, style, and organize web page elements effectively.
<div> (Division)
A <div> is a block-level container used to structure multiple elements.
Example:
<div>
<h2>Section Title</h2>
<p>Content inside a div.</p>
</div>
Id Attribute
The id attribute uniquely identifies an element, allowing targeted styling and JavaScript interactions.
<p id="intro">This paragraph has a unique ID.</p>
class Attribute
The class attribute groups multiple elements under a shared style, allowing for consistent formatting.
Example:
<p class="highlight">This text follows a common style.</p>
<p class="highlight">Another paragraph with the same class.</p>
HTML Comments
HTML comments help developers by adding notes within the code. These comments do not affect the webpage display.
Syntax:
<!-- This is a comment -->
Example:
<p>This is a paragraph.</p>
<!-- This comment explains the paragraph above -->
Practice HTML5 Practically
The best way to understand HTML5 is by practicing it hands-on. Below is a simple project that demonstrates the use of basic HTML5 tags, including headings, paragraphs, links, images, and lists. Try coding it yourself by replicating the output—it will help you grasp how different elements work together to structure a webpage. Practicing with real examples will strengthen your understanding and improve your coding skills.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practicing Basic HTML Tags</title>
</head>
<body>
<h2>Implementing Few Tags in Paragraph</h2>
<p>html stands for hypertext markup language. It is used to create structure of web pages<br>
Here i used a <strong>(Break and Strong)</strong> tags to separate/devide/break content and strong tag used to give importance and highlight (Break and Strong)<br>
<hr>
<pre>html contains head tag and body
in head tag contains meta and tittle
in body tage contains all visible content</pre>
<pre>Here I used <Strong>PRE TAG</Strong> to display same written format</pre>
<hr>
<b>attributes:</b> are additional information about tags<br>
Here I used <strong>(BOLD TAG)</strong> highlight the content
<hr>
html contains block elements and in line elements</p>
<hr>
<h2>Table of Contents</h2>
<ol>
<li> <a href="https://developer.mozilla.org/en-US/">I'm a Web Developer Practing html is a basic thing for me................1</li></a>
<li>Being a web developer, I find practicing HTML essential..................2</li>
<li>For a web developer like me, working with HTML is a basic necessity......3</li>
<li>Practicing HTML is just a standard part of my web development routine....4</li>
<li>HTML practice is a basic yet crucial part of my web development journey..5</li>
</ol>
</body>
</html>
Conclusion
Understanding basic HTML tags is crucial for creating well-structured, SEO-friendly webpages. Differentiating between semantic and non-semantic tags, recognizing block and inline elements, and utilizing attributes correctly contribute to clean, efficient, and accessible code. Additionally, the HTML boilerplate provides a solid foundation for every webpage.
HTML5 includes hundreds of tags, each serving a unique purpose. To master web development, explore and experiment beyond your limits by practicing consistently. Refer to trusted resources like MDN Web Docs and W3Schools to deepen your knowledge and stay updated with best practices.
In the next article, we will dive into HTML Tables and Forms in detail. Stay tuned! 🤗🤝🏻
