HTML Best Practices

When writing HTML, properly use whitespace in the code to ensure it is easy to read. Indent text as well to ensure relationships between elements are clear.

Add comments to provide clarity to your HTML documents. Comments begin with , and result in the contents performing no action.

HTML Elements

Text Values - Tags

Headers values include h1-h6 element. They should look like <h1> and </h1> with text in the middle
paragraph normal text is placed between <p> and </p> symbols
Lists can be ordered and unordered. Unordered lists appear with bullets and ordered lists appear with numbers. To create an unordered list, use the tag <ul> and nest within it tags for <li> for each list item in the list. For ordered lists, use the tag <ol> as the parent tag.
Content can be linked to other pages by HTML elements(will work with text, images, etc.). This is done by wrapping elements in a <a> tag. The tag must be assigned an attribute of href ="..." and point to the pathway for the link. Here is an example of a link.

A link can have the attribute target="_blank" which will result in the link opening the link in a new window.
Local files can be linked to. To link to a file in the same folder, us "./" and the file name. Example: href="./contact.html
Locations within the same page with id attributes can be linked to. This is done by setting the href="#id", replacing id with the id of the target.

Styling Text Elements

The <span> element can be used to wrap text within another element to apply styling to just the wrapped text. This was done here on the span tag shown.
The <strong> tag can be used to surround text and make it appear bold.
The <em> tag can be used to surround text and make it appear in italics
The <br> tag places a line break into the body of the text.

Media Elements

Images can be placed in HTML using the <img> tag and specifying a "src" attribute to a file. <img> is an example of a self-closing tag, and doesnt need a </img> to close it. An "alt" attribute can also be specified to provide text in the space in the event the image doesnt load properly.
Videos can be placed in HTML using the <video> tag. This requires the following attributes: src, height, width, and controls. controls functions more like a keyword and does not need to be set to a value.
Example: <video src='file.jpeg' height='240' width='320' control>Video Not Supported</video>
Audio can be placed in HTML, but requires an inner and outer tag to accomplish. The outer tag starts with <audio> and the inner tag is <source>. The audio tag can have keywords added to the tag including "autoplay" (plays when loaded), "controls" (controls for the audio are visible on the page), and loop (repeats the audio when completed). The source tag requires a "src" attribute with a link to the audio file to play.
The <embed> tag can be used to input video, audio, and gifs from an external source. It is a self closing tag, and requires a "src" attribute. It is noted however that embed is a deprecated tag.

HTML tables

A table can be created on an html page by placing its structure inside of a pair of <table> tags. Each row is contained within a pair of <tr> tags. Each data value should be contained with <td> tags. Header values should be enclosed with <th> tags. An example of what this looks like is provided below.

Okoorian family	First Name	Last Name
Person 1	Matthew	Okoorian

Tables - Organization

The header row can be semantically labeled within a pair of tags using <thead>

Below the header row, table data can be organized with a tag called <tbody>

Finally, the footer row (where there could be totals or other information) can be enclosed in a tags set to <tfoot>.

Attributes

tables can have a border attribute which can be set as follows: border="Xpx LineType color". This attribute is deprecated however.
<td> tags may be assigned a colspan attribute. This results in a single data cell spanning right multiple columns.
<td> tags may be assigned a rowspan attribute. This results in a single data cell spanning down multiple rows.
<th> tags should be assigned a scope attribute identifying whether the header applies to the row or the column. Example: scope="row"

HTML Organizational Structure

Standard Organizing Tags

First, HTML files should be started by including the following tag as the first line: <!DOCTYPE HTML>
Second, all the the page's html should be placed within an opening and closing <html> tag.
Third, the <head> element of a page is used above the body and contains information about the page.
Fourth, visible content of a webpage is placed with the <body> portion of a webpage.

Semantic HTML

Semantic HTML makes reading HTML easier by ensuring the intention behind material is clearer. Here are some examples of semantic elements in the order they often appear.

<header> - often used for a top bar on the page.
<nav> - often used to frame a section where links to other content may be placed.
<main> - used to contain the primary body of a webpage.
<section> - used to contain a portion of the main, seperates portions of the page into discrete areas or topics.
<article> - used to tag an item that stands on its own. Examples include articles, blogs, comments, magazines, etc.
<aside> - used to tag information that enhances main information, but isnt critical. Examples include Bibliographies, Endnotes, Comments, Quotes, Additional Information.
<figure> - used for media like pictures or video.
<figcaption> - used to place text below a figure. Encompasses a text element. Usually enclosed within a figure tag alongside an img.
<footer> - used to contain a block at the bottom of the page with additional navigation or contact details.

Element Attributes

HTML elements can be given additional attributes to effect how they are used. Attributes are set by placing within the opening tag a Property='Value'.
Example: <h1 id='test123'>

Common Attributes

id - used to give specific element a unique identifier for reference elsewhere. Value should be unique.
class - used to give an element a shared identifier so it may share configuration between itself and elements of a same class.