The Address Element


by Jeremy Caudle
code

Jeremy Keith recently posted a link to a great newsletter about HTML, 30 Days of HTML. Every day they’ll send you an email about an HTML element and examples of how, when, and why you should use it. I haven’t worked with the address element in a while, so I thought I’d tackle it in today’s 100DaysofCode post. I also had not worked with microformats in a bit, so I wanted to make sure I had the different parts of my address labeled with the correct h-card microformats. It was fun and I need to put it to proper use in the next version of this website.

Jeremy Caudle Waving Right Hand

Site Owner: Jeremy Caudle
Website URL: https://jeremycaudle.com
E-mail: jeremy@jeremycaudle.com
Phone Number: 000-111-2222

View the code:

HTML and JS 
<div class="code-block">

            <address class="h-card">
                <img src="https://jeremycaudle.com/ygg/resources/onebitme.png" alt="Jeremy Caudle Waving Right Hand" width="480" height="389" class="u-photo">
                <p>
                Site Owner: <span class="p-name">Jeremy Caudle</span><br />
                Website URL: <a href="https://jeremycaudle.com" class="u-url">https://jeremycaudle.com</a><br />
                E-mail: <span class="u-email">jeremy@jeremycaudle.com</span><br />
                Phone Number: <span class="p-tel">000-111-2222</span>
                </p>
            </address>
CSS 
.code-block { 
                font-family: monospace;
                width: clamp(16em, 90vw, 480px);
                margin: 1rem auto;
                background-color: rgb(223, 223, 223);
                overflow: hidden;
            }

            .code-block address {
                padding: 1rem;
                font-style: normal;
                margin: 0 auto;
                border: dotted 1px #000000;
                position: relative;
                z-index: 1;
                display: block;
                min-width: 482px;
                min-height: 391px;
                color: cyan;
            }

            .code-block img {
                position: absolute;
                bottom: 0;
                right: 0;
                height: 389px;
                width: 480px;
                text-align: center;
                vertical-align: middle;
                background-color: cyan;
            }

            .code-block p {
                background-color: black;
                position: absolute;
                bottom: 1rem;
                left: 1rem;
                margin: 0;
                padding: 1rem;
            }

            .code-block p a {color: magenta;}

Tags