Tag: HTML attributes

HTML tabindex Attribute

Post author By Lena Stanley
Post date April 11, 2022

The HTML tabindex attribute defines the tab order of an element (when the “tab” button is used for navigating).

The HTML tabindex attribute can be used on all HTML elements.

Syntax:

<element tabindex="number">

number – defines the tabbing order of the element.

Example:

<!DOCTYPE html>
<html>
<body>                                               
<p tabindex="1">This is some text.</p>
<p tabindex="3">This is another text.</p>
<p tabindex="2">...and another text.</p>
                
</body>           
</html>

Output:

Try navigating the elements by using the “Tab” button on your keyboard:

This is some text.

This is another text.

…and another text.

Enjoy coding!

Read also:

HTML action Attribute

HTML dir Attribute

HTML href Attribute

Tags HTML, HTML attribute, HTML attributes, tabindex

Web development

HTML srcset Attribute

Post author By Lena Stanley
Post date April 4, 2022

The HTML srcset attribute defines the URL of the image to use in different situations.

The HTML srcset attribute is required when <source> is used in <picture> element.

Syntax:

<source srcset="URL">

URL – defines the URL of the image.

Example:

Resize the browser window to load different images:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<picture>
  <source media="(min-width:650px)" srcset="https://lenadesign.org/wp-content/uploads/2022/01/css-diamond.gif">
  <source media="(min-width:465px)" srcset="https://lenadesign.org/wp-content/uploads/2021/12/cookie.png">
  <img src="https://lenadesign.org/wp-content/uploads/2021/06/ghost-example.jpg" alt="ghost" style="width:auto;">
</picture>

</body>
</html>

Output:

Enjoy coding!

Read also:

HTML del tag & ins tag

HTML bdo tag

HTML caption tag

Tags HTML, HTML attribute, HTML attributes, srcset

HTML Web development

HTML lang Attribute

Post author By Lena Stanley
Post date March 25, 2022

The HTML lang attribute defines the language of the element’s content.

Syntax:

<element lang="language_code">

language_code – defines the language code for the element’s content (example: “en” – English, “it” – Italian, “ja” – Japanese…).

Example:

<!DOCTYPE html>
<html>
<body>

<p>How are you?</p>
<p lang="es">¿Cómo estás?</p>

</body>
</html>

Output:

How are you?

¿Cómo estás?

It is a good practice to include the HTML lang attribute inside the <html> tag, to declare the language of your website (this is meant to assist search engines and browsers):

 <html lang="en">
...
</html>

Enjoy coding!

Read also:

HTML action Attribute

HTML href Attribute

HTML id Attribute

Tags HTML, HTML attribute, HTML attributes, lang

Web development

HTML title Attribute

Post author By Lena Stanley
Post date March 9, 2022

The HTML title attribute defines extra information about an element (can be used on all HTML elements).

The information is often displayed as a tooltip text when the cursor hovers over the element.

Syntax:

<element title="text">

text – a tooltip text for an element.

Example:

<!DOCTYPE html>
<html>
<body>

<p title="Leran HTML, CSS and JavaScript">www.lenadesign.org</p>

</body>
</html>

Output:

Hover over the text:

lenadesign.org

Enjoy coding!

Read also:

HTML class Attribute

HTML data-* Attribute

CSS Tooltips

Tags HTML, HTML attribute, HTML attributes, title

HTML Web development

HTML id Attribute

Post author By Lena Stanley
Post date March 9, 2022

The HTML id attribute is used to define a special id for an HTML element.

The value of the HTML id attribute needs to be unique within the HTML document (you cannot have more than one element with the same id in an HTML document).

Syntax:

<element id="idname">

idname – defines a unique id for the element (should contain at least one character, shouldn’t contain any space characters).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#example {
  background-color: #0a9396;
  color: white;
  padding: 40px;
  text-align: center;
} 
</style>
</head>
<body>

<p id="example">This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

The HTML id attribute you can use also in JavaScript to perform some tasks for the desired element.

Example:

Access an element with a specific id with the getElementById() method:

<!DOCTYPE html>
<html>
<body>

