-
Notifications
You must be signed in to change notification settings - Fork 134
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improvements in semantic-html5-tags.html
- Loading branch information
Showing
1 changed file
with
104 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,97 +1,111 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Semantic Tags</title> | ||
| <meta charset="UTF-8"> | ||
| <title>Semantic Tags</title> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <h1> | ||
| our web site header | ||
| </h1> | ||
| <nav> | ||
| <ul> | ||
| <li> | ||
| <a href="#"> | ||
| home | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| blog | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| contacts | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| about | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
| <section> | ||
| <article> | ||
| <header> | ||
| <h2>post 1 heading</h2> | ||
| </header> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis turpis et diam rutrum viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam porta euismod libero at dictum. Vivamus ultrices lectus sit amet nisl sollicitudin convallis. Nullam molestie eros in nibh laoreet suscipit. Curabitur sed lectus in lectus sodales imperdiet. Pellentesque congue egestas est, at dignissim magna iaculis volutpat. Nam nec risus risus, eget tincidunt lacus. Praesent ut blandit ante. Curabitur eu nulla id augue pharetra lobortis. Donec luctus hendrerit fermentum. Curabitur cursus lacus vel dolor ullamcorper vitae eleifend nibh lobortis. Morbi vitae mollis elit. Sed aliquet felis a arcu egestas at pretium mi dictum. Phasellus sed enim nunc, mollis posuere felis. Mauris dignissim odio porttitor turpis tristique in congue diam ornare.</p> | ||
| </article> | ||
| <article> | ||
| <header> | ||
| <h2>post 2 heading</h2> | ||
| </header> | ||
| <p>Quisque pellentesque rutrum urna, a molestie mi fermentum non. Quisque mattis, diam vitae hendrerit gravida, sem nibh ullamcorper risus, a porttitor ipsum nibh ut nunc. Nam tincidunt blandit dui ut bibendum. Duis arcu mauris, condimentum non semper elementum, fringilla ac mi. Pellentesque consectetur, tellus eu porttitor convallis, lacus est volutpat urna, quis aliquam tellus lectus sit amet nisl. Curabitur odio mauris, feugiat ut vulputate nec, mattis sit amet lectus. Morbi eu tortor quis ligula laoreet tincidunt. Praesent vulputate aliquam interdum. Nulla facilisi. Quisque placerat consectetur congue. Phasellus sed tellus a velit mollis vulputate. Morbi ultrices risus eget eros commodo vitae elementum leo varius. Nunc hendrerit felis eget enim lobortis consequat. Ut faucibus erat a turpis vulputate placerat.</p> | ||
| </article> | ||
| <article> | ||
| <header> | ||
| <h2>post 3 heading</h2> | ||
| </header> | ||
| <p>Donec euismod nulla sit amet tellus pulvinar blandit. Aenean sagittis porttitor egestas. Nulla viverra ornare volutpat. Sed fermentum porttitor elit, sit amet pellentesque metus mollis id. Praesent interdum, metus at consectetur euismod, dui augue scelerisque purus, quis placerat dolor tortor id mauris. Maecenas in justo et nisi dapibus gravida et eget ipsum. Maecenas id quam felis, in hendrerit purus.</p> | ||
| </article> | ||
| </section> | ||
| <aside> | ||
| <div> | ||
| <h2>Archives</h2> | ||
| <ul> | ||
| <li> | ||
| <a href="#">2012</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">2011</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">2010</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">2009</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <div> | ||
| <h2>Categories</h2> | ||
| <ul> | ||
| <li> | ||
| <a href="#">Web</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">.NET</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">JavaScript</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">ASP.NET MVC</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </aside> | ||
| <footer> | ||
| <p>copy right...</p> | ||
| </footer> | ||
| <header> | ||
| <h1> | ||
| Semantic Tags Examples | ||
| </h1> | ||
| <nav> | ||
| <ul> | ||
| <li> | ||
| <a href="#"> | ||
| home | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| contacts | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| about | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
| <main> | ||
| <article> | ||
| <header> | ||
| <h2>post 1 heading</h2> | ||
| </header> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis turpis et diam rutrum viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam porta euismod libero at dictum. Vivamus ultrices lectus sit amet nisl sollicitudin convallis. Nullam molestie eros in nibh laoreet suscipit. Curabitur sed lectus in lectus sodales imperdiet. Pellentesque congue egestas est, at dignissim magna iaculis volutpat. Nam nec risus risus, eget tincidunt lacus. Praesent ut blandit ante. Curabitur eu nulla id augue pharetra lobortis. Donec luctus hendrerit fermentum. Curabitur cursus lacus vel dolor ullamcorper vitae eleifend nibh lobortis. Morbi vitae mollis elit. Sed aliquet felis a arcu egestas at pretium mi dictum. Phasellus sed enim nunc, mollis posuere felis. Mauris dignissim odio porttitor turpis tristique in congue diam ornare.</p> | ||
| </article> | ||
| <article> | ||
| <header> | ||
| <h2>post 2 heading</h2> | ||
| </header> | ||
| <p>Quisque pellentesque rutrum urna, a molestie mi fermentum non. Quisque mattis, diam vitae hendrerit gravida, sem nibh ullamcorper risus, a porttitor ipsum nibh ut nunc. Nam tincidunt blandit dui ut bibendum. Duis arcu mauris, condimentum non semper elementum, fringilla ac mi. Pellentesque consectetur, tellus eu porttitor convallis, lacus est volutpat urna, quis aliquam tellus lectus sit amet nisl. Curabitur odio mauris, feugiat ut vulputate nec, mattis sit amet lectus. Morbi eu tortor quis ligula laoreet tincidunt. Praesent vulputate aliquam interdum. Nulla facilisi. Quisque placerat consectetur congue. Phasellus sed tellus a velit mollis vulputate. Morbi ultrices risus eget eros commodo vitae elementum leo varius. Nunc hendrerit felis eget enim lobortis consequat. Ut faucibus erat a turpis vulputate placerat.</p> | ||
| </article> | ||
| <article> | ||
| <header> | ||
| <h2>post 3 heading</h2> | ||
| </header> | ||
| <p>Donec euismod nulla sit amet tellus pulvinar blandit. Aenean sagittis porttitor egestas. Nulla viverra ornare volutpat. Sed fermentum porttitor elit, sit amet pellentesque metus mollis id. Praesent interdum, metus at consectetur euismod, dui augue scelerisque purus, quis placerat dolor tortor id mauris. Maecenas in justo et nisi dapibus gravida et eget ipsum. Maecenas id quam felis, in hendrerit purus.</p> | ||
| </article> | ||
| </main> | ||
| <aside> | ||
| <section> | ||
| <h2>Archives</h2> | ||
| <ul> | ||
| <li> | ||
| <a href="#">2012</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">2011</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">2010</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">2009</a> | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| <section> | ||
| <h2>Categories</h2> | ||
| <ul> | ||
| <li> | ||
| <a href="#">Web</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">.NET</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">JavaScript</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">ASP.NET MVC</a> | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| <section> | ||
| <h2>Video</h2> | ||
| <video width="400" controls> | ||
| <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> | ||
| <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> | ||
| Your browser does not support HTML5 video. | ||
| </video> | ||
|
|
||
| <p> | ||
| Video courtesy of | ||
| <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>. | ||
| </p> | ||
| </section> | ||
| </aside> | ||
| <footer> | ||
| <details> | ||
| <summary>Copyright 2015.</summary> | ||
| <p> - by Telerik Academy. All Rights Reserved.</p> | ||
| <p> | ||
| <a href="http://telerikacademy.com">http://telerikacademy.com</a>. | ||
| </p> | ||
| </details> | ||
| </footer> | ||
| </body> | ||
| </html> |