- Basic of HTML programming | HTML Beginner to Advance
- HTML Attributes | Attributes in HTML
- HTML Style | CSS Style in HTML
- HTML Quotation
- HTML Formatting
- HTML Images
- HTML Links
- HTML Table
- HTML Class Attribute
- HTML List
As we have seen many HTML tags like <h1>, <h2>, <p>, <br, and so on. All HTML tags can have attributes. Attributes can provide extra information about the HTML tag. The style attribute specify the style of the element.
An Attribute has an attribute name and attributes value.
<TagName attributeName=”attributeValue” > Texts</TagName>
<h1 style="color:red;">My first Heading</h1>
In this example h1 is tagname, style is attribute name, To format the layout of a webpage of an element we use style attribute, color:red; is the attribute value, which defines the red color for h1 tag.
HTML Attributes
- All HTML elements can have attributes
- Attribute are always specified in the start tag
- Attribute provides the information about the element
Basic Attributes in HTML
The HTML has four basic attributes ID, Title, Class, and Style. We will discuss this in brief.
ID Attribute
Title Attribute
Class Attribute
Style Attribute
Uniquely Identify any Element.
Gives the element information as a tooltip.
used to specify one or more class names for an element.
used to give style like color, size, background color, etc to an HTML element.
HTML ID Attribute
HTML ID Attribute specifies the unique identity of an Element. We can use the id attribute if we have the same name tags, that should be identified, here is an example:
<body>
<h1 id="c_logo">CodeDesignerWorld</h1>
<h1 id="r_logo"> Rare Programmer </h1>here in this example, we have two logo names, which are separated by the id.
HTML Title Attribute
The title attribute gives the element information as a tooltip when the mouse moves over the element. The title attribute can be used on any HTML element.
<body>
<h1 title="first heading">My First Heading</h1>
</body>
As you can see in the above image there is a black border-box and inside that “first heading” is written, this is known as a tooltip.
HTML Class Attribute
The class attribute specifies one or more class names for an element. The class attribute is used to point to a class in a stylesheet. A single element can have multiple class names and multiple elements can have the same class name.
<body>
<h1 class="Heading logoName">CodeDesignerWorld</h1>
<h3 class="Heading">My second Heading</h3>
</body>HTML Style Attribute
The style attribute is used to give style like color, size, background color, etc to an HTML element. Each and every HTML element can have a style attribute. here is an example of a style attribute:
<body>
<p>This is a dummy text of first paragraph</p>
<p style="color:red; font-size: 20px">This is a dummy text of second paragraph</p>
</body>
here you can see the difference the first p tag has no style, it is using the default stylesheet and the second p tag is using a custom style like font-size is 20px and color is red.
Other Attributes in HTML
There is a lot of attributes in HTML, we will discuss some of them, Let’s talk!
Href Attribute
src Attribute
Width & Height Attribute
Alt Attribute
Specify the URL of the page.
specifies the path to the image.
Used to set the width and height of an element.
specifies an alternative text for an image.
The href Attribute
The anchor <a> tag defines a hyperlink. The href attribute is the main attribute of the anchor tag and specifies the URL of the page. The href stands for HyperText Reference.
<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<a href="https://www.google.com">Visit Google!</a>
</body>
</html>
The src Attribute
The src attribute is mostly used by the <img> tag. In other, the <script> tag also uses the src attribute to link script files. The src attribute specifies the path to the image to be displayed on the webpage.
<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/d2abd662597191.5a9589b09ddf5.jpg" width="200" height="200">
</body>
</html>
There are two ways to specify the URL in the src attribute:
Absolute URL
The absolute URL always includes the domain name of the site with https://, it shows that the image is hosted on another website. Here is an example of an absolute URL.
<img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/d2abd662597191.5a9589b09ddf5.jpg" width="200" height="200">Relative URL
A Relative URL links to an image that is hosted within the website. It doesn’t include the https:// path. It only shows the basic path of any image file like logos/myLogo.png etc.
<img src="logos/myLogo.png" width="200" height="200">The width and height Attribute
Many HTML elements use the width and the height attributes that we are going to explain with the <img> tag.
<img src="logos/myLogo.png" width="200" height="200">The alt Attribute
The alt attribute for the image tag specifies an alternative text for an image, If the image is not showing on the webpage the alt text will be displayed.
<img src="logos/myLogo.png" alt="Website Logo">The Lang Attribute
The lang attribute specifies the language of the webpage. It is used inside <HTML> tag.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>Hope you enjoyed this!
You Might like this:
- Confetti Button Using Javascript
- Mouse in and mouse out hover effect using CSS
- Folding Card Using CSS
- Turning Pages Using CSS
Visit our GitHub Account for practice codes Click Here!
Thank You!