<p id="example-2">Hello!</p>
<button onclick="changeText()">Click here</button>

<script>
function changeText() {
  document.getElementById("example-2").innerHTML = "Have a nice day!";
}
</script>

</body>
</html>

Output:

Click on the button to change the text:

Hello!

Enjoy coding!

Read also:

HTML class Attribute

HTML Scroll Box

HTML Table

Tags HTML, HTML attribute, HTML attributes, id

HTML Web development

HTML hidden Attribute

Post author By Lena Stanley
Post date February 22, 2022

The HTML hidden attribute is a boolean attribute. When applied, it defines that an element is not yet, or is no longer, relevant.

The HTML hidden attribute can be used on all HTML elements.

Example:

<!DOCTYPE html>
<html>
<body>

<p hidden>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

Output:

A hidden paragraph:

This is a paragraph.

Enjoy coding!

Read also:

HTML input accept Attribute

HTML alt Attribute

HTML class Attribute

Tags global attributes, hidden, HTML, HTML attribute, HTML attributes

HTML Web development

HTML href Attribute

Post author By Lena Stanley
Post date January 19, 2022

The HMTL href attribute defines the URL of the page the link goes to.

The HTML href attribute belongs to the following tags:

HTML <a> href Attribute

Syntax:

<a href="URL">

URL – the URL of the link.

Example:

<!DOCTYPE html>
<html>
<body>

<p>Click on the link: <a href="https://www.lenastanley.com/">CodeLife: Animations</a></p>

</body>
</html>

Output:

Click on the link: CodeLife: Animations

HTML <area> href Attribute

Syntax:

<area href="URL">

URL – defines the hyperlink target for the area.

Example:

<!DOCTYPE html>
<html>
<body>

<p>Click on the laptop, or the cup of coffee:</p>

<img src="https://lenadesign.org/wp-content/uploads/2021/06/homeOffice.jpg" alt="homeOffice" usemap="#workmap" width="640" height="480">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="laptop" href="https://lenadesign.org/wp-content/uploads/2021/06/laptop.jpg">
  <area shape="circle" coords="337,300,44" alt="coffee" href="https://lenadesign.org/wp-content/uploads/2021/06/photoshop-gif.gif">
</map>

</body>
</html>

Output:

Click on the laptop or the cup of coffee:

<div class="ar">
<img src="https://lenadesign.org/wp-content/uploads/2021/06/homeOffice.jpg" alt="homeOffice" usemap="#workmap" width="640" height="480">

<map name="workmap">
  <area shape="circle" coords="280,210,45" alt="laptop" href="https://lenadesign.org/wp-content/uploads/2021/06/laptop.jpg">
  <area shape="circle" coords="160,210,45" alt="coffee" href="https://lenadesign.org/wp-content/uploads/2021/06/photoshop-gif.gif">
</map>
</div>

HTML <link> href Attribute

Syntax:

<link href="URL">

URL – the URL of the linked resource/document.

Example:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="example-style.css">
</head>
<body>

<h4>This is a heading.</h4>

<p>This is a paragraph.</p>

<p>This is the second paragraph.</p>

</body>
</html>

Output:

Read also:

HTML accesskey Attribute

HTML draggable Attribute

HTML style Attribute

Tags href, HTML, HTML attribute, HTML attributes

HTML Web development

HTML target Attribute

Post author By Lena Stanley
Post date January 19, 2022

The HTML target attribute defines the target for where to open the linked document or where to submit the form.

The HTML target attribute belongs to the following tags:

HTML <a> target Attribute

Syntax:

<a target="_blank|framename|_parent|_self|_top">

_blank – opens the linked document in a new window or tab.

framename – opens the linked document in the named iframe.

_parent – opens the linked document in the parent frame.

_self (default) – opens the linked document in the same frame as it was clicked.

_top – opens the linked document in the full body of the window.

Example:

<!DOCTYPE html>
<html>
<body>

<p>Open link in a new tab: <a href="https://www.lenastanley.com/" target="_blank">CodeLife:Animations</a></p>

</body>
</html>

Output:

