April 21
4 less known HTML tags
Pretty useful stuff!
Group Options
The <optgroup>
tag is used to group related options in a <select>
element (drop-down list).
<select>
<option value="">Select your favourite movie</option>
<optgroup label="Action">
<option value="">Avengers</option>
<option value="">Die Hard</option>
<option value="">Fast & Furious</option>
<option value="">The Dark Knight</option>
<option value="">The Karate Kid</option>
</optgroup>
<optgroup label="Animation">
<option value="">Despicable Me</option>
<option value="">Ice Age</option>
<option value="">Kung Fu Panda</option>
<option value="">Madagascar</option>
<option value="">The Lion King</option>
</optgroup>
<optgroup label="Horror">
<option value="">Mirrors</option>
<option value="">Scream</option>
<option value="">The Final Destination</option>
<option value="">The Grudge</option>
<option value="">The Ring</option>
</optgroup>
<optgroup label="Sci-fi">
<option value="">Inception</option>
<option value="">Frankenstein </option>
<option value="">The Matrix</option>
<option value="">Interstellar</option>
<option value="">Back to the Future </option>
</optgroup></select>
If you have a long list of options, groups of related options are easier to handle for a user.
KBD
The <kbd>
tag is used to define keyboard input.
<section>
<p class="margin">Close this window by pressing <kbd>Esc</kbd></p>
<p class="margin">Copy to clipboard (Windows) <kbd>Ctrl</kbd> <kbd>c</kbd></p>
<p class="margin">Copy to clipboard (Mac OS) <kbd>Cmd</kbd> <kbd>c</kbd> </p></section>
Highlight text
The <mark>
tag defines the text that should be marked or highlighted.
<section>
<h2 class="h2">World War II</h2>
<p class="p">
World War II (WWII or WW2), also known as the Second World War (after the recent Great War), was a global
war that lasted
<mark>from 1939 to 1945</mark>, though related conflicts began earlier. It involved the vast majority of the
world's nations—including all of the great powers—eventually forming two opposing military alliances: the
Allies and the Axis. It was the most widespread
war in history, and directly involved more than
<mark>100 million people from over 30 countries</mark>. In a state of "total war", the major participants
threw their entire economic, industrial, and scientific capabilities behind the war effort, erasing the
distinction between civilian and military resources.
Marked by mass deaths of civilians, including the
<mark>Holocaust</mark> (during which approximately 11 million people were killed) and the strategic bombing
of industrial and population centres (during which approximately one million people were killed, including
the use of two nuclear weapons in combat),
it resulted in an estimated 50 million to 85 million fatalities. These made World War II the deadliest
conflict in human history.
</p>
</section>
Small quotes
The <q>
tag defines a short quotation.
<section>
<p class="p">Chambray vegan echo park kinfolk, coloring book church-key retro. Quinoa lomo poutine, man bun
cold-pressed
typewriter portland tumeric polaroid sartorial 3 wolf moon coloring book. Vegan offal franzen, affogato
keffiyeh tumeric <q class="quote">I'm a teene tiny quote 😊!</q>DIY venmo shaman stumptown lo-fi adaptogen.
Irony blue bottle scenester, lomo bespoke
coloring book DIY blog synth ramps drinking vinegar tumblr hashtag tote bag. Keytar glossier blog chambray
truffaut pug seitan art party marfa kogi pitchfork slow-carb. 90's vaporware glossier echo park, bushwick
authentic blue bottle poke cardigan trust fund. Chia selvage man braid mustache migas cardigan.<q
class="quote">We take seeds and grow jungles!! - Codegrain😅</q>Heirloom +1 umami brooklyn neutra
microdosing. Mustache brooklyn vinyl, green juice freegan chambray poutine listicle 90's vexillologist
organic. Celiac tousled vexillologist fingerstache kale chips raclette man bun YOLO keytar raw denim viral
kinfolk vice. Blue bottle raclette flexitarian glossier. Vice VHS meggings coloring book, air plant deep v
cloud bread. Glossier retro VHS deep v.</p></section>
Browsers normally insert quotation marks around the quotation.