Welcome to the captivating world of HTML tags! Let's frolic through the meadows of web development and discover some of the most common HTML tags. We'll also venture deeper and dig into HTML attributes.
What are HTML Tags?
Picture, if you will, a webpage as a grand stage upon which a marvelous performance unfolds. HTML tags are the players in this grand spectacle. They are the words whispered in the ears of the browser, guiding it to render a symphony of content before your very eyes.
Allow me to paint a picture with a simple example. Behold, the humble <p> tag! With its embrace, we can summon forth paragraphs of text, weaving tales of adventure and romance:
<p>It was the best of times, it was the worst of times...</p>
Every tag starts with a less than symbol <, then the name of the tag p, and the greater than symbol >. This tag <p> is referred to as an opening paragraph tag.
Inside the tag is the content that you want to be displayed on the webpage. When we have finished our sentence we must tell the browser by closing the tag </p>. A closing tag is the same as the opening tag except that it has a / before the name.
An HTML page is made up of all these tags to form a structure and display a webpage in all its glory. We must learn all these tags in order to master the art of HTML.
We will cover every HTML tag in detail, but first lets just talk about some of the most common tags below.
Most Common HTML Tags
Let us start with the most fundamental tags. We've already seen the basic structure of an HTML webpage, which include the <html>, <head> and the <body> tags.
Within the <body> section is where we add the content we want displayed on our page. This is where we can add our <p> tag, which represents a paragraph of text.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML File</title>
</head>
<body>
<p>Once upon a time in a land far, far away...</p>
</body>
</html>
We will not include the full HTML structure in every snippet but it will be implied that it lives in the
<body>tag of a document.
Next, are heading tags, which range from <h1> to <h6>, allowing us to create headings of different sizes, with <h1> being the largest and <h6> the smallest. Here's an example:
<h1>A Grand Adventure</h1>
But what if we wish to venture beyond mere text? Fear not, my dear comrades, for we have the <a> tag, the gateway to the vast network of the World Wide Web. By using the href attribute inside of an <a> tag, we can create clickable links. Here's a wondrous example:
<a href="https://www.example.com">Click me, if you dare!</a>
Now, Let us not overlook the power of images. With the <img> tag, we can bring visual delights to our pages. The src attribute points to the image file, and the alt attribute provides a text description for those who cannot see the image. Marvel at this sight:
<img src="path/to/image.jpg" alt="A breathtaking sunset over the horizon">
Notice, the mischievous
<img>tag, unlike most, it frolics freely without the need for a closing tag, such carefree souls are a rare breed among the vast array of HTML elements!
These were just a handful of some common HTML elements, but in the sections that lie ahead, we shall discover every HTML tag in all its glory.
HTML attributes
HTML tag attributes are like little notes attached to tags that provide additional information and instructions. They help the tags perform their duties with finesse, whether it's creating links, displaying images (via the src attribute), or even styling elements. As we learn more about HTML tags we will also learn about the many attributes and how to use them.
There are two attributes that are very important for the future:
- The
classattribute - The
idattribute
The class attribute allows us to assign a name to an element for styling purposes. Here's how it looks:
<p class="highlighted">This text shall shine like the northern lights!</p>
Next, the id attribute, which provides a unique identifier to an element. It can be particularly useful for styling or linking to specific parts of a page. Behold its wonder:
<h2 id="chapter1">Chapter 1: The Quest Begins</h2>
The class and id attributes shall grace your web journey time and again, like faithful companions on a whimsical quest. Though their names may slip from your long-term memory, mark them in your heart, for their significance in the realm of HTML is not to be underestimated!