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:

webpage with different HTML elements

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

Comments

Leave a comment

What color are green eyes? (spam prevention)
Submit
Code under MIT License unless otherwise indicated.
© 2020, Downranked, LLC.