HTML Reference Page

Name Start Tag End Tag Example
HTML <html> </html> <html>
</html>
Head <head> </head> <head>
</head>
Title <title> </title> <title>insert title</title>
Body <body> </body> <body>
</body>
Headings <h1><h2>... </h1></h2>... <h1>heading</h1>
Paragraphs <p> </p> <p>paragraph</p>
Breaks <br> N/A This is a <br> break.
Lines <hr> N/A <p> This is the first paragraph.</p>
<hr>
<p>This is the second paragraph.</p>
Comments <!-- --> N/A <!-- comment -->
Links <a> </a> <a href="https://url.com">Link.</a>
Images <img> N/A <img src="https://image.jpg">
Lists <ul>, <ol>, <li> </ul>, </ol>, </li> <ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Tables <table> (<tr>,<th>, <td>) </table> (</tr>,</th>, </td>) <table>
<tr>
<th>Color</th>
<th>Meaning</th>
</tr>
<tr>
<td>Green</td>
<td>Go</td>
</tr>
<tr>
<td>Red</td>
<td>Stop</td>
</tr>
</table>
Blocks <div> </div> <div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is purple.</p>
</div>

Necessities for a Valid HTML Page

<!DOCTYPE> and </!DOCTYPE>
-define the document type
<head> and </head>
-define information about the document
<html> and </html>
-define the root of an HTML document
<title> and </title>
-display a title for the page in search-engine results
<body> and </body>
-define the body of the document

HTML

The tag for HTML is <html>. Its purpose is to define the document type as an HTML. An <html> tag is placed just before the head tag and its corresponding </html> tag is placed just after the body.

Example:

  <html>
  </html>
W3schools: HTML

Head

The tag for the head is <head>. This tag defines information about the document and is a container for metadata. A <head> tag is located above the title tag where as a </head> tag is under the title tag.

Example:

  <head>
  </head>
W3schools: Head

Title

The title tag is represented as <title>. It displays a title for the page in search-engine results and defines a title in the browser toolbar. A <title> tag is located before the content in the title and the </title> tag is located just after.

Example:

  <title>insert title here</title>
W3schools: Title

Body

The tag for the body is <body>. It contains all of the information for the HTML document, including texts, images, lists, headings, etc. The <body> tag is placed after the end tag of the header and the </body> tag is located right after, following the body's content.

Example:

  <body>
  </body>
W3schools: Body

Heading

Heading tags are represented by <h1>, <h2>, etc. They are used for a range of reasons, such as to show document structure and allow search engines to index the structure and content of the webpage. The <h1>, <h2>, etc. tag is placed in the body wherever a heading may be desired and their corresponding </h1>, </h2>, etc. tag is placed directly after the heading. <h1> is used for the most important heading, <h2> for the next most important, and so on in this pattern.

Example:

  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <h3>Header 3</h3>
  <h4>Header 4</h4>
  <h5>Header 5</h5>
  <h6>Header 6</h6>

Display:

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
W3schools: Heading

Paragraph

The tag for a paragraph is <p>. It defines a paragraph of text within the document. The <p> tag is placed anywhere in the body where the user may want to place a paragraph and the </p> tag follows the paragraph's content.

Example:

  <p>This is an example paragraph using proper tags.</p>

Display:

This is an example paragraph using proper tags.

W3schools: Paragraph

Breaks

Break tags are depicted as <br>. They insert a single line break and are especially useful for poems or addresses; they're located within the paragraph to split up text and do not contain end tags.

Example:

  <p>
  The br element<br>is used<br>like this.
  </p>

Display:

The br element
is used
like this.

W3schools: Breaks

Lines

Line tags are shown as <hr>. They define a thematic break and represent a horizontal rule. They may be found anywhere within the body where a seperation in text may be needed and do not contain end tags as well.

Example:

  <p> This is the first paragraph.</p>
  <hr>
  <p>This is the second paragraph.</p>

Display:

This is the first paragraph.

This is the second paragraph.

W3schools: Lines

Comments

To place a comment, the user would use the tag <!-- -->. They allow their users to place private comments, notifications, and reminders in their HTML that are not displayed on the browser. These tags do not have an end tag and may be located anywhere throughout the body.

Example:

  <!-- This is a comment -->
W3schools: Comments

Links

Links are represented using the tag <a>. With this tag, the user may insert hyperlinks that redirect to other webpages. The most important part of this tag is the 'href' attribute, which determines the link's destination. These tags may be found anywhere in the body block.

Example:

  <a href="https://alexacross.github.io">This is a link.</a>

Display:

This is a link.
W3schools: Links

Images

The tags for images are <img>. This tag is used to improve the design and appearence of the webpage by inserting an image. Images may be placed anywhere within the body where desired. This tag contains a src attribute which specifies the web address of the image, so ultimately, the tag looks like <img src="url">.

Example:

  <img src="https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg">

Display:

Photo
W3schools: Images

Lists

List tags are shown as <ul>, <ol>, and <li>. <ul> defines an unordered list that uses bullet points, <ol> defines an ordered list using numbers, and <li> tag defines the list item. After every list item follows the corresponding <li> tag and after the last list item follows the </ul> or </ol> tag, depending on which start tag was used. A list may be found anywhere in the body.

Example:

  <ol>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Lemons</li>
  </ol>

  <ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Lemons</li>
  </ul>

Display:

  1. Apples
  2. Oranges
  3. Lemons
W3schools: Lists

Tables

The tags for tables are represented as <table>. This tag defines an HTML table in the document; the table must also have a <tr>,<th>, and/or a <td> tag along with the <table> element. The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell. They may be located throughout the body block where needed, and contain a corresponding </table> end tag.

Example:

  <table>
  <tr>
    <th>Color</th>
    <th>Meaning</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Go</td>
  </tr>
  <tr>
    <td>Red</td>
    <td>Stop</td>
  </tr>
  </table>

Display:

Color Meaning
Green Go
Red Stop
W3schools: Tables

Blocks

Block tags are represented as <div>. This tag defines a division or a section in an HTML document and is often used to group block-elements to format them with CSS/style. They could be placed anywhere within the body where the user may want to group block-elements. The end </div> is placed at the end of the division or section made.

Example:

  <div style="color:#0000FF">
  <h3>This is a heading</h3>
  <p>This is purple.</p>
  </div>

Display:

This is located before the block tag.

This is a heading

This is purple.

This is located after the block tag.

W3schools: Blocks
Home