Categories
HTML Web development

HTML low Attribute



HTML low Attribute

The HTML low attribute defines the range where the gauge’s value is considered to be a low value.

The low attribute value needs to be greater than the min attribute value, and it also needs to be less than the high and max attribute values.

The HTML low attribute can be used on the <meter> element.

Example:

<!DOCTYPE html>
<html>
<body>

<p><label for="disc-C">Disc C</label>
<meter id="disc-C" min="0" low="30" high="90" max="100" value="85"></meter></p>

<p><label for="disc-D">Disc D</label>
<meter id="disc-D" min="0" low="30" high="90" max="100" value="65"></meter></p>

<p><label for="disc-E">Disc E</label>
<meter id="disc-E" min="0" low="30" high="90" max="100" value="25"></meter></p>

</body>
</html>

Output:

Enjoy coding!

Read also:

HTML id Attribute

HTML src Attribute

HTML wrap Attribute

Categories
HTML Web development

HTML high Attribute


HTML high Attribute

The HTML high attribute defines the range where the gauge’s value is considered to be a high value.

The high attribute value should be less than the max attribute value, and it also needs to be greater than the low and min attribute values.

The HTML high attribute can be used on the <meter> element.

Example:

<!DOCTYPE html>
<html>
<body>

<p><label for="disc-C">Disc C</label>
<meter id="disc-C" min="0" low="40" high="80" max="100" value="85"></meter></p>

<p><label for="disc-D">Disc D</label>
<meter id="disc-D" min="0" low="40" high="80" max="100" value="65"></meter></p>

<p><label for="disc-E">Disc E</label>
<meter id="disc-E" min="0" low="40" high="80" max="100" value="25"></meter></p>

</body>
</html>

Output:

Enjoy coding!

Read also:

HTML alt Attribute

HTML hidden Attribute

HTML href Attribute

Categories
HTML Web development

HTML height Attribute



HTML height Attribute

The HTML height attribute defines the height of the element (in pixels).

The HTML width attribute can be used on the following elements:

Example1:

For the <canvas> element:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="100" height="100" style="border:1px solid #333">
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#0a9396";
ctx.fillRect(25, 25, 50, 50);
</script>

</body>
</html>

Output:

Example2:

For the <iframe> element:

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.lenastanley.com/" width="640" height="200">
</iframe>

</body>
</html>

Output:

Example3:

For an <img> element:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Output:

avatar

Example4:

For an <input> element:

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




Example5:

For the <video> element:

<!DOCTYPE html> 
<html> 
<body> 

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

</body> 
</html>

Output:

Enjoy coding!

Read also:

HTML action Attribute

HTML draggable Attribute

HTML Global Attributes

Categories
HTML Web development

HTML width Attribute


HTML width Attribute

The HTML width attribute defines the width of the element (in pixels).

The HTML width attribute can be used on the following elements:

Example1:

For the <canvas> element:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="100" height="100" style="border:1px solid #333">
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#0a9396";
ctx.fillRect(25, 25, 50, 50);
</script>

</body>
</html>

Output:


Example2:

For the <iframe> element:

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.lenastanley.com/" width="640" height="200">
</iframe>

</body>
</html>

Output:


Example3:

For an <img> element:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Output:

avatar

Example4:

For an <input> element:

Note: For input elements, you can use the width attribute only with <input type=”image”>.

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





Example5:

For the <video> element:

<!DOCTYPE html> 
<html> 
<body> 

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

</body> 
</html>

Output:


Enjoy coding!

Read also:

HTML audio tag

HTML style Attribute

HTML tabindex Attribute

Categories
HTML Web development

HTML wrap Attribute



HTML wrap Attribute

The HTML wrap attribute defines how the text in a text area is to be wrapped when submitted in a form.

The HTML wrap attribute can be used on the <textarea> element.

Syntax:

<textarea wrap="soft|hard"> 

hard – the text in the textarea will be wrapped when submitting the form.

soft (default) – the text present in the textarea would not be wrapped after submitting the form.

Example:

<!DOCTYPE html>
<html>
<body>

<form action="">
<textarea rows="3" cols="25" name="text" wrap="hard">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum justo at purus congue ultrices. In lectus orci, bibendum a cursus sed, ultricies ac neque.  
</textarea>
<input type="submit">
</form>

</body>
</html>

Output:

Enjoy coding!

Read also:

HTML accesskey Attribute

HTML dir Attribute

HTML translate Attribute

Categories
HTML iMovie Web development

HTML Global Attributes


Almost all attributes are defined to be used with particular elements. However, some of them are available for use on all HTML elements. These attributes are called Global Attributes.

accesskeydefines a shortcut key to activate/focus an element.
classdefines one or more class names for an element (makes a reference to a class in a style sheet).
contenteditabledefines whether the content of an element is editable or not.
data-*allows embedding custom data attributes on all HTML elements.
dirdefines the text direction of the element’s content.
draggabledefines whether an element is draggable or not.
hiddendefines that an element is not yet, or is no longer, relevant.
iddefines a unique id for an HTML element.
langdefines the language of the element’s content.
spellcheckdefines whether the element is to have its spelling and grammar checked or not.
styledefines a style for an element.
tabindexdefines the tab order of an element.
titledefines extra information about an element.
translatedefines whether the content of an element should be translated.

Read also:

HTML Attributes

HTML Tags

HTML Form Elements

Categories
HTML Web development

HTML translate Attribute



HTML translate Attribute

The HTML translate attribute defines whether the content of an element should be translated.

Syntax:

<element translate="yes|no"> 

yes – defines that the content of the element should be translated

no – defines that the content of the element must not be translated.

Example:

<!DOCTYPE html>
<html>
<body>

<header>
  <h1 translate="no">Lena Design</h1>
</header>

</body>
</html>

Output:

Lena Design

Enjoy coding!

HTML draggable Attribute

HTML hidden Attribute

HTML alt Attribute

Categories
HTML Web development

HTML spellcheck Attribute



HTML spellcheck Attribute

The HTML spellcheck attribute defines whether the element is to have its spelling and grammar checked or not.

The spellcheck attribute can be used with input and teaxtarea HTML elements, and the user input value can be checked for grammatical and spelling mistakes.

Syntax:

<element spellcheck="true|false"> 

true – the element is to have its spelling and grammar checked.

false – the element is not to be checked.

Example:

<!DOCTYPE html>
<html>
<body>

<p contenteditable="true" spellcheck="true">This text is editable and has some mistakkees. Try to change the text.</p>

First name: <input type="text" name="first-name" spellcheck="true">

</body>
</html>

Output:

This text is editable and has some mistakkees. Try to change the text.

First name:

Enjoy coding!

Read also:

HTML contenteditable Attribute

HTML src Attribute

HTML target Attribute

Categories
HTML Web development

HTML tabindex Attribute



HTML tabindex Attribute

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

Categories
HTML Web development

HTML srcset Attribute



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

HTML srcset Attribute

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:

ghost

Enjoy coding!

Read also:

HTML del tag & ins tag

HTML bdo tag

HTML caption tag