HTML attributes are parts of an HTML element that provide additional information or settings for the element. These attributes are always in the form of name/value pairs and they are placed in the start tag of the HTML element. Understanding and using these attributes is essential to creating rich, interactive web pages.
Common HTML attributes
1. class
class attribute is used to specify one or more classnames for HTML elements. Class names are used in CSS (Cascading Style Sheets) and JavaScript so that you can specify styles or add behavior to elements with the same class name.
<div class="container"> This is a container. </div>
2. id
id attribute assigns a unique identifier (ID) to an HTML element. Each ID must be unique within an HTML document.IDs are used in CSS and JavaScript so that you can precisely reference and modify the element.
<div > This is a unique element. </div>
3. style
style property allows you to apply CSS styles directly to the element. This is known as in-line styling. Although it is convenient, it is generally not recommended for overuse in production environments as it adds complexity and maintenance to HTML documents.
<p style="color:blue;"> This is a blue text. </p>
4. title
title attribute provides additional information for the element, which is usually displayed as a tooltip when the mouse hovers over the element.
<a href="" title="Visit Example Website">Example</a>
caveat
- Attribute names and values are case insensitive: Although HTML is case-insensitive, by convention, attribute names and values are usually lowercase.
- Always quote attribute values: The attribute value should be included within quotes (single or double quotes are fine, but make sure that the attribute value does not internally conflict with the quotes).
-
Avoid using deprecated properties: As HTML and CSS have evolved, some attributes (such as the
<body>(used form a nominal expression)bgcolor) has been deprecated. CSS should be used to control these styles.
typical example
center
<h1 align="center"> This is a centered title </h1>
take note of：align attribute has been deprecated in HTML5. Now, you should use CSS to control the alignment of text.
<h1 style="text-align:center;"> This is a centered headline </h1>
Setting the background color
<body bgcolor="yellow">
take note of：bgcolor property is also deprecated. You should use CSS to set the background color.
<body style="background-color:yellow;">
With these basic HTML attributes and practices, you can start building more dynamic and style-rich web pages.
This article was written by Learning Together Posted!