Open link in a new tab: CodeLife:Animations

HTML <area> target Attribute

Syntax:

<area target="_blank|framename|_parent|_self|_top">

_blank – opens the linked document in a new window or tab.

framename – opens the linked document in the named iframe.

_parent – opens the linked document in the parent frame.

_self (default) – opens the linked document in the same frame as it was clicked.

_top – opens the linked document in the full body of the window.

Example:

<!DOCTYPE html>
<html>
<body>

<img src="https://lenadesign.org/wp-content/uploads/2021/06/homeOffice.jpg" alt="homeOffice" usemap="#workmap" width="640" height="480">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="laptop" href="https://lenadesign.org/wp-content/uploads/2021/06/laptop.jpg" target="_blank">
  <area shape="circle" coords="337,300,44" alt="coffee" href="https://lenadesign.org/wp-content/uploads/2021/06/photoshop-gif.gif" target="_blank">
</map>

</body>
</html>

Output:

Click on the laptop or the cup of coffee to open an image in a new tab:

HTML <form> target Attribute

Syntax:

<form target="_blank|framename|_parent|_self|_top">

_blank – opens the linked document in a new window or tab.

framename – opens the linked document in the named iframe.

_parent – opens the linked document in the parent frame.

_self (default) – opens the linked document in the same frame as it was clicked.

_top – opens the linked document in the full body of the window.

Example:

<!DOCTYPE html>
<html>
<body>

<form action="" method="get" target="_blank">
  <label for="fname">First name:</label>
  <input type="text" id="first-name" name="firstname"><br><br>
  <label for="lname">Surname:</label>
  <input type="text" id="surname" name="surname"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:

Enjoy coding!

Read also:

HTML action Attribute

HTML data-* Attribute

Tags HTML, HTML attribute, HTML attributes, target

HTML Web development

HTML style Attribute

Post author By Lena Stanley
Post date December 16, 2021

The HTML style attribute defines a style for an element (can be used on all HTML elements).

The HTML style attribute overrides any style set globally (for example styles defined in the <style> tag).

Example:

<!DOCTYPE html>
<html>
<body>

<p style="color:#e76f51; text-decoration: underline;">This is a paragraph.</p>
<h4 style="color:#264653; background-color: #e9c46a;">This is a header.</h4>

</body>
</html>

Output:

This is a paragraph.

This is a header.

Read also:

HTML Attributes

HTML List Tags

HTML Media

Tags HTML, HTML attribute, HTML attributes, style

HTML Web development

HTML src Attribute

Post author By Lena Stanley
Post date December 16, 2021

The HTML src attribute defines the location (URL) of the external resource.

The HTML src attribute applies to the following elements:

<audio>
<embed>
<iframe>
<img>
<input>
<script>
<source>
<track>
<video>

Examples:

An audio player with the source file:

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="https://lenadesign.org/wp-content/uploads/2021/07/Wooden-Train-Whistle.mp3" type="audio/mpeg">
</audio>

</body>
</html>

Output:

An iframe element embedding another document within the current HTML document:

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.lenastanley.com/" title="lena design">
</iframe>

</body>
</html>

Output:

An image element:

<!DOCTYPE html>
<html>
<body>

<img src="https://lenadesign.org/wp-content/uploads/2019/12/avatar.jpg" alt="avatar" width="640" height="480">

</body>
</html>

Output:

The HTML <input type=”image”> defines an image as a submit button:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="fname">First name: </label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name: </label>
  <input type="text" id="lname" name="lname"><br>
  <input type="image" src="https://lenadesign.org/wp-content/uploads/2021/06/submit-button.png" alt="Submit" width="100" height="100">
</form>

</body>
</html>

Output:

Play a video:

<!DOCTYPE html> 
<html> 
<body> 

<video width="640" controls src="https://videos.files.wordpress.com/lFj3lsG4/valentines-day-movie_dvd.mp4" type="video/mp4">
</video>

</body> 
</html>

Output:

Read also:

HTML Attributes

HTML Media

HTML Form Elements

Tags HTML, HTML attribute, HTML attributes, src