Categories
Web development

HTML open Attribute


HTML open Attribute

The HTML open attribute defines that the information should be visible by default.

The HTML open attribute can be used on the following element:

<details>

Syntax:

<details open> 

Example:

<!DOCTYPE html>
<html>
<body>

<details open>
  <summary>HTML</summary>
  <p>HTML defines the structure of the web page.</p>
</details>

</body>
</html>

Output:

The example shows a details element that is visible by default:

HTML

HTML defines the structure of the web page.

Read also:

HTML progress tag

HTML pre tag

HTML caption tag

Categories
HTML Web development

HTML value Attribute

HTML value Attribute

The HTML value attribute you can use on the following elements:

For <button>, <input> and <option> elements, the value attribute defines the initial value of the element.

Example1:

The button value attribute. Clicking a button submits its value:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <button name="number" type="submit" value="One">One</button>
  <button name="number" type="submit" value="Two">Two</button>
  <button name="number" type="submit" value="Three">Three</button>
</form>

</body>
</html>

Output:

Example2:

The input value attribute. An HTML form with default values:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="fname">First name:</label>
  <input type="text" id="name" name="surname" value="Robert"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="name" name="surname" value="Johnson"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:



Example3:

The option value attribute. Choose a colour, and click the “Submit” button to send input to the server:

<!DOCTYPE html>
<html>
<body>

<form action="">
<label for="colors">Choose a colour:</label>

<select id="colors" name="colors">
  <option value="red">Red colour</option>
  <option value="blue">Blue colour</option>
  <option value="yellow">Yellow colour</option>
</select>
<input type="submit" value="Submit">
</form>

</body>
</html>

Output:

For meter elements, the value attribute defines the current value of the gauge.

Example4:

A gauge with a current value, min, max, high, and low segments:

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

For li elements, the value attribute settles the value of the list item (for ordered lists). The next list items will increment from that value.

Example5:

<!DOCTYPE html>
<html>
<body>

<ol>
  <li value="1">Sugar</li>
  <li>Milk</li>
  <li>Water</li>
  <li>Flour</li>
  <li>Baking powder</li>
</ol>

</body>
</html>

Output:

  1. Sugar
  2. Milk
  3. Water
  4. Flour
  5. Baking powder

For progress elements, the value attribute defines how much of the task has been completed.

Example6:

<!DOCTYPE html>
<html>
<body>

<label for="bar">Downloading...</label>
<progress id="bar" value="46" max="100">46%</progress>

</body>
</html>

Output:

46%

Enjoy coding!

Read also:

HTML optimum Attribute

HTML width Attribute

HTML target Attribute

Categories
HTML Web development

HTML optimum Attribute



HTML optimum Attribute

The HTML optimum attribute defines the range where the gauge’s value is considered to be an optimal value.

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

Example:

<!DOCTYPE html>
<html>
<body>

<p><label for="o-val">The meter optimum attribute:</label>
<meter id="o-val" value="65" high="90" low="10" min="0" max="100" optimum="50"></meter></p>

</body>
</html>

Output:

Enjoy coding!

Read also:

HTML dir Attribute

HTML height Attribute

HTML srcset Attribute

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