Skip to content

Instantly share code, notes, and snippets.

@shubhgo

shubhgo/HTML code

Created January 26, 2014 21:16
Show Gist options
  • Save shubhgo/8639610 to your computer and use it in GitHub Desktop.
Save shubhgo/8639610 to your computer and use it in GitHub Desktop.
Download ZIP
Sample HTML code from http://www.htmldog.com/guides/html/
Raw
HTML code
<head>
<!--<meta http-equiv="refresh" content="1">-->
</head>
<div class='content'>
<p>So I asked Bob about quotations on the Web and he said <q>I know as much about quotations as I do about pigeon fancying</q>. Luckily, I found HTML Dog and it said:</p>
<blockquote cite="http://www.htmldog.com/guides/html/intermediate/text/">
<p>blockquote and q are used for quotations. blockquote is generally used for standalone often multi-line quotations whereas q is used for shorter, in-line quotations.</p>
</blockquote>
<figure>
<blockquote>[Big old quotation about evolution]</blockquote>
<figcaption>Charles Darwin</figcaption>
</figure>
<p>If you add the line <code><var>givevaderachuckle</var> = true;</code> to the <code>destroy_planet</code> subroutine and then type <kbd>ilovejabba</kbd> into the console, the big bad green Death Star laser will etch <samp>Slug Lover!</samp> on the planet's surface.</p>
<pre>
<code>
&lt;div id="intro"&gt;
&lt;h1&gt;Some heading&lt;/h1&gt;
&lt;p&gt;Some paragraph paragraph thing thing thingy.&lt;/p&gt;
&lt;/div&gt;
</code>
</pre>
<table>
<tr>
<th>Column 1 heading</th>
<th>Column 2 heading</th>
<th>Column 3 heading</th>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td colspan="2">Row 2, cell 2, also spanning Row 2, cell 3</td>
</tr>
<tr>
<td rowspan="2">Row 3, cell 1, also spanning Row 4, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>
<h1>Some random glossary thing</h1>
<dl>
<dt>HTML</dt>
<dd>Abbreviation for HyperText Markup Language - a language used to make web pages.</dd>
<dt>Dog</dt>
<dd>Any carnivorous animal belonging to the family Canidae.</dd>
<dd>The domesticated sub-species of the family Canidae, Canis lupus familiaris.</dd>
<dt>Moo juice</dt>
<dt>Cat beer</dt>
<dt>Milk</dt>
<dd>A white liquid produced by cows and used for human consumption.</dd>
</dl>
<h3>Author contact details</h3>
<address>
<ul>
<li>0123-456-7890</li>
<li>[email protected]</li>
<li>http://www.noplaceinteresting.com/contactme/</li>
</ul>
</address>
<p>Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>
<bdo dir="rtl">god lmth</bdo>
<p>I have decided to <del datetime="2013-01-26">decrease</del> <ins cite="http://www.icecreamforall.com/changeofpolicy/">increase</ins> the amount of free ice cream that the State will provide for its citizens.</p>
<h3>Section</h3>
<article>
<section id="intro">
<p>[An introduction]</p>
</section>
<section id="main_content">
<p>[Content]</p>
</section>
<section id="related">
<ul>
<li><a href="that.html">That related article</a></li>
<li><a href="this.html">This related artivle</a></li>
</ul>
</section>
</article>
<h3>Header</h3>
<body>
<article>
<header>
<h1>Alternatively&hellip;</h1>
<p>[An introduction]</p>
</header>
<section id="main_content">
<p>[Content]</p>
</section>
<footer>
<p>[End notes]</p>
</footer>
</article>
<footer>
<p>[Copyright bumf]</p>
</footer>
</body>
<h3>Asides</h3>
<section id="main_content">
<h1>Tixall</h1>
<p>[All about Tixall]</p>
<aside>
<h2>Tixall Obelisk</h2>
<p>[A short note about Tixall Obelisk]</p>
</aside>
<p>[Maybe a bit more about Tixall]</p>
</section>
<h3>Navigation</h3>
<nav id="main_nav">
<ul>
<li><a href="/tutorials/">Tutorials</a></li>
<li><a href="/reference/">Reference</a></li>
<li><a href="/articles/">Articles</a></li>
<li><a href="/about/">About us</a></li>
</ul>
</nav>
</br>
<h3>datetime</h3>
<p>Written by Doctor Who on <time datetime="2052-11-21">Thursday 21st November 2052</time>.</p>
</br>
<h3></h3>
</br>
<h3>Mark</h3>
<blockquote>
<p>He wants to play with his <mark>Legos</mark></p>
</blockquote>
</br>
<h3>Conditional Comments</h3>
see code
<!--[if IE]><link href="stupidie.css" rel="stylesheet"><![endif]-->
</br>
<h3>Tables & Captions</h3>
<table>
<caption>Locust mating habits</caption>
<colgroup>
<col>
<col span="2" class="alternative">
</colgroup>
<tr>
<td>This</td>
<td>That</td>
<td>The other</td>
</tr>
<tr>
<td>Ladybird</td>
<td>Locust</td>
<td>Lunch</td>
</tr>
</table>
</br>
<h3>Tab though links using index</h3>
<ul>
<li><a href="here.html" tabindex="1">Here</a></li>
<li><a href="there.html" tabindex="3">There</a></li>
<li><a href="limbo.html" tabindex="2">Limbo</a></li>
</ul>
</br>
<h3>Link titles</h3>
<p>I'm really bad at writing link text. <a href="inept.html" title="Why I'm rubbish at writing link text: An explanation and an apology.">Click here</a> to find out more.</p>
</br>
<h3>Access Keys: Didn't work</h3>
<a href="somepage.html" accesskey="s">Some page</a>
</br>
<h3>Skipping HTML</h3>
<header>
<h4>The Heading</h4>
<a href="#content">Skip to content</a>
</header>
<nav>
<p>Lots of navigation stuff here</p><!--loads of navigation stuff -->
</nav>
<section id="content">
<p>Awesome content here</p>
</section>
</br>
<h3>Form</h3>
<form action="somescript.php" >
<fieldset>
<legend>Name</legend>
<p>First name <input name="firstName"></p>
<p>Last name <input name="lastName"></p>
</fieldset>
<fieldset>
<legend>Address</legend>
<p>Address <textarea name="address"></textarea></p>
<p>Postal code <input name="postcode"></p>
</fieldset>
<select name="country">
<optgroup label="Africa">
<option value="gam">Gambia</option>
<option value="mad">Madagascar</option>
<option value="nam">Namibia</option>
</optgroup>
<optgroup label="Europe">
<option value="fra">France</option>
<option value="rus">Russia</option>
<option value="uk">UK</option>
</optgroup>
<optgroup label="North America">
<option value="can">Canada</option>
<option value="mex">Mexico</option>
<option value="usa">USA</option>
</optgroup>
</select>
</br>
</br>
<input type="number" name="quantity" step="2" min="20" max="30">
</br>
<input name="country" list="country_name">
<datalist id="country_name">
<option value="Afghanistan">
<option value="Albania">
<option value="Algeria">
<option value="Andorra">
<option value="Armenia">
<option value="Australia">
<option value="Austria">
<option value="Azerbaijan">
<!-- etc. -->
</datalist>
</form>
</br>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment