Skip to content

Instantly share code, notes, and snippets.

View chris-pearce's full-sized avatar
🤷‍♂️
FED'ing

Chris Pearce chris-pearce

🤷‍♂️
FED'ing
View GitHub Profile
<!-- No good -->
<i class="c-icon-edit"></i>
<!-- Good -->
<span class="c-icon-edit">
<span class="hide-visually">Edit draft</span>
</span>
<!-- No good -->
<ul class="c-user-data">
<a role="button" class="c-drop-down-menu__trigger js-drop-down-menu-trigger"></a>
<button type="button" class="c-drop-down-menu__trigger js-drop-down-menu-trigger">
<span class="h-hide-visually">Open menu options</span>
</button>
@chris-pearce
chris-pearce / examples-of-semantic-html--1.md
Last active May 14, 2016 13:40
Examples of semantic HTML
<nav>
    <ul>
        <li>
            <a href="link1.html">Link 1</a>
        </li>
        <li>
            <a href="link2.html">Link 2</a>
        </li>
 
<p>Chris Pearce commented <time datetime="2001-04-16T19:00">13 days ago</time>.</p>
<nav class="galleryLightbox__controls">
<a data-gallery-action="prev" class="gallery__icons time-icons time-icons-previous-outline disabled"></a>
<a data-gallery-action="next" class="gallery__icons time-icons time-icons-next-outline"></a>
</nav>
<a class="header-nav-button time-icons time-icons-menu" title="Click to show site navigation"></a>
<a href="javascript:void 0;" class="main-nav-search-button">
<span class="time-icons time-icons-search main-nav-search-icon" title="Click to search Time.com"></span>
</a>
<!-- Tweet dialog close button. https://twitter.com/ -->
<button type="button" class="modal-btn modal-close js-close" aria-controls="global-tweet-dialog-dialog" aria-describedby="global-tweet-dialog-body">
<span class="Icon Icon--close Icon--medium">
<span class="visuallyhidden">Close</span>
</span>
</button>
<a href="/settings/account" class="btn js-tooltip settings dropdown-toggle js-dropdown-toggle" id="user-dropdown-toggle" data-placement="bottom" role="button" aria-haspopup="true" data-original-title="Profile and settings">
<img class="avatar size32" src="https://pbs.twimg.com/profile_images/728701766783500288/X-s29VYA_normal.jpg" alt="Profile and settings" data-user-id="16481805">
</a>
<a class="feed-carousel-control feed-left" href="#" aria-hidden="true">
<span class="gw-icon feed-arrow"></span>
</a>
<a class="feed-carousel-control feed-right" href="#" aria-hidden="true">
<span class="gw-icon feed-arrow"></span>
</a>
<button class="feed-carousel-control feed-left" type="button">
<span class="h-hide-visually">View the previous lot of 4 items</span>
<span class="gw-icon feed-arrow" aria-hidden="true"></span>
</button>
<button class="feed-carousel-control feed-right" type="button">
<span class="h-hide-visually">View the next lot of 12 items</span>
<span class="gw-icon feed-arrow" aria-hidden="true"></span>
</button>