HTML Fundamentals
Length: 29 minutes
Syntax
HTML stands for Hyper Text Markup Language. Markup languages surround content in order to tell the browser how to format it. HTML does this through a series of elements. HTML Elements are made up of a starting tag and an ending tag like so:
<p>You're Learning HTML!</p>
Above we can see the p element which indicates a paragraph to the browser. The start tag <p> indicates the beginning of the paragraph and the ending tag </p> defines the end of the paragraph. As you can see tags names are surrounded by <> angle brackets. All the content You're Learning HTML! in the center is the body of the paragraph. This tells the browser to add space before and after the content "You're Learning HTML!".
There are a few exceptions where elements may just have an opening tag only. We will see a few of these in examples below such as the image element <img> but more on that later.
Inside the starting tag <p> we can place attributes, such as class="intro" (in full,<p class="intro">), that help us refer to the paragraph element from JavaScript and CSS (more on that in a bit). These options are only found in the starting tag and never in the ending tag. We separate the element name p from the attribute name class using a keyboard space. We can set a value for our attribute attribute="value" using an = equals symbol and " quotes to surround our value.
Document Structure
All HTML pages have a standardized document structure:
<html>
<head>
<!-- Meta data for the browser and search engines -->
</head>
<body>
<!-- Visible content area -->
</body>
</html>
The <html> tag wraps all of the content and tells the browser that everything in between the starting and ending<html>...</html> tags is to be interpreted is HTML code. Nested inside <html>...</html>, we have the <head>...</head> and the <body>...</body>. The head contains data for the browser and search engines (such as the title of the page, links to other stylesheets and scripts, meta keywords, and descriptions, among others). This content is not something a visitor to our website will see directly.
In contrast, the body contains all of the visible content users see when they visit the webpage. This includes text such as headings, paragraphs, and images, links, videos, audio players, maps, forms, and more.
Doctype
A special element proceeding the document structure is the <!DOCTYPE> tag.
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
The Doctype tells the browser the version of HTML that it should interpret the document as. In the case of HTML5 you simply state <!DOCTYPE html>.
Typography
We are given a range of tags to define the look and importance of our typography. Here are a few high use typography elements,
Headings
<h1>Largest Heading</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>Smallest Heading</h6>
Headings allow us to create larger and smaller text, establishing a hierarchy for our content. <h1> is the largest of the headings and also carries the most importance for search engines. <h2> to <h6> the headings get progressively smaller and hold less importance.
Paragraphs
<p>Lorem ipsum dolores</p>
Paragraphs separate blocks of text adding spacing before and after each block.
Line Break
<br>
Line breaks add a soft line return for situations where you wish text to appear on the next line down.
Horizontal Rule
<hr>
Horizontal rule creates a line across the screen for visually dividing two parts of the page.
Pre-formatted
<pre>
This text
is
pre-formatted!
</pre>
Pre-formatted allows us to create a white-space sensitive block of text. This can be useful for surrounding code elements or for writing out poems or expressive text where white-space matters.
Emphasized (Italic)
<em>This text is italic.</em>
Emphasized text <em> stands out as italic text for situations when we want to call out specific words or phrases.
Strong (Bold)
<strong>This text is bold.</strong>
Similar to emphasized we can make text stronger using <strong> which makes the text bold.
Lists
Lists allow us to group text into a structure that ties their meaning together into a whole.
Ordered List
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Ordered lists by default appear as numeric lists with numbers identifying each list item.
Unordered List
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
Unordered lists by default appear as bulleted lists with bullets identifying each list item.
Tables
Let's say you are building a web site to feature dessert recipes and you wish to insert a table of related data about each dessert such as name, level of difficulty, calories, etc. Using an HTML table will come in handy.
<table>...</table>
We start off with the <table> element. Then we fill it with rows using <tr> elements each sets of these makes one row.
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
The code above would create a table with four rows. Next to create some columns within each row, we can insert <th> to create header (table-header) cells, and <td> to create normal (table-data) cells.
<table>
<tr>
<th> Recipe </th>
<th> Calories Per Serving </th>
<th> Difficulty </th>
</tr>
<tr>
<td> Chocolate Lava Cake </td>
<td> 475 </td>
<td> Hard </td>
</tr>
<tr>
<td> Crêpe Suzette </td>
<td> 380 </td>
<td> Medium </td>
</tr>
<tr>
<td> Banana Split </td>
<td> 724 </td>
<td> Easy </td>
</tr>
</table>
Below we can see the table that is created from this code. We also added a black border so you can see the edges of the table easily.
| Recipe | Calories Per Serving | Difficulty |
|---|---|---|
| Chocolate Lava Cake | 475 | Hard |
| Crêpe Suzette | 380 | Medium |
| Banana Split | 724 | Easy |
Images
<img src="myimage.jpg" alt="Alternate text" title="Display title on hover.">
Image elements <img> allow us to link to an image and display it in the browser. The src attribute is where we provide the path to our image file. The alt attribute is where we provide alternate text for the visually impaired. (The alt attribute is also good for search engines.) The title attribute allows us to type a phrase that will appear as the user hovers of the image for a period of time.
Links
Links allow us to connect our pages and sites to each other. Arguably they give the world wide web its power by simply allowing one document to lead to the next.
<a href="http://example.com">This is a text link</a>
An anchor link <a> accepts an href (hypertext reference) attribute points to the location of the page or content we are linking to.
<a href="http://example.com">
<img src="myimage.jpg" alt="Alternate text">
</a>
Anchor links can also wrap images as well as text. In fact anything we wrap a <a> around becomes a clickable linked item.
<a href="mailto:webmaster@example.com">This an email link</a>
<a href="tel:555-555-5555">This an phone number link</a>
Special prefixes in the href can trigger specific actions. mailto: allows us to open an email editor; tel: tells cellular devices to dial a number.
<p id="tips">Useful Tips Section</p>
<a href="#tips">Jump to Useful Tips Section</a>
We can also create named anchor links that will scroll to content elsewhere in the same page. This is done by giving an id attribute to one element, and then setting the href of a link to #id where the ids match.
Relative and Absolute File Paths
Relative
about.html
Relative paths describe the location of resources within the same file system.
Absolute
http://example.com/about.html
Absolute paths describe the location of resources on the entire internet at large.
It is preferred that you use the relative path when linking to content within your own website. Then use absolute paths when linking to content on other remote websites.
Forms
Forms are essential for gathering user information from site visitors. Text can be inserted, selections made and a record of their responses can be sent remotely to a server whose backend can store the information. At this time we will not be going into detail about the back-end portion of a form submission, but instead focusing on the front-end portion. Let's explore some of the many form elements we have at our disposal for gathering user input.
We will start with the crucial parent element <form>. The form element wraps all the input elements that will collect our user information inside of it. The form element has two important attributes: action, and method. The action attribute will specify where the user information is sent to. This is typically the URL of a remote server. The second attribute is the method which will dictate the manner in which we submit our information. The most common HTTP methods are GET, POST, PATCH, PUT, and DELETE but for now we will focus on the most common two for form submissions GET and POST.
GET
Below we see the form example code for making a GET request.
<form action="process-user.php" method="get">
<input type="text" name="full-name">
<input type="password" name="password">
<input type="submit" value="submit">
</form>
When the user clicks the submit button of our form all their responses are captured and labeled using the name attributes on each element. Then they are sent to the location listed in the action attribute in our case process-user.php The request uses the method attribute set as get. This causes the information to be sent as a Query String included into the URL. The URL for our GET request looks like this,
By looking at the headers of our request in the Developer Tools > Network tab, we can see the request type listed as GET, and our users responses is located in Query String Parameters.
HTTP Get request is used when we want to get back particular content from the server and we want to pass it some options to refine the search of what we are getting back from the server. Since the content of our request is visible in the URL string at the top of the browser window, this is not really ideal for passwords, as the people looking over your shoulder at your favorite cafe might be able to read the contents of what you are sending off your screen.
POST
Below we see the same form example code for making a POST request.
<form action="process-user.php" method="post">
<input type="text" name="full-name">
<input type="password" name="password">
<input type="submit" value="submit">
</form>
When the user clicks the submit button of our form all their responses are captured and labeled using the name attributes on each element. Then they are sent to the location listed in the action attribute in our case process-user.php. The request uses the method attribute set as post. This causes the information to be sent as Form Data that is passed along to our process-user.php file. The URL for our post request looks like this,
By looking at the headers of our request in the Developer Tools > Network tab, we can see the request type listed as POST, and our users responses is tucked into the Form Data.
HTTP Post request is ideally used when we wish to post content to the server. This is the more appropriate of the two methods for sending something like a password as the content is sent within Form Data and not directly visible in a query string in the URL as they are with GET requests.
Next, let's explore some of the many form elements we can use to gather user input.
Text Inputs
Setting the input element with a type="text" gives our user a place to type in a single line of text content. The placeholder attribute puts some dummy text into the element that will be replaced as the user starts typing. The name attribute gives our input value a label. This makes it possible to grab its value at the other end on the server by calling up the value by giving its name (key).
<input type="text" name="username" placeholder="username">
Setting the input element with a type="password" displays dots as the user types characters instead of the actual characters. This is useful when private information is entered that we do not want others around the user to read.
<input type="password" name="password" placeholder="password">
Setting the input element with a type="tel" will bring up the numeric keypad on supporting mobile devices.
<input type="tel" name="phone" placeholder="phone">
Hidden Inputs
Setting the input element with a type="hidden" will send the inserted value attributes data along with the form submission, but won't make the data visible in the browser window.
<input type="hidden" name="id" value="UID-99298356982">
Submit Buttons
Setting the input element with a type="submit" will create a submission button that will submit the form upon clicking it. The value attribute holds the text that will appear on the button.
<input type="submit" value="submit">
You can also use a button element:
<button type="submit">Value</button>
Note that with a button, the text that will appear on the button goes between the <button> and </button> tags.
Radio Inputs
Radio inputs are useful when you want to have several possible values but wish to limit the user to choosing one or another. To accomplish this we must set different value attributes for each radio button, but they must share the same name attribute.
<input type="radio" name="gender" value="male"> Male <br>
<input type="radio" name="gender" value="female"> Female
Male
Female
Checkboxes
Checkboxes are ideal if we wish to allow our user to choose one, another, or both values.
<input type="checkbox" name="vehicle-1" value="bike"> Bike <br>
<input type="checkbox" name="vehicle-2" value="car"> Car
Bike
Car
Select Menus
Select menus create a nice drop menu with multiple selectable options. Here the user must also choose a single option, so this could be a replacement for a set of radio buttons. Here we must assign a text label between the opening and closing option elements as well as a value attribute that will hold the choice the user selects that will be passed along during form submission.
<select name="size">
<option value="small" selected>small</option>
<option value="medium">medium</option>
<option value="large">large</option>
</select>
Text Area
Text Area elements are useful if we wish to allow our user to insert multiple lines of text, for example if we wish to gather feedback that requires they can type as much or as little a response as they like.
<textarea name="message"></textarea>
Iframes
Iframe elements allow us to link to other HTML content from within a frame window on our pages. The src attribute points to the location of other html content elsewhere and display it within the current page.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d335994.89219194185!2d2.0673752159642937!3d48.8589713267984!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C+France!5e0!3m2!1sen!2sus!4v1457911182825" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
HTML5 Semantic Elements
A Brief History
At the dawn of HTML, developers had but one common element that was used to create generic boxes and that my friend was the <div> element. Pages layouts at that time then became a sea of divs. This worked, but we needed a way to label them to distinguish one div from another. This was largely done with id and class names such as
<div id="header">
<div class="wrapper">...</div>
</div>
When the W3C (the organization that oversees the spec for HTML & CSS) started writing the spec for HTML5 they wanted to create new elements that would eliminate the need to label so many divs and make our code more readable for developers and more descriptive to browsers. Along with the help of Google hundreds of thousands of websites were scanned and all the most common id and class names were recorded. It turned out that many developers were in fact using the same names to label their elements. Such as id="header" or "footer", "main", "nav", "section","article", "aside", etc. For each of these most common labels we now have elements we can use instead. So instead of
<div id="header">...</div>
we can use
<header></header>
The one thing all semantic elements have in common is that we should use them when the content within the element has related meaning.
se·man·tic səˈman(t)ik/ adjective relating to meaning in language or logic.
To clarify, all of the content in the <header> is relating to introductory content or containing navigational aids, just like the head of a document. Let's take a div layout and convert it using semantic elements instead
<div class="wrapper">
<div id="header">
<div id="nav">...</div>
</div>
<div id="main">
<div id="music">
<div id="rock">...</div>
<div id="jazz">...</div>
</div>
</div>
<div id="aside">...</div>
<div id="footer">...</div>
</div>
Now we'll convert it using HTML5 Semantic Elements
<div class="wrapper">
<header>
<nav>...</nav>
</header>
<main>
<section id="music">
<article id="rock">...</article>
<article id="jazz">...</article>
</section>
</main>
<aside>...</aside>
<footer>...</footer>
</div>
Notice that in cases where the content within the element is not semantically related or we have the need to simply create a generic box such as the wrapper, we can still use divs as we please.
Some Semantic Elements Worth Knowing
Next let's talk about the semantic meaning intended for each element so you have an idea of how they were meant to be used. As a developer there are no hard rules of how to configure these elements. We only have their intended meaning to work off of, so you should feel comfortable configuring them in a way that makes the most sense to you and best suits your layout needs. The following descriptions are as they are stated from Mozilla Developer Networks documentation.
Article
<article>...</article>
The HTML <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). This could be a forum post, a magazine or newspaper article, a blog entry, an object, or any other independent item of content. Each <article> should be identified, typically by including a heading (<h1>-<h6> element) as a child of the <article> element.
Aside
<aside>...</aside>
The HTML <aside> element represents a section of the page with content connected tangentially to the rest, which could be considered separate from that content. These sections are often represented as sidebars or inserts. They often contain the definitions on the sidebars, such as definitions from the glossary; there may also be other types of information, such as related advertisements; the biography of the author; web applications; profile information or related links on the blog.
Details
<details>..</details>
The HTML Details Element (<details>) is used as a disclosure widget from which the user can retrieve additional information.
Figure & Figcaption
<figure>
...
<figcaption>...</figcaption>
</figure>
The HTML <figure> element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit. While it is related to the main flow, its position is independent of the main flow. Usually this is an image, an illustration, a diagram, a code snippet, or a schema that is referenced in the main text, but that can be moved to another page or to an appendix without affecting the main flow.
The HTML <figcaption> element represents a caption or a legend associated with a figure or an illustration described by the rest of the data of the <figcaption> can be the first or last element inside a <figure> block. Also, the HTML Figcaption Element is optional; if not provided, then the parent figure element will have no caption.
Footer
<footer>...</footer>
The HTML <footer> element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.
Header
<header>...</header>
The HTML <header> element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on.
Main
<main>...</main>
The HTML <main> element represents the main content of the <body> of a document or application. The main content area consists of content that is directly related to, or expands upon the central topic of a document or the central functionality of an application. This content should be unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless the document's main function is as a search form).
Mark
<mark>...</mark>
The HTML Mark Element (<mark>) represents highlighted text, i.e., a run of text marked for reference purpose, due to its relevance in a particular context. For example it can be used in a page showing search results to highlight every instance of the searched-for word.
Nav
<nav>...</nav>
The HTML <nav> element (HTML Navigation Element) represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
Section
<section>...</section>
The HTML <section> element represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each <section> should be identified, typically by including a heading (<h1>-<h6> element) as a child of the <section> element.
Time
<time>
The HTML <time> element represents either a time on a 24-hour clock or a precise date in the Gregorian calendar (with optional time and timezone information).
This element is intended to be used presenting dates and times in a machine readable format. This can be helpful for user agents to offer any event scheduling for user's calendar.
Older Browser Support
Support for semantic elements is easily achieved in older browsers by linking to both modernizr.js and normalize.css or an equivalent CSS reset file that tells all the semantic elements to display block. As time moves on this is less and less necessary as older browsers are used less and less.