Grouping Semantic Elements

Blockquote Element

This element indicates text that’s quoted from elsewhere. Typically blockquote is used for longer quotes simply to correspond to standard writing practices.

This is a blockquote.

<blockquote> and </blockquote>

Address Element

This element is used to indicate contact information for an article or body. According to the specifications, this element should NOT be used for postal addresses unless those are the contact information. The specifications actually suggest using the <p> element for postal addresses. (Yes this is confusing!)

<address> and </address>

Details and Summary Elements

These elements are used together to create a simple line of text which, when clicked, will reveal more details. CSS can be used to style this.

<details>
            <summary>Dr. Foltz</summary>
            <p>Bio full of details</p>
        </details>
        

Figure and Figcaption Elements

These elements are used along with an image or other visual. The figure element provides an overall grouping, while figcaption provides a consistent and semantic way to add a caption.

<figure> 
            <img src=”photo.jpg” alt=”photo”> 
            <figcaption>This is a caption.</figcaption> 
        </figure>