Introduction
HTML, or HyperText Markup Language, is the foundation of all web content. It is used to structure and format web pages, providing a backbone for websites. As you learn HTML, it is essential to understand the basic tags that make up the language. In this article, we will introduce you to some of the most commonly used HTML tags and their purposes.
The <!DOCTYPE> Declaration
The first thing you need to include in any HTML file is the doctype declaration. This declaration tells the web browser which version of HTML you are using. For HTML5, the most current version, the declaration is simply:
html
Copy code
<!DOCTYPE html>
The <html> Tag
The <html> tag is the root element of an HTML page. It encloses the entire HTML document, including the head and body sections. The opening and closing <html> tags should always be present in your HTML file:
html
Copy code
<html>
<!– The rest of your HTML code goes here –>
</html>
The <head> Tag
The <head> tag is located within the <html> tag and is used to store meta-information about your web page, such as the title, character encoding, and stylesheets. It is not visible on the actual page:
html
Copy code
<head>
<title>My Web Page</title>
<meta charset=”UTF-8″>
<link rel=”stylesheet” href=”styles.css”>
</head>
The <title> Tag
The <title> tag is placed within the <head> section and is used to specify the title of your web page. This title will appear in the browser’s title bar or tab and is used by search engines for indexing purposes:
html
Copy code
<title>My Web Page</title>
The <body> Tag
The <body> tag comes after the <head> section and contains the actual content of your web page. This is where you will include text, images, links, and other elements that users will see and interact with:
html
Copy code
<body>
<!– Your visible page content goes here –>
</body>
The <h1> to <h6> Tags
These tags are used to define headings on your web page. They range from <h1> (the largest and most important heading) to <h6> (the smallest and least important heading):
html
Copy code
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<!– … –>
The <p> Tag
The <p> tag is used to define paragraphs of text. Browsers automatically add some whitespace before and after each paragraph:
html
Copy code
<p>This is a paragraph of text.</p>
The <a> Tag
The <a> tag is used to create hyperlinks, allowing users to navigate from one web page to another:
html
Copy code
<a href=”https://www.example.com”>Visit Example.com</a>
The <img> Tag
The <img> tag is used to display images on your web page. It is a self-closing tag, meaning it does not require a closing tag:
html
Copy code
<img src=”image.jpg” alt=”A description of the image”>
The <ul> and <ol> Tags
These tags are used to create unordered (bulleted) and ordered (numbered) lists, respectively:
html
Copy code
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Leave a Reply