HTML Basics

What is HTML?

HTML (Hyper Text Markup Language) is a semantic markup language for creating web documents / content. HTML markup is comprised of plain text and HTML Tags.

HTML Tags

HTML tags are keywords that are wrapped with angle brackets: <tagname>content goes in-between </tagname>.

Most HTML tags require and opening tag and a closing tag.

There are a couple self closing tags which are defined as: <tagname />. Notice the /, this closes the tag.

Deprecated Tags - Do Not Use

The following tags no longer meet current HTML standards and should no longer be used.

  • <font>, <center>, <nobr>
  • <b>, <i> - technically not deprecated but should only be used on rare occasions, learn more.

Want to learn a little more HTML? Here are some great resources:

Headings

There are 6 heading styles defined by the <h1> to <h6> tags. <h1> being the most important and <h6> being the least important.

EXAMPLE

h1. Primary heading

 Page Titles only

h2. Secondary heading

  

h3. Trinary heading

  

h4. Quaternary heading

  
h5. Quinary heading
  
h6. Senary heading
  
SYNTAX

All headings require and opening tag <h1> and a corresponding close tag </h1>.

<h1>h1. Primary heading</h1>
<h2>h2. Secondary heading</h2>
<h3>h3. Trinary heading</h3>
<h4>h4. Quaternary heading</h4>
<h5>h5. Quinary heading</h5>
<h6>h6. Senary heading</h6>

 

Paragraphs

Paragraphs are defined with the <p> tag.

EXAMPLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate fringilla tristique. Quisque quis sem sed ante vulputate tempus. Duis commodo, nisi fringilla cursus efficitur, erat turpis venenatis purus, eu sagittis mi leo fermentum ipsum. Donec pharetra quis leo luctus venenatis. Cras dictum magna quis nisl ultricies, eu semper enim imperdiet. Nam in sapien tristique, lacinia orci finibus, interdum ex. Donec vehicula massa vel lectus consequat, et efficitur lectus dignissim. Vivamus condimentum sapien malesuada arcu ullamcorper, quis semper massa dapibus. Nulla at nisl sed diam mattis laoreet. Aliquam elementum gravida massa, a finibus mauris hendrerit sed. Donec nec magna scelerisque, scelerisque odio sit amet, fermentum neque.

SYNTAX

Paragraphs require and opening tag <p> and a corresponding close tag </p>.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.....</p>

 

Line Breaks

Line Breaks are defined with the <br /> tag.

EXAMPLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras vulputate fringilla tristique.
Quisque quis sem sed ante vulputate tempus. Duis commodo, nisi fringilla cursus efficitur, erat turpis venenatis purus, eu sagittis mi leo fermentum ipsum. Donec pharetra quis leo luctus venenatis.
Cras dictum magna quis nisl ultricies, eu semper enim imperdiet. Nam in sapien tristique, lacinia orci finibus, interdum ex. Donec vehicula massa vel lectus consequat, et efficitur lectus dignissim. Vivamus condimentum sapien malesuada arcu ullamcorper, quis semper massa dapibus. Nulla at nisl sed diam mattis laoreet.
Aliquam elementum gravida massa, a finibus mauris hendrerit sed. Donec nec magna scelerisque, scelerisque odio sit amet, fermentum neque.

SYNTAX

Line Breaks are a self closing tag <br />, meaning you only need the one tag.

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <br />Cras vulputate fringilla tristique.
    <br />Quisque quis sem sed ante vulputate tempus. Duis commodo, nisi fringilla cursus efficitur, erat turpis venenatis purus, eu sagittis mi leo fermentum ipsum. Donec pharetra quis leo luctus venenatis.
    <br />Cras dictum magna quis nisl ultricies, eu semper enim imperdiet. Nam in sapien tristique, lacinia orci finibus, interdum ex. Donec vehicula massa vel lectus consequat, et efficitur lectus dignissim. Vivamus condimentum sapien malesuada arcu ullamcorper, quis semper massa dapibus. Nulla at nisl sed diam mattis laoreet.
    <br />Aliquam elementum gravida massa, a finibus mauris hendrerit sed. Donec nec magna scelerisque, scelerisque odio sit amet, fermentum neque.
</p>

 

Bold Emphasis

To provide bold emphasis to a span of text, wrap the span with a <strong> tag.

EXAMPLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

SYNTAX
Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit.

 

Italic Emphasis

To provide italic emphasis to a span of text, wrap the span with a <em> tag.

EXAMPLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

SYNTAX
<em>Lorem ipsum dolor sit amet<em>, consectetur adipiscing elit.

 

Hyperlinks

Hyperlinks are defined with the <a /> tag.

The link is defined with the href attribute.

EXAMPLE

Go to njcpa.org

SYNTAX

Hyperlinks require an opening <a> tag containing the href attribute and a closing </a> tag. The text to display for the link is contine inbetween the opening and clsoing tag.

<a href="https://njcpa.org">Go to njcpa.org</a>

 

Open Hyperlink In New Window

You can add the target="_blank" to your link to open it in a new tab/window.

EXAMPLE

New Window: Go to njcpa.org

SYNTAX

Add the target attribute to the open <a> tag.

New Window: <a href="https://njcpa.org" target="_blank">Go to njcpa.org</a>

 

Lists

Lists are defined with the <ol> tag for orders lists and the <ul> tag for unordered lists.

EXAMPLE

Ordered List

  1. Ordered List Item
  2. Ordered List Item
  3. Ordered List Item
  4. Ordered List Item

Unordered List

  • Unordered List Item
  • Unordered List Item
  • Unordered List Item
  • Unordered List Item
SYNTAX

Order Lists require and opening tag <ol> and a corresponding close tag </ol> with the list items in between the tags.

Unorder Lists require and opening tag <ul> and a corresponding close tag </ul> with the list items in between the tags.

List items require and opening <li> tag and a closing </li> tag, list item tags are the same for both ordered and unordered lists.

Ordered List

<ol>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ol>

Unordered List

<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

 

Horizontal Rule

Horizontal Rule are defined with the <hr /> tag.

EXAMPLE
SYNTAX

Line Breaks are a self closing tag <hr />, meaning you only need the one tag.

<hr />

 

Tables

Tables are defined with the <table> tag.

Rows are defined with the <tr> tag.

Table headers are defined with the <th> tag.

Table cells are defined with the <td> tag.

Unstyled Table  (as basic it gets)

Note: unstyled tables width is based on the content entered into the cells.

EXAMPLE
Heading 1 Heading 2 Heading 3
Cell Cell Cell
Cell Cell Cell
SYNTAX
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>

 

Styled Table  Recommended!

To style the table, add class="table" to the table tag.

The styled table adds:

  • a top border to all rows.
  • a padding of 8 pixels to all cells.
  • sets table width to 100%.
  • adds a bottom margin of 18 pixels.
  • sets the vertical alignment of the cells to top.
EXAMPLE
Heading 1 Heading 2 Heading 3
Cell Cell Cell
Cell Cell Cell
SYNTAX
<table class="table">
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>