Basic HTML Guide

Test your code:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

<p>…</p> 

 <strong> 

<em> 

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

Links

Anatomy 

  • <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 gettysburg.edu 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") 

Lists

ul = unordered list (bulleted) 

ol = ordered list (numbered) 

Roman Numeral list items requires hardcoding with advanced techniques 

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

Subcategories 

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

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 

Headings

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

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 

Style="width:100%" 

Best practice, always use ALT text to describe image. 

Tables

Stick to table generator 

https://ianrmedia.unl.edu/responsive-table-generator-tool

<table> 
<thead> 
<tr> 
<th scope="col">Time</th> 
<th scope="col">Event</th>
</tr> 
</thead> 
<tbody> 
<tr> 
<td>7 a.m.</td> 
<td>Breakfast</td> 
</tr> 
</tbody> 
</table> 

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