HTML elements, Tags, and Attributes.

Introduction

HTML attributes provide additional information about an element and can be used to customize the behavior or appearance of the element. Attributes can have different values, such as a text value, a boolean value (true or false), or a URL value.

Additionally, it's worth noting that HTML tags and attributes have specific rules and guidelines for their use. For example, some tags can only be used within specific elements, while other attributes require specific values or formats. It's important to follow these guidelines to ensure that your HTML code is valid and compatible with different browsers and devices.

An HTML element is defined by a start tag, some content, and an end tag. For example:

<h1 title="heading">My First Heading</h1> <p>My first paragraph.</p>

Here, title is an attribute or property of the h1 tag. So <h1> is the tag, and title="heading" is the attribute. It's important to know the difference between whether our variable is storing the element, the value, or the attribute.

Nesting

HTML elements can be nested, meaning that one element can be placed inside another element. Nesting allows you to apply multiple HTML tags to a single piece of content.

For example: <strong>My bold text and <em>my bold and emphasized text</em></strong>

Nesting Best Practice

Note that it is recommended to always close nested tags in the reverse order that they were opened. In the example below, the <em> tag closes first, as it was the last tag to open. The <strong> tag closes last, as it was the first to open.

<strong><em>My emphasized and bold text</em></strong>

Attributes

Attributes are the properties of any HTML tag. For example, the a tag has the following attributes, and to know the values of the attribute, we can use - Ctrl + Space, which gives suggestions for the values that can be given to that attribute for the tag. You can learn more about these in detail here for each tag.

Now, every tag has a compulsory attribute, and some are not compulsory. For example, the a the tag has a compulsory attribute - href.

Paragraph Tag

The <p> tag defines a paragraph. Browsers automatically add a single blank line before and after each <p> element. For lorem ipsum text, we use p>lorem20 to get a bunch of text containing 20 words.

<br> Tag

We use the <br> tag to insert single line breaks in a text. For example:

It's a self-closing tag, so we write <br />.

Poem Problem and <pre> Tag

When we try to write line-by-line text using the <p> tag, we don't get the result we want. which is the poem problem. We need to use br tag a lot to achieve that a we can see in the above image. But a better way to do is to use the <pre>.

The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

Now, there are many other HTML tags, and they have many attributes, so you should go through the documentation for each of the HTML tags and learn about their attributes. Keep in mind that in some attributes or tags, there will be a warning sign which tells us that it has deprecated, and some browsers may not support those tags and attributes.

In the next blog, we will learn about HTML global attributes. Till then