<h4>When to use</h4>
<p>Emphasis tags (<code><strong></code> and <code><em></code>) should be used to add visual distinction between a word or phrase and its surrounding copy. Use <code><strong></code> for plain old attention and <code><em></code> for <em>slick</em> attention and titles.</p>
<h3>Emphasis in a paragraph</h3>
- <p><a href="">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p>
+ <p><a href="#">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p>
<p><strong>Note:</strong> It’s still okay to use <code><b></code> and <code><i></code> tags in HTML5, but they don’t come with inherent styles anymore. <code><b></code> is meant to convey importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
<h3>Addresses</h3>
<p>The <code>address</code> element is used for contact information for its nearest ancestor, or the entire body of work. Here’s how it looks:</p>
<div class="topbar-wrapper" style="z-index: 5;">
<div class="topbar">
<div class="container fixed">
- <h3><a class="logo" href="">Project Name</a></h3>
+ <h3><a href="#">Project Name</a></h3>
<ul>
- <li class="active"><a href="">Home</a></li>
- <li><a href="">Link</a></li>
- <li><a href="">Link</a></li>
- <li><a href="">Link</a></li>
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
</ul>
<form action="">
<input type="text" placeholder="Search" />
<li class="menu">
<a href="#" class="menu">Dropdown</a>
<ul class="menu-dropdown">
- <li><a href="">Secondary link</a></li>
- <li><a href="">Something else here</a></li>
+ <li><a href="#">Secondary link</a></li>
+ <li><a href="#">Something else here</a></li>
<li class="divider"></li>
- <li><a href="">Another link</a></li>
+ <li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
</div>
<div class="span12 columns">
<ul class="tabs">
- <li class="active"><a href="">Home</a></li>
- <li><a href="">Profile</a></li>
- <li><a href="">Messages</a></li>
- <li><a href="">Settings</a></li>
- <li><a href="">Contact</a></li>
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Contact</a></li>
</ul>
<pre class="prettyprint linenums">
<ul class="tabs">
- <li class="active"><a href="">Home</a></li>
- <li><a href="">Profile</a></li>
- <li><a href="">Messages</a></li>
- <li><a href="">Settings</a></li>
- <li><a href="">Contact</a></li>
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Contact</a></li>
</ul>
</pre>
<ul class="pills">
- <li class="active"><a href="">Home</a></li>
- <li><a href="">Profile</a></li>
- <li><a href="">Messages</a></li>
- <li><a href="">Settings</a></li>
- <li><a href="">Contact</a></li>
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Contact</a></li>
</ul>
<pre class="prettyprint linenums">
<ul class="pills">
- <li class="active"><a href="">Home</a></li>
- <li><a href="">Profile</a></li>
- <li><a href="">Messages</a></li>
- <li><a href="">Settings</a></li>
- <li><a href="">Contact</a></li>
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Contact</a></li>
</ul>
</pre>
</div>
<div class="span12 columns">
<div class="pagination">
<ul>
- <li class="prev disabled"><a href="">← Previous</a></li>
- <li class="active"><a href="">1</a></li>
- <li><a href="">2</a></li>
- <li><a href="">3</a></li>
- <li><a href="">4</a></li>
- <li><a href="">5</a></li>
- <li class="next"><a href="">Next →</a></li>
+ <li class="prev disabled"><a href="#">← Previous</a></li>
+ <li class="active"><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">4</a></li>
+ <li><a href="#">5</a></li>
+ <li class="next"><a href="#">Next →</a></li>
</ul>
</div>
<div class="pagination">
<ul>
- <li class="prev"><a href="">← Previous</a></li>
- <li class="active"><a href="">10</a></li>
- <li><a href="">11</a></li>
- <li><a href="">12</a></li>
- <li class="disabled"><a href="">…</a></li>
- <li><a href="">19</a></li>
- <li><a href="">20</a></li>
- <li><a href="">21</a></li>
- <li class="next"><a href="">Next →</a></li>
+ <li class="prev"><a href="#">← Previous</a></li>
+ <li class="active"><a href="#">10</a></li>
+ <li><a href="#">11</a></li>
+ <li><a href="#">12</a></li>
+ <li class="disabled"><a href="#">…</a></li>
+ <li><a href="#">19</a></li>
+ <li><a href="#">20</a></li>
+ <li><a href="#">21</a></li>
+ <li class="next"><a href="#">Next →</a></li>
</ul>
</div>
<div class="pagination">
<ul>
- <li class="prev"><a href="">← Previous</a></li>
- <li><a href="">10</a></li>
- <li><a href="">11</a></li>
- <li><a href="">12</a></li>
- <li><a href="">13</a></li>
- <li><a href="">14</a></li>
- <li class="active"><a href="">15</a></li>
- <li><a href="">16</a></li>
- <li><a href="">17</a></li>
- <li><a href="">18</a></li>
- <li><a href="">19</a></li>
- <li><a href="">20</a></li>
- <li class="next"><a href="">Next →</a></li>
+ <li class="prev"><a href="#">← Previous</a></li>
+ <li><a href="#">10</a></li>
+ <li><a href="#">11</a></li>
+ <li><a href="#">12</a></li>
+ <li><a href="#">13</a></li>
+ <li><a href="#">14</a></li>
+ <li class="active"><a href="#">15</a></li>
+ <li><a href="#">16</a></li>
+ <li><a href="#">17</a></li>
+ <li><a href="#">18</a></li>
+ <li><a href="#">19</a></li>
+ <li><a href="#">20</a></li>
+ <li class="next"><a href="#">Next →</a></li>
</ul>
</div>
<pre class="prettyprint linenums">
<div class="pagination">
<ul>
- <li class="prev disabled"><a href="">&larr; Previous</a></li>
- <li class="active"><a href="">1</a></li>
- <li><a href="">2</a></li>
- <li><a href="">3</a></li>
- <li><a href="">4</a></li>
- <li><a href="">5</a></li>
- <li class="next"><a href="">Next &rarr;</a></li>
+ <li class="prev disabled"><a href="#">&larr; Previous</a></li>
+ <li class="active"><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">4</a></li>
+ <li><a href="#">5</a></li>
+ <li class="next"><a href="#">Next &rarr;</a></li>
</ul>
</div>
</pre>
<p>One fine body…</p>
</div>
<div class="modal-footer">
- <a href="" class="btn primary">Primary</a>
- <a href="" class="btn secondary">Secondary</a>
+ <a href="#" class="btn primary">Primary</a>
+ <a href="#" class="btn secondary">Secondary</a>
</div>
</div>
</div>