<h3>Meter ELement</h3>
<p>Disk usage <meter  min="0"  max="100" value="10"></meter>10gb is used out of  100gb </p>
<p>Heat the oven to <meter min="200" max="500"
  value="350">350 degrees</meter>.</p><label for="pressure">Pressure (low value is good)</label>
<meter id="pressure" name="pressure" min="0" max="100"
low="25" high="75" optimum="20" value="50">
is OK
</meter>
	<hr><h3>q Element</h3>
 <p>In <cite>2001: A Space Odyssey</cite>, Dave asks HAL to open the pod bay door and HAL answers: <q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">I'm sorry, Dave. I'm afraid I can't do that.</q></p>
<hr><h3>Keyboard Element</h3>
<p>Please press <kbd>Ctrl</kbd> + <kbd>F5</kbd> to refresh a page in windows.</p>
<p>Please press <kbd>shift</kbd> + <kbd>Cmd</kbd> + <kbd>r</kbd> to refresh a page in mac.</p>
<p>You can also create a new document using the keyboard shortcut
<kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>.</p>
	<hr><h3>Mark Element</h3>
	<p>It is a dark time for the Rebellion. Although the Death
Star has been destroyed, <mark class="match">Imperial</mark>
troops have driven the Rebel forces from their hidden base and
pursued them across the galaxy.</p>

<p>Evading the dreaded <mark class="match">Imperial</mark>
Starfleet, a group of freedom fighters led by Luke Skywalker
has established a new secret base on the remote ice world of
Hoth.</p>
	<hr>
	<h3>contenteditable attribute</h3>
	<p class="editable" contenteditable='true'>Start writing here...</p>
.keyboards{
	margin: 10px 0px;
}
p> kbd{
  border:1px solid black;
  padding:3px;
  border-radius:4px;
	display: inline-block;
	margin: 5px;
}
p.editable {
  border: 1px solid #ccc;
  padding: 10px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.