Table |
<table>
<caption></caption>
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
|
HTML entities |
Result | Description | Entity Name | Entity Number | | non-breaking space | |   | < | Less Than Sign | < | < | > | Greater Than Sign | > | > |
|
HTML5 Page Structure |
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Your menu</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
</section>
<aside>
<h2>About section</h2>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</aside>
<footer>
<p>Copyright 2009 Your name</p>
</footer>
</body>
</html> |
Left & Right Halves Layout |
* { margin: 0; padding: 0; }
#pagewrap {width:100%; position:relative;}
#left { position: absolute; left: 0; top: 0; width: 50%; }
#right { position: absolute; right: 0; top: 0; width: 50%; }
<div id="pagewrap">
<div id="left">
<p>Left Half</p>
<p>test</p>
<p>test</p>
</div>
<div id="right">
<p>Right Half</p>
<p>test</p>
<p>test</p>
</div>
</div>
|
Responsive Meta Tag |
<meta name="viewport" content="width=device-width">
OR
<meta name="viewport" content="width=device-width, initial-scale=1"> |
| |