All HTML elements can hold attributes and these attributes provide additional information about those elements. These attributes are written as a name="value" format.
HTML links are defined with the <a> tag. The link address is specified in the href attribute as shown below.
<a href="https://localhost/webtrix">This is a link</a>
You will learn more about links and the <a> tag later in this tutorial.
External contents are embedded in HTML using the src attribute where the location and name of the file is placed as its value.
<img src="logo.png">
Images in HTML can have a set of size attributes which specifies the width and height of the image.
<img src="logo.png" width="100" height="50">
The image size is specified in pixels. width="100" denotes the width of the image while height="50" denotes the height of the image.
You will learn more about images in HTML Images section.
The alt attribute specifies an alternative text to be displayed when an image cannot be displayed which might occur due to multiple reasons like file being deleted, wrong file name, huge file that couldn't be loaded, etc.
The value of the alt attribute can be read by screen readers. This way, someone listening to the webpage using screen readers can hear the element.
<img src="logo.png" alt="webtrickshome logo">
The style attribute is used to specify the styling of an element, like color, font, size etc. You'll need a good understanding of css before using it though.
<p style="color:red">This is a paragraph</p>
You will learn more about styling later in CSS Tutorial section.
The language of the document can be declared in the <html> tag using the lang attribute. Declaring a language is important for accessibility applications (screen readers) and search engines.
<!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html>
The first two letters specify the language (en). If there is a dialect, use two more letters (US).
The title attribute is used to hold some additional information related to the content inside the HTML element and will be displayed as a tooltip when you place your mouse over the same element.
<p title="This is a tooltip content">This is a paragraph with some additional information hidden. Hover over it to see the information.</p>
HTML5 does not require quotation marks around title attribute values but it will result in error in case there are spaces within the values and the values are not placed inside quotation marks.
Double quotes are widely used while adding attribute values while single quotes also work equally fine. But, whenever the attribute value itself contains double quotes, it is important to wrap the entire value with single quotes whereas wrapping values containing single quotes with double quotes is ideal in other cases.
<p title="He said, 'I need to go'">Title attribute value with single quote wrapped by double quotes.</p> <p title='He said, "I need to go"'>Title attribute value with double quote wrapped by single quotes.</p>
Leave a comment