In this article, Mytour will introduce you to the world of HTML attributes. Additionally, readers can explore other articles on Mytour to learn more about what HTML is.
Explore HTML Attributes
1. HTML Attributes
1.1. HTML href Attribute
1.2. HTML src Attribute
1.3. HTML width and height Attributes
1.4. HTML alt Attribute
1.5. HTML style Attribute
1.6. HTML lang Attribute
1.7. HTML title Attribute
1.8. Single and Double Quotation Marks
1.9. Various HTML Attributes
2. Some Considerations
1. HTML Attributes
- All HTML elements come with attributes.
- Attributes provide additional information about the elements.
- Attributes are specified in the opening tag.
- Attributes often consist of name/value pairs, such as name='value'.
1.1 HTML href Attribute
HTML links are defined using the a tag. The link address is specified in the href attribute.
Example: Here is an example of the href attribute in HTML:
The result returned after using the href attribute in HTML looks like the following:
By using the img tag to embed images in HTML.
The file name of the source image is specified in the src. attribute.
Example: Here is an example of the src attribute in HTML:
The result returned after using the src attribute in HTML looks like the following:
1.3. HTML width and height Attributes
Images in HTML also include the width and height attributes, specifying the width and height of the image.
Example: Here is an example of the width and height attributes in HTML:
The result after using the width and height attributes in HTML looks like the following:
By default, the width and height attributes use pixels as the unit, so width='500' means a width of 500 pixels.
1.4. HTML alt Attribute
The alt attribute specifies using text as a substitute in case the image cannot be displayed.
Additionally, we can use a screen reader to read the value of the alt attribute.
Example 1: Here is an example of the alt attribute in HTML:
The result returned after using the alt attribute in HTML looks like the following:
The alt attribute in HTML is also beneficial in cases where the image cannot be displayed (assuming the image does not exist).
Example 2: In this scenario, the image does not exist.
The result returned after using the alt attribute looks like the following:
1.5. HTML Style Attribute
The style attribute in HTML is used to specify the appearance of an element, such as color, font, size, and more.
Example: The following example employs the style attribute in HTML:
The result returned after using the style attribute looks like the following:
1.6. HTML Lang Attribute
The language used in a document is declared within the html tag.
The language is declared using the lang attribute.
Declaring the language is extremely crucial, especially for accessibility applications (such as screen readers) and search engines.
Example: The following example illustrates the use of the lang attribute in HTML:
1.7. HTML Title Attribute
The title attribute is added to the p element. The value of the title attribute will be displayed as a tooltip when users hover over the text.
Example: The following example illustrates how to use the title attribute in HTML:
The result obtained after using the title attribute in HTML looks like the following:
1.8. Single and Double Quotation Marks
In HTML, attribute values are enclosed in double quotation marks; however, if desired, we can also use single quotation marks.
In some cases, if the attribute value itself contains double quotation marks, we will need to use single quotation marks.
For example, the illustration below demonstrates the usage of single and double quotation marks in HTML:
Alternatively, examples like the following are also correct:
1.9. HTML Attributes
The table below provides a list of commonly used attributes in HTML:
2. Some Considerations
- HTML5 does not differentiate between uppercase and lowercase when writing attribute names. Additionally, there is no need to use double quotation marks for attribute names.
In this article, Mytour has introduced various attributes in HTML to you. In the upcoming articles, Mytour will continue presenting information about HTML elements. If you have any questions or need clarification, readers can leave their comments below the article.