Basic HTML Files

Have you ever needed some basic HTML? Maybe you were setting up a stylesheet and just wanted to copy and paste some HTML with which to work. I have too! That's why I set up these basic HTML files. I've tried to include the most common tags in each. Keep in mind, each preview is loaded using your browser's default styles.

Downloads

Common HTML Form Tags - forms.html
General HTML Tags - general.html
HTML Tables - tables.html

Code

Common HTML Form Tags

Preview:

Code:

<form name="formName" id="formName" action="process.php" method="post">
	<fieldset>
		<legend>Form Legend</legend> <input type="hidden" name="hidden" value="something hidden">
		<p>
			<label for="input1">Label 1</label> <input id="input1" name="input1" type="text">
		</p>
		<p>
			<label>Label 2</label> <input name="radios" type="radio" value="radio 1"> <input name="radios" type="radio" value="radio 2">
		</p>
		<p>
			<label for="input4">Label 3</label> <input name="checks" type="checkbox" value="checkbox 1"> <input name="checks" type="checkbox" value="checkbox 2">
		</p>
		<p>
			<label for="textarea">Label 4</label> 
			<textarea id="textarea" name="textarea">
</textarea>
		</p>
		<p>
			<label for="select">Label 5</label> <select id="select" name="select">
				<option>
					Please choose...
				</option>
				<option value="option 1">
					Option 1
				</option>
				<option value="option 2">
					Option 2
				</option>
			</select>
		</p>
		<p>
			<label for="readonly">Label 6</label> <input type="text" name="readonly" id="readonly" readonly>
		</p>
		<p>
			<label for="file">Label 7</label> <input type="file" name="file" id="file">
		</p>
		<p>
			<input id="submit" name="submit" type="submit" value="Submit">
		</p>
	</fieldset>
</form>

General HTML Tags

Preview:

Code:

<!DOCTYPE html>
<html>
 <head>
  <title>Title Bar</title>
 </head>
 <body>
  <div>
   <h1>Heading 1</h1>
   <p>Paragraph of text with some <strong>bold text</strong> and some <em>italicized text</em>. Also <a href="url">a link</a>.</p>
   <h2>Heading 2</h2>
   <p>Paragraph of text with some <strike>strikethrough text</strike> and some <small>small text</small>. Also <u>underlined text</u>.</p>
   <p><img align="right" src="../../assets/placeholder.png" alt="image"></p>
   <h3>Heading 3</h3>
   <blockquote>Blockquote text</blockquote>
   <hr>
   <p>Paragraph of text and a <span>span</span>.</p>
   <pre>a section inside a pre tag</pre>
   <h4>Heading 4</h4>
   <tt>Why not add some typewriter text?</tt>
   <h5>Heading 5</h5>
   <h6>Heading 6</h6>
  </div>
 </body>
</html>

HTML Tables

Preview:

Code:

<table cellspacing="0" cellpadding="5" border="1">
	<thead>
		<tr>
			<th>column 1 heading</th>
			<th>column 2 heading</th>
			<th>column 3 heading</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>column 1 footer</th>
			<th>column 2 footer</th>
			<th>column 3 footer</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>row 1, column 1</td>
			<td>row 1, column 2</td>
			<td>row 1, column 3</td>
		</tr>
		<tr rowspan="2">
			<td rowspan="2">row 2 and 3, column 1</td>
			<td>row 2, column 2</td>
			<td>row 2, column 3</td>
		</tr>
		<tr>
			<td>row 3, column 2</td>
			<td>row 3, column 3</td>
		</tr>
		<tr>
			<td colspan="2">row 4, column 1 and 2</td>
			<td>row 4, column 3</td>
		</tr>
	</tbody>
</table>