Basic HTML Guide

Test your code:




Have to start and stop formatting tags like this in same paragraph. If need in additional paragraph, add again to that one. 



  • <a href="…">…</a>
  • Link text
  • URL

Relative vs. Absolute URLs 

  • Can delete domain portion prior to first slash for internal links
  • External links need to have entire link defined
  • If in question, can simply use entire and will work

Best practice: use a meaningful phrase as the link text, don't just use URL 

Best practice: each link on page should be unique on page (no multiple "read more," "learn more," "click here") 


ul = unordered list (bulleted) 

ol = ordered list (numbered) 

Roman Numeral list items requires hardcoding with advanced techniques 

<li>Item #1</li> 
<li>Item #2</li> 
<li>Item #3</li> 


<li>Item #1</li>
<li>Item #2</li> 
<li>Subcategory 1</li> 
<li>Subcategory 2</li> 
<li>Sub 2 item 1</li> 
<li>Sub2 item 2</li> 
<li>Item #3</li> 

WYSIWYG can only create two levels deep, but with coding you can add additional levels 

Best practice: 3 levels deep is max complexity 

Indenting is not required in the code itself 


<h2>1ST Heading 2</h2> 
<h3>1st Heading 3</h3> 
<h4>1st Heading 4</h4> 
<h4>2nd Heading 4</h4> 
<h3>2nd Heading 3</h3> 
<h3>3rd Heading 3</h3> 
<h2>2nd Heading 2</h2> 

Adding IDs to subheadings 

  • <h2 id="extra-anchor-1">…</h2>
  • <h2 id="extra-anchor-2">…</h2>
  • <a href="#extra-anchor-1">…</a>
  • https://.../.../#extra-anchor-1
  • In order for jump links / URLs to anchor tags to work, all anchors on the page must be unique

Best practice: use small number of distinct keywords with hyphens 

Embed Image

Should always have <figure>…</figure> tags 

Get rid of width and height 


Best practice, always use ALT text to describe image. 


Stick to table generator

<th scope="col">Time</th> 
<th scope="col">Event</th>
<td>7 a.m.</td> 

Responsive tables resize automatically based on the size of the user's screen size