Introduction to Attributes in HTML
In HTML, attributes provide information and additional features for HTML elements. These features can change the behavior of the element or control content that the element references.
Attributes always consist of a name and a value that follows the name. These values can specify particular descriptions for display or specific functionality; like defining the path of an image or setting the target of a link.
We can also use boolean attributes, which can only create distinction with their presence; like "disabled" for disabling an element's form.
Some attributes are universal and can be used for all elements, such as 'id', which identifies a unique element or 'class' for styling with CSS or JavaScript.
Improperly named or missing attributes can lead to undesirable results in the display or functionality of web pages.
Example Code Using Attributes
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Example with Attributes</title>
</head>
<body>
<h1 class="main-title" id="page-title" style="color: blue;">Page Title</h1>
<a href="https://example.com" target="_blank">Link to Example</a>
<img src="image.jpg" alt="Image Description" width="200" height="150" />
</body>
</html>
Line by Line Description of Code
<!DOCTYPE html> This declaration defines the document type as HTML5.
<html lang="fa"> This HTML tag begins the document and sets the language to Persian.
<meta charset="UTF-8"> Specifies the character encoding for the document as UTF-8, which supports all characters.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Used to adjust the display for mobile browsers.
<title>HTML Example with Attributes</title> The title of the page shown on the browser tab.
<h1 class="main-title" id="page-title" style="color: blue;">Page Title</h1> The main title of the page displayed in blue with identified class and ID.
<a href="https://example.com" target="_blank">Link to Example</a> Creates a link that opens in a new tab.
<img src="image.jpg" alt="Image Description" width="200" height="150" /> An image with specified size and description in alt text.