Tags and Elements
HTML tags are special keywords that indicate how data should be displayed or formatted by web browsers. They help the browser understand which parts of a document contain HTML content and which parts contain plain text. HTML tags are typically enclosed in angular brackets <>, with the start of a tag denoted by < and the end of a tag denoted by </>.
Example:
<head></head>
HTML Elements
An element tag refers to a combination of start and end tags enclosing the content inserted between them.
Example:
<head> I am HTML element </head>
Types of Tags
HTML utilizes predefined tags that instruct the browser on how to present the content. Tags are essentially instructions enclosed within angle brackets (<>). They are employed in various sections of a webpage. However, users often find themselves perplexed about certain tags, unsure of whether they are container tags or empty tags. This confusion arises from not knowing whether a tag requires both an opening and closing tag or not. HTML tags can be categorized into two types:
- Empty
- Container
Empty Tags
Empty tags in HTML are tags that do not require a closing tag. These tags consist solely of an opening tag and serve a specific purpose or action on the webpage.
Syntax:
<tag_name>
Example:
<br>, <hr>, <img> etc.
Container tags
Container tags in HTML consist of three main components: the opening tag, the content (which is displayed on the browser), and the closing tag. Within the content section, container tags can also include other tags. The opening and closing tags are used together as a pair, often referred to as “ON” and “OFF” tags. It is crucial to remember to close the container tag properly. If you forget to do so, the browser will continue applying the effects of the opening tag until the end of the page. Therefore, it is important to exercise caution when working with container tags. The majority of tags in HTML fall under the category of container tags.
Syntax:
<tag_name> ...</tag_name>
Examples:
Heading Tags(<h1>..</h1>), List Tags(<ul>..</ul>), Button Tags(<button>..</button>), etc.
HTML attributes:
HTML attributes are specific terms placed within the opening tags of HTML elements. They are used to define the characteristics of an HTML element. An HTML attribute consists of two parts: the attribute name and its corresponding value. The attribute name and value are paired together using the equal (=) operator. The attribute value is enclosed within double quotation marks (” “).
Syntax:
<tag_name atrribute_name = "value">
Examples:
<img decoding="async" src="./img.png" height="300px" width="300px">
HTML Global Attributes:
HTML global attributes are attributes that are applicable to all HTML elements, although they may not have an effect on certain elements. These global attributes can be used with both standard and non-standard elements.
Example:
hidden: The “hidden” attribute is utilized to determine the visibility of elements in HTML. It takes a Boolean value. When this attribute is used, browsers will not display elements that have the “hidden” attribute specified.
<img decoding="async" src="./img.png" height="300px" width="300px" hidden>