HTML5 Elements and Attributes

Last Updated: 22nd June, 2023

Introduction

Think about your favorite fast food items: burgers and sandwiches. Just like these yummy treats have different ingredients, tags and attributes also have distinct roles in creating web content.

Tags are like the buns of a burger or the bread of a sandwich. They surround the content and tell the browser how to display it. In HTML, tags are written in angle brackets, such as <p> for a paragraph or <img> for an image.

Attributes, on the other hand, are like the toppings of a burger or sandwich. They provide additional information about the content inside the tags, such as its source or size. For example, the <img> tag may have an attribute like src to specify the image source or alt to provide alternative text for users who cannot see the image.

Values are like the filling of a burger or sandwich. They are the specific information that is contained within the tags and attributes. For instance, the value of the src attribute might be the URL of the image file or the value of the alt attribute might be a description of the image.

So, let's say you were creating a web page about burgers and sandwiches. You might use the <h1> tag for the main title, <p> tag for the introduction, and <img> tag with attributes like src and alt to display mouth-watering images of the dishes.

In summary, tags, attributes, and values are essential components of HTML that work together to create rich and engaging web pages. And just like a burger or sandwich, they are the perfect combination of different elements that come together to make something amazing!

Tags in HTML

In HTML, tags are used to mark up content on a webpage. They are essentially labels that define the structure and meaning of the content they enclose. HTML tags come in pairs, consisting of an opening tag and a closing tag. The opening tag is enclosed in angle brackets and contains the name of the tag, while the closing tag is also enclosed in angle brackets but includes a forward slash before the tag name.

For example, the paragraph tag is represented by <p> for the opening tag and </p> for the closing tag. Any content that falls within these tags will be formatted as a paragraph on the webpage.

Here's an example of how HTML tags are used to structure content:

<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a paragraph of text.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>

In this example, the HTML tags define the structure of the webpage. The opening <html> tag indicates the start of the HTML document, and the closing </html> tag indicates the end. Within the <html> tags, there are several other tags, such as <head> and <body>, which define the different parts of the webpage. The <title> tag within the <head> section defines the title of the webpage that will appear in the browser's title bar.

The <h1> tag is used to create a heading on the webpage, while the <p> tag is used to create a paragraph of text. The <ul> tag is used to create an unordered list, and the <li> tags within the <ul> tag are used to create the list items.

Attributes in HTML

In HTML, attributes are used to provide additional information about an HTML element. They are used to modify the behavior or appearance of an element or to provide additional information that cannot be conveyed through the element's content alone. Attributes are specified within the opening tag of an element and take the form of name/value pairs, separated by an equals sign.

Here is an example of an HTML element with attributes:

<a href="<https://www.almabetter.com/>" target="_blank">AlmaBetter Website</a>

In this example, the <a> tag is used to create a hyperlink, and it has two attributes:

The href attribute specifies the URL of the page that the link goes to.
The target attribute specifies how the linked page should be opened. In this case, the value _blank tells the browser to open the linked page in a new window or tab.

Here are some commonly used attributes in HTML:

class - Used to specify one or more CSS classes to apply to an element for styling purposes.
id - Used to uniquely identify an element in a document. It is often used in conjunction with CSS or JavaScript to apply specific styles or behaviors.
style - Used to apply inline CSS styles to an element.
src - Used to specify the URL of an image or other media file to be displayed on a page.
alt - Used to provide a text description of an image for accessibility purposes.
title - Used to provide additional information about an element, typically displayed as a tooltip when the user hovers over the element.

Value in HTML

In HTML, values are used in conjunction with attributes to provide additional information about an HTML element. Values represent the content or information associated with an attribute and can take on a variety of data types, including text, numbers, and URLs.

For example, consider the following HTML code:

<img src="example.jpg" alt="An example image" width="500" height="300">

In this example, the src attribute specifies the location of the image file, while the alt attribute provides a text description of the image for accessibility purposes. The width and height attributes specify the dimensions of the image in pixels.

The values associated with each attribute are:

src: "example.jpg"
alt: "An example image"
width: 500
height: 300

Values can also be used with other HTML elements, such as links and buttons, to specify the text or content associated with the element. For example:

<a href="<https://www.example.com>">Click here to visit Example.com</a>
<button type="submit" name="submit-button" value="submit">Submit Form</button>

In these examples, the values associated with the href attribute and the value attribute provide the text or content associated with the link and the button, respectively.

Conclusion

Tags are used to mark up content on a webpage and define the structure and meaning of the content they enclose. Attributes are used to modify the behavior or appearance of an element or to provide additional information that cannot be conveyed through the element's content alone. Values are used in conjunction with attributes to provide additional information about an HTML element and can take on a variety of data types, including text, numbers, and URLs. Overall, understanding the use of tags, attributes, and values in HTML is essential for creating well-structured and functional webpages.

Module 2: HTML5 Basics