Learn HTML Attributes Code

Tips (Total 13)

1. What is HTML Attributes

2. How to create HTML href Attribute

3. How to create HTML src Attribute

4. How to create HTML width and height Attributes

5. How to create HTML alt Attribute

6. How to create HTML style Attribute

7. How to create lang Attribute

8. How to create HTML title Attribute

9. How to create HTML Single or Double Quotes

10. What is HTML Headings

11. How to create HTML Headings

12. What is Headings Are Important

13. How to create HTML Bigger Headings

# Tips-1) What is 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"

HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type.

# Tips-2) How to create HTML href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Full Example of href Attribute

The HTML <a> href Attribute is used to specify the URL of the page that the link goes to. When the href attribute is not present in the <a> an element that it will not be a hyperlink. This attribute is used to specify a link to any address. This attribute is used along with <a> tag.

index.html

Example: HTML

<!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>

<a href="https://itupto.com">Visit Site</a>

</body>
</html>

Output should be:

# Tips-3) How to create HTML 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:

There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg".
Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.
2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src="/images/img_girl.jpg".
Tip: It is almost always best to use relative URLs. They will not break if you change domain.

How is to look a HTML src Attribute

Following is sample

src="https://itupto.com/avatar.png"

Full Example of HTML src Attribute

The src attribute specifies the URL or path of the resource file. The URL points to the media file to display (images) or play (audio and video). The browser uses the URL to locate and load the media file. The URL can be internal (from same website) or external (another website).

index.html

Example: HTML

<!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://itupto.com/avatar.png" width="100" height="100">

</body>
</html>

Output should be:

# Tips-4) How to create HTML width and height Attributes

The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels):

How is to look HTML width and height Attributes?

width="200" height="200"

Full Example of HTML width and height Attributes

Here we mean a size of Image 200px

index.html

Example: HTML

<!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://itupto.com/avatar.png" width="200" height="200">

</body>
</html>

Output should be:

# Tips-5) How to create HTML alt Attribute

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.

How is to look HTML alt Attribute

alt="Girl with a jacket"

Full Example of HTML alt Attribute

Here image url work

index.html

Example: HTML

<!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://itupto.com/avatar.png" alt="Girl with a jacket" width="200" height="200">

</body>
</html>

Output should be:

Here alt visible

Because Image link not work

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<img src="img_typo.jpg" alt="Girl with a jacket">

<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>

Output should be:

# Tips-6) How to create HTML style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.

Sample of HTML style Attribute

style="color:red;"

Full Example of HTML style Attribute

index.html

Example: HTML

<!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>

</body>
</html>

Output should be:

# Tips-7) How to create lang Attribute

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 as the language:

Sample of HTML lang Attribute

<html lang="en">

Full Example of HTML lang Attribute

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Full Example of HTML Country lang Attribute

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:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

# Tips-8) How to create HTML 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:

Full Example of HTML title Attribute

index.html

Example: HTML

<!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>

Output should be:

# Tips-9) How to create HTML Single or Double Quotes

Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

Sample of HTML Single or Double Quotes

<p title='John "ShotGun" Nelson'>

Or vice versa

 <p title="John 'ShotGun' Nelson">

# Tips-10) What is HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage.

The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. By default, all heading elements create a block-level box in the layout, starting on a new line and taking up the full width available in their containing block.

Sample of HTML Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Full Example of HTML Headings

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

Output should be:

# Tips-11) How to create HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Sample of HTML Headings

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

Example of HTML Headings

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

Output should be:

# Tips-12) What is Headings Are Important

Search engines use the headings to index the structure and content of your web pages.

Users often skim a page by its headings. It is important to use headings to show the document structure.

<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.

# Tips-13) How to create HTML Bigger Headings

Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:

Sample of Bigger Heading

Here you will have to determine the size of heading style="font-size:60px;"

 <h1 style="font-size:60px;">Heading 1</h1>

Full Example of HTML BiggerHeading

<h1 style="font-size:60px;">Heading 1</h1>

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:60px;">Heading 1</h1>

<p>You can change the size of a heading with the style attribute, using the font-size property.</p>

</body>
</html>