The HTML open attribute defines that the information should be visible by default.
The HTML open attribute can be used on the following element:
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 defines the structure of the web page.
Read also:
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:
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:
Enjoy coding!
Read also:
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:
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:
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:
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:
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:
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:
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:
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:
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.
| accesskey | defines a shortcut key to activate/focus an element. |
| class | defines one or more class names for an element (makes a reference to a class in a style sheet). |
| contenteditable | defines whether the content of an element is editable or not. |
| data-* | allows embedding custom data attributes on all HTML elements. |
| dir | defines the text direction of the element’s content. |
| draggable | defines whether an element is draggable or not. |
| hidden | defines that an element is not yet, or is no longer, relevant. |
| id | defines a unique id for an HTML element. |
| lang | defines the language of the element’s content. |
| spellcheck | defines whether the element is to have its spelling and grammar checked or not. |
| style | defines a style for an element. |
| tabindex | defines the tab order of an element. |
| title | defines extra information about an element. |
| translate | defines whether the content of an element should be translated. |
Read also:
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: