Semantic HTML

<a rel="me"       href="https://github.com/Stephcraft">...</a>
<a rel="author"   href="https://stephcraft.net"       >...</a>
<a rel="bookmark" href="/blog/ai"                     >...</a>
<a rel="tag"      href="/blog/tags/typescript"        >...</a>
<a rel="search"   href="/search"                      >...</a>
<a rel="help"     href="/help"                        >...</a>
     
 Document links

"me" Link represents the document's owner · useful for socials

"author" Link to an author of the document or article

"bookmark" Permalink for the article or document

"tag" Link to a tag applied to this document

"search" Link to search through the document and its related pages

"help" Link to context-sensitive help


<a rel="next" href="/?page=3">...</a>
<a rel="prev" href="/?page=1">...</a>
     
 Pagination links

"next" Link to the document's next page

"prev" Link to the document's previous page


<a rel="license"          href="/license">...</a>
<a rel="privacy-policy"   href="/policy" >...</a>
<a rel="terms-of-service" href="/terms"  >...</a>
     
 Legal links

"license" copyright license for the document

"privacy-policy" data collection and usage practices for the document

"terms-of-service" agreement between the user and the document provider


One of each per document · usually found in the <footer> or in the <head> as <link/>

<a rel="external" href="https://developer.mozilla.org">...</a>
<a rel="nofollow" href="https://bricksandminifigs.com">...</a>
     
 Third-party links

"external" link is not part of this website

"nofollow" link is not endorsed by this document's owner


<a rel="noopener"   href="...">...</a>
<a rel="noreferrer" href="...">...</a>
     
 Privacy and Security link parameters

"noopener" excludes  window.opener

"noreferrer" excludes  window.opener and the Referer header


 target="_blank" implies  rel="noopener" 

<form action="" method="get">
    <fieldset>
        <legend>Contact information</legend>

        <label>
            Enter your name:
            <input type="text" name="name" required/>
        </label>

        <label>
            Enter your email:
            <input type="email" name="email" required/>
        </label>

    </fieldset>

    <input type="submit" value="Subscribe!"/>
</form>

<button command="show-modal" commandfor="dialog-modal">Open dialog</button>
            
A <button> can  open a <dialog> with:

 command="show-modal"

 commandfor set to the  id of the <dialog>


<dialog id="dialog-modal">
    <p>This is a dialog!</p>
    <button command="close" commandfor="dialog-modal">Close</button>
    
            
A <button> can  close a <dialog> with:

 command="close"

 commandfor set to the  id of the <dialog>

</dialog>

<button popovertargetaction="show" popovertarget="popover-modal">Open dialog</button>
                  
A <button> can  open a <dialog popover> with:

 popovertargetaction="show"

 popovertarget set to the  id of the <dialog popover>


<dialog id="popover-modal" popover>
    <p>This is a popover!</p>
    <button popovertargetaction="hide" popovertarget="popover-modal">Close</button>
    
                  
A <button> can  close a <dialog popover> with:

 popovertargetaction="hide"

 popovertarget set to the  id of the <dialog popover>

</dialog>

<nav class="breadcrumbs">
    <ol>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/blog#web">Web</a></li>
        <li>Semantic HTML</li>
    </ol>
</nav>

.breadcrumbs ol {
    list-style-type: none;
    padding-left: 0;

    li {
        display: inline-block;

        a::after {
            display: inline-block;
            color: black;
            content: "▸";
            font-size: 80%;
            font-weight: bold;
            padding: 0 3px;
        }
    }
}