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.