Common HTML Elements 1
Here's a page with very common HTML elements:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Common HTML Elements</h1>
<a href="http://www.simpletutorials.com">Simple Tutorials</a>
<br/>
<br/>
<img src="orange_circle.png"/>
<span>Inline</span>
<span>text</span>
<div>Block</div>
<div>text</div>
<table>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
<!-- Here is a comment -->
<ul>
<li>Unordered Item 1</li>
<li>Unordered Item 2</li>
</ul>
<ol>
<li>Ordered Item 1</li>
<li>Ordered Item 2</li>
</ol>
</body>
</html>
What does it look like in Firefox?
The HTML page looks like this in the Firefox web browser:
Download the files
You can download the HTML file and image.
What does each element do?
<!DOCTYPE html> This tells the browser how to render the page (using HTML5 standards)
<h1> A header element (there are different sizes, e.g. <h2>, <h3>, etc)
<a> An anchor tag (link) with an href attribute that tells the browser where to send the user
<br/> A line break
<img> An image tag with a src attribute that tells the browser where the image file resides
<span> A container (e.g. for text) with no line breaks before or after the element
<div> A container (e.g. for text) with line breaks before and after the element
<table> Displays a data grid
<tbody> This is a container for the table rows
<tr> Table row
<td> Table cell
<ul> Unordered (no numbers, just dots) list
<li> List item
<ol> Ordered (numbered) list
Next: Common HTML Elements 2
Leave a comment