HTML Palpable Elements
HTML
Non-empty element with any flow content or phrasing content.
HTML Palpable elements
Element with any flow content or phrasing content and its content has at least one node in its contents that is palpable content and that does not have the hidden attribute specified.
Palpable content makes an element non-empty.
Text Elements are
<a>,
<abbr>,
<b>,
<blockquote>,
<em>,
<h1>,
<h2>,
<h3>,
<h4>,
<h5>,
<h6>,
<i>,
<ins>,
<kbd>,
<q>,
<s>,
<samp>,
<small>,
<span>,
<strong>,
<sub>,
<sup>,
<u>,
<var>,
Structural Elements are
<address>,
<article>,
<aside>,
<div>,
<footer>,
<header>,
<main>,
<menu>,
<nav>,
<p>,
<section>,
Media and Embedding Elements are
<audio>,
<canvas>,
<embed>,
<iframe>,
<img>,
<object>,
<video>.
Form and Input Elements are
<button>,
<fieldset>,
<form>,
<input>,
<meter>,
<output>,
<progress>,
<select>,
<textarea>,
Table Elements are
<caption>,
<table>,
<tbody>,
<td>,
<tfoot>,
<thead>,
<th>,
<tr>,
Other Content elements are
<data>,
<datalist>,
<details>,
<figure>,
<map>,
<mark>,
<time>,
Example <progress> bar tag
<!DOCTYPE html>
<html>
<head>
<title>HTML Progress tag example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
button {
margin: 20px 20px;
padding: 10px;
}
</style>
</head>
<body>
<div class="mydiv">
<h3>HTML Progress tag example</h3>
<p>The max attribute specifies the maximum value acceptable for an element.</p>
<label for="progressbar">Task Progress:</label>
<progress id="progressbar" value="0" max="100"></progress><span id="progressbarspan">
</span>%
<br>
<button onclick="startProgress()">Start Tasks</button>
</div>
</body>
<script>
const progressBar = document.querySelector("#progressbar");
const progressBarSpan = document.querySelector("#progressbarspan");
function startProgress() {
let currentValue = progressBar.value;
if (currentValue >= progressBar.max) {
progressBar.value = 0;
}
const intervalId = setInterval(function () {
if (progressBar.value >= progressBar.max) {
clearInterval(intervalId);
} else {
progressBar.value += 1;
progressBar.style.accentColor = "#ff0000";
progressBarSpan.textContent = progressBar.value;
}
}, 50);
}
</script>
</html>
Copy code and click on the "Try it Now" button to see how it works.