Constructing and Analyzing HTML

What is HTML?

HTML stands for Hyper Text Markup Language. HTML is defined by elements or tags. Elements have an opening and closing tag while a tag or void or empty tag is just one tag without any content or a closing tag. These elements tell the browser how to display content on a webpage.

Defining and Understanding Basic Table Elements

<table> element defines an HTML table.  Tables consist of rows and columns.  Tables are used to organize data into a specific manner.
The table element has child elements called table rows <tr> and table data (columns) called <td>.  Additionally it also has table headers <th> which are used to define the headers of a table.

Example:
<table>
       <tr>
           <th>Header 1</th>
       </tr>
       <tr>
           <td>Cell 1</td>
       <tr>
</table>

<table></table>  - Defines an HTML table.
<th></th>        - Defines a table header.
<tr></tr>        - Defines a table row in an HTML table.
<td></td>        - Defines a table data (column).

Table attributes:
colspan="2" - Defines table cells that span more than one column.

Defining and Understanding H1 – H6

<h1> to </h6> elements are used to define headings in HTML.  The headings range from an <h1></h1> being the larges (most important) of the heading to an <h6></h6> being the smallest (least important).  

<h1></h1> - probably should be main heading in any one page and should only be used once.
<h2></h2> - sub heading.
<h3></h3> - sub heading.
<h4></h4> - sub heading.
<h5></h5> - sub heading.
<h6></h6> - sub heading (smallest or least important).

Paragraph HTML element

<p></p> - The paragraph element defines a paragraph.  A paragraph element always starts on a new line and has an empty line just after.  This element is known as a block level element.  

Block level element - an element that always starts on a new line and takes up the entire width of the page whether it needs it or not.

<p>
This is an example of a paragraph element.  Always keep in mind that a paragraph is a block level element, which is greedy.
</p>

Break Tag

<br> - is a tag (void tag) that is used to a line break.  As an empty tag or void tag this tag doesn't have any content.

<p>
This is an example of a paragraph element.  <br> Always keep in mind that a paragraph is a block level element, which is greedy.
</p>
By using the <br> tag the "Always" sentence will now start on the next line but still inside the paragraph element.

Horizontal Rule Tag

<hr> - The horizontal rule tag (void or empty tag) is used to draw a horizontal line across the screen.  While this tag can be styled to define the color, thickness, and even style of the line by default it is just a black think line.

Division Element

<div></div> - The div element is a container which defines a division or section of HTML.  Think of it as a container for HTML and then can be styled using CSS.  In order to style this element, one would need to define a class or id attribute in the opening tag and style the element using those attributes or just just the element name in the selector to style it.

Span Element

<span></span> - The span element is used to markup parts of text.  You can style a word or an entire sentence in a paragraph.  The element can be styled using CSS either by its element name, adding an id attribute, or adding a class attribute.
span {
   background-color: yellow;
}
<---snip--->
<p>
   This is an example of the <span>span</span> element.
</p>

Unordered List Element

<ul></ul>  The Unordered list element creates a list that has no particular order.  The items in the list will be defined by default by bullet points.  Each Unordered list may have as many list items as needed.  List items define the items in the unordered list.
<ul></ul> - Defines that an unordered list.
<li></li> - Defines a list item.

<ul>
    <li>Bananas</li>
    <li>Oranges</li>
    <li>Grapes</li>
</u>

Ordered List Element

<ol></ol> The ordered list will create a list of items that have an order.  The items are defined either by a numerical value, alphabetical value, or Roman numeral value.  Ordered lists also have list items that are defined by <li></li>

<ol></ol> - Defines an ordered list.
<li></li> - Defines the list item.

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li> 
</ol>