Embedded Files
What is HTML Attribute?
A element called an HTML attribute is used to modify how an HTML element behaves or appears. The color, size, or functionality of HTML components, for instance, can be changed using attributes.
HTML Attributes
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
What is href Attribute?
What is href Attribute?
The inline a (anchor) element in HTML designates a connection between two web addresses. The opening a tag of every functional an element must have the href (hypertext reference) property. The hyperlink's destination is indicated by the href attribute. The href property is necessary for the an element to function.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>
<ahref="https://sites.google.com/d/1nCUA8lS65TA19tihuI__TchU7qtobahi/p/1nEeZSJZhw77XinMCunnA8-DVMDgJuwH4/edit">Visit DCSHS</a>
</body>
</html>
The src Attribute
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:
What is src Attribute used for?
The src attribute specifies the location (URL) of the external resource.
Example:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:</p>
<img src="https://images.pexels.com/photos/1321909/pexels-photo-1321909.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" width="320" height="320">
</body>
</html>
The URL can be specified in the src property in one of two ways:
1. Links to external images housed on other websites are made using absolute URLs. src="https://sites.google.com/d/1nCUA8lS65TA19tihuI__TchU7qtobahi/p/1nEeZSJZhw77XinMCunnA8-DVMDgJuwH4/edit" is an example.
Note: Copyright may apply to external photos. You could be breaking copyright laws if you use it without authorization. Additionally, you have no control over external photos; they might be modified or withdrawn at any time.
2. Links to images hosted on the website using their relative URLs. Here, the domain name is absent from the URL. The URL will be relative to the current page if it starts off without a slash. For instance, src="img_girl.jpg". The URL will be relative to the domain if it starts with a slash. Src="https://images.pexels.com/photos/1321909/pexels-photo-1321909.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr" is an example.
Use relative URLs almost always for optimum results. If you switch domains, they won't stop working.
The width and height Attributes
The width and height Attributes
The height property specifies the image's height in pixels for CSS. The width is defined by the width property. The height and width of the picture will determine its real size if they are missing and not specified using CSS.
The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels):
Example:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Width and Height Attributes</h2>
<p>The width and height attributes of the img tag, defines the width and height of the image:</p>
<img src="https://images.pexels.com/photos/1468379/pexels-photo-1468379.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" width="500" height="600">
</body>
</html>
The alt Attribute
The alt Attribute
If an image cannot be shown, the alt property gives an alternative text for the region. If a user is unable to view an image for any reason (such as a sluggish connection, an error in the src element, or if they are using a screen reader), the alt property gives alternate information for the picture.
The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.
Example:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image get an understanding of what the image contains:</p>
<img src="https://images.pexels.com/photos/1321909/pexels-photo-1321909.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="A stunning woman perched beneath a tree" width="500" height="600">
</body>
</html>
Example:
Example:
<!DOCTYPE html>
<html>
<body>
<img src="img_typo.jpg" alt="A stunning woman perched beneath a tree">
<p>If we try to display an image that does not exist, the value of the alt attribute will be displayed instead. </p>
</body>
</html>
The style Attribute
The style Attribute
An inline style for an element is specified via the style property. The style attribute will override any style set globally, e.g. styles specified in the <style> tag or in an external style sheet. The style attribute can be used on any HTML element (it will validate on any HTML element.
The style attribute is used to add styles to an element, such as color, font, size, and more.
Example:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an element, such as color:</p>
<p style="color:red;">This is a red paragraph.</p>
<p style="color:blue;">This is a blue paragraph.</p>
<p style="color:yellow;">This is a yellow paragraph.</p>
<p style="color:orange;">This is a orange paragraph.</p>
<p style="color:violet;">This is a violet paragraph.</p>
<p style="color:green;">This is a green paragraph.</p>
<p style="color:cyan;">This is a cyan paragraph.</p>
</body>
</html>
The lang Attribute
The lang Attribute
The lang attribute specifies the language of the element's content. Common examples are "en" for English, "es" for Spanish, "fr" for French, and so on.
You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.
The following example specifies English, French, German and Spanish as the language:
Example:
Example:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p lang="fr">Ceci est un paragraphe.</p>
<p lang="de">Este es un párrafo.</p>
<p lang="es">Das ist ein Absatz.</p>
</body>
</html>
Country codes can also be added to the language code in the lang attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country.
The following example specifies English as the language and United States as the country:
Example:
Example:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The title Attribute
The title Attribute
The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element:
Example:
Example:
<!DOCTYPE html>
<html>
<body>
<h2 title="I'm a header">The title Attribute</h2>
<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>
</body>
</html>
Page updated
Google Sites
Report abuse