1. HTML Overview

1.1 What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create webpages. HTML is not a programming language, but rather a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make words bold, and so on. HTML elements are represented by tags.

HTML Basics

HTML documents are made up of elements. These elements are represented by tags. Tags are keywords surrounded by angle brackets. Most tags have an opening tag and a closing tag. The closing tag is written the same as the opening tag, except that it includes a forward slash ( / ) before the tag name. For example, <p> is an opening paragraph tag, and </p> is a closing paragraph tag. The text or other HTML elements that are to be affected by the tag are placed between the opening and closing tags.

HTML Document Structure

An HTML document has a nested structure. The outermost element is the <html> element, which contains two main sections: the <head> and the <body>. The <head> section contains meta-information about the document, such as its title and links to stylesheets. The <body> section contains the content of the document, such as text, images, and links.

HTML Attributes

HTML elements can have attributes that provide additional information about the element. Attributes are placed within the opening tag of an element. An attribute consists of a name and a value, separated by an equals sign. For example, in the tag <a href="https://www.example.com">, "href" is the attribute name, and "https://www.example.com" is the attribute value. Attributes can be used to specify properties such as links, styles, and identifiers for elements.

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.

An example of a table. (this text uses a caption tag just inside the table tag)
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.

HTML tags with cool features

code - the <code> set of tags render text in monospace italics to appear as it is written in an IDE
abbr - used for abbreviations. Can give the element a "title" attribute that will appear when a cursor is left hovering over the element. (appears like helper text).

HTML Forms

Forms are used to collect user input. Forms are created using the <form> tag. Within the form tag, various input elements can be placed to collect different types of data. Common input elements include text fields (<input type="text">), radio buttons (<input type="radio">), checkboxes (<input type="checkbox">), and submit buttons (<input type="submit">). Each input element should have a "name" attribute to identify the data when the form is submitted.

Within a form element, assign the "action" attribute to specify where the form data should be sent when submitted, and the "method" attribute to specify how the data should be sent (e.g., GET or POST). A "value" and "placeholder" attribute can also be added to provide default values and hints for the user. When the form is submitted, the data is submitted in a manner to the provided URL connecting the "name=value".
Example: If the input name is "username" and "Mokoo001" is provided to the text field, the submit button will provide "username=Mokoo001" to the server.

Examples of a form and input elements: