Let's break down the basics of an HTML line of code by explaining the element's behaviors, including tags, attributes, and values. As a code newbie, we know the basics of writing a single line of code such as this:
<h1>This is a header</h1>
But when you start coding certain elements that include tags such as img, input, form, and more, you need to add attributes to tell the browser what to do with them.
The relationship between the three is needed to tell browsers what and how to display the content on the webpage by certain behaviors.
Take this element for example:
<img src="https://www.pexels.com/photo/a-book-on-a-bed-22481814/" alt="a picture of a gratitude book on a bed.">
The tag is img (note this is a self-closing tag), the attributes are src and alt, and the values of those attributes are in quotations.
This tells the browser to display an image img, where to find the source of this image src, along with an alternative text for when the image can't be displayed, and for screen-readers alt.
To further explain what each does, let's break them down below.
So Elements and Tags Aren't The Same?
One myth I thought while learning HTML is that elements and tags are the same. Nope.
Elements are chunks of data that tell the browser how to display information. It contains an opening tag, content, and a closing tag if it's not a self-closing tag.
Tags are what's needed to create elements. As Muthu Annamalai Venkatachalam said in the article, HTML Tags, tags are keywords used to create visual content on a webpage.
It tells the browser what type of content to display.
They normally have angle brackets <> around them, indicating they are a tag, such as <p></p>, <h2></h2>, <div></div>, <section></section>, and more.
Most tags have opening and closing tags, while the closing tags will look like this: </>.
While some tags such as <img>, <input>, <embed>, and <area> are self-closing tags, which don't require a closing tag to function.
However, some tags can't function correctly without an attribute to give it a certain behavior or additional information.
What's an Attribute and it's Value?
An attribute gives a tag a behavior, which tells the browser what to do with it or information about it.
The name of the attribute is the identifier, which indicates what to do with an element, and the name of the value is how to configure it.
I think of it as a what/how relationship.
Take the img tag as an example. This tag needs attributes to give browsers information on how to display an image.
When you add the attribute src to the img tag, the src tells the browser that there's a source to the image. While the value of the src attribute tells browsers where to find the source.
Using the code from earlier in this post, here is an example of the src="link to source" relationship.
src="https://www.pexels.com/photo/a-book-on-a-bed-22481814/"
When adding this to the img tag, browsers will find the source through the link provided and display it on the web page.
Also, it's important to include an alt attribute to all images for the benefit of browsers, user experience, and SEO purposes.
A good practice for writing alt values is to simply explain what's going on in the image.
How To Write An Attribute and Value
It's also good to know that attributes are included in the opening tag in an element and never in the closing tag. To identify them, it will look like this:
name="value"
As a great reference, here is a complete list of HTML Attributes, along with descriptions of what they do and how to use them.
When you click on each attribute, you will see documentation on how to use them, and values to use to configure them.
I hope this helps you as it has helped me better understand the relationship between these terms.
Top comments (0)