[HTML5] Level up -- Display

HTML5 Input type:

 

Traditionally presentational tags, the i, b, em, and strong tags have been given new semantic meanings:

• • The i tag represents text in an "alternate voice" or "mood";
  • The b tag represents "stylistically offset" text

<p><i>I hope this works</i>, he thought.</p> alternate vocie or mood

<p><b class="lead">The event take place this upcomming Saturday, and over 3,000 people have already registered.</b></p> stylistically offest

• • The em tag now means "Stress emphasis"
  • The strong tag now means "strong importance"

<p>Make sure to sign up <em>before</em> the day of the event, Septmber 16, 2013</p>

<p>Make sure to sign up <em>before</em> the day of the event, <strong>Septmber 16, 2013</strong></p>

 

main, article, header tag:

<main class="main">
  <article class="post">
    <header>
      <h2><a href="/blog/opening-date-announced">Opening Date Announced</a></h2>
      <p><em>Published on</em>: September 16, 2013</p>
    </header>

    <p><b class="article-lead">The Art Gallery will be opening to an <em>invitation-only</em> group of art enthusiasts across the country on <strong>December 1, 2013</strong>.</b></p>
    <p>The opening of the Art Gallery will coincide with the release of several of Armando Blontio's finest art pieces, including, "Crème de la Crème," which has a mounting anticipation for its debut.</p>
    <p>As a frequently misrespresented artist, Armando Blontio has struggled to uphold his image amidst the criticism. "I hope to dispel the illusion of my self-centeredness, as seen by my critics, with the Art Gallery opening," said Mr. Blontio.</p>
  </article>
</main>

 

figure and figcaption

<figure>
  <img src="armando-blontio.jpg" alt="A Famous Armando Blontio Painting" width="640" height="470" />
  <figcaption class="caption">"Crème de la Crème," a famous Armando Blontio painting.</figcaption>
</figure>

 

Time and datetime:

<header>
  <h2><a href="/blog/opening-date-announced">Opening Date Announced</a></h2>
  <p><em>Published on</em>: <time datetime="2013-09-16">September 16, 2013</time></p>
</header>

 

List, datalist:

<input type="text" list="categories"/>
<!-- Add your datalist here -->
<datalist id="categories">
    <option value="reviews">
    <option value="profiles">
    <option value="announcements">
</datalist>

 

placeholder and autofocus:

<input type="search" placeholder="Search..." autofocus/>

 

required:

<input type="email" placeholder="Enter your email..." required/>

 

partten and tel input

<input type="tel" pattern="[0-9]{10}"/>