Bootcamp
Search…
1.1.1: Basic HTML

Why HTML

HTML pages and the software that transfers them are the foundation of the browser-based internet. A browser's fundamental task is to display HTML documents and handle built-in HTML behaviours.

What is HTML

This is a brief overview of HTML5 and how to use it. This intro will cover basic tags, semantic tags and attributes. It is important to understand what HTML is and how it is used in browsers. All browsers have an HTML engine built in that can read and interpret the syntax in an HTML file. The tags tell the browser what type of elements are on the page and also how those elements relate to each other. Just like an editor would mark up content of an article, a programmer can mark up a web page by using tags and attributes. The first thing to learn is the proper syntax of a basic HTML page. HTML uses tags wrapped around content to control the flow and look. For example, a paragraph tag is used to surround the text of the paragraph and let the browser know that it is a paragraph. The browser then applies its default styling to the paragraph. The paragraph tag looks like this:
<p>Text of the paragraph</p>
the p is called the opening tag and the /p is called the closing tag. Both must be included to tell the browser where the paragraph begins and ends. What is written between the tags is displayed on the browser page, not the tags. Most tags have an opening and closing tag with the content in between. Tags are generally nested inside each other to maintain structure and flow of content.

Basic Structure of an HTML File

When using HTML5, you must tell the browser that your page includes it. Otherwise, the browser may use a different version of HTML which can influence the look of the page.
The first line of any HTML document should be this:
<!DOCTYPE html> //this tells the browser that it should use HTML5
The next tag used is the html tag which tells the browser that all the information between the open and closing html tags is the content for the page. All other tags go inside this tag.
<!DOCTYPE html>
<html lang="“en”">
content of page
</html>
The lang inside the opening tag is telling the browser what language to use. In this case, "en" for English. lang is called an attribute and the “en” is the value of the attribute. More generally, attribute=“value”. Values are surrounded in quotations because the browser needs the information as a string. Attribute:value pairs are ways to add more meaning to a tag and how it should be rendered.
Next is the head tag which contains the meta data and other information needed for the browser to render the page the way the programmer intended it.
<head> </head>
The meta tag is added next inside the head tag
<head>
<meta charset="“UTF8”" />
</head>
This meta tag with the charset=“UTF8” attribute: value pair should be the first meta tag inside the head. The attribute value pair here is telling the browser which character set to use. This also helps prevent some CRSF hacking. Also notice that that meta tag doesn’t have a closing tag. Tags like this are called self-closing tags. More on self-closing tags later.
You can add other meta tags as well to provide more functionality to your site but that is not the scope of this intro.
The next tag is the title tag which surrounds the content that will show up on the tab of the browser page.
<head>
<meta charset="“UTF8”" />
<title>My First Page</title>
</head>
To recap this is what the file looks like so far
<!DOCTYPE html>
<html lang="“en”">
<head>
<meta charset="“UTF8”" />
<title>My First Page</title>
</head>
</html>
If the browser were to open up this file, nothing would be displayed on the page except the title in the browser tab. The next tag in the file is the body tag. This tag envelopes the content to be displayed on the page itself. Between the opening body tag and closing body tag is where the content of the page goes. Included in the sample below are two common tags a headline1 tag and paragraph tag.
<!DOCTYPE html>
<html lang="“en”">
<head>
<meta charset="“UTF8”" />
<title>My First Page</title>
</head>
<body>
<h1>This is a headline tag</h1>
<p>This is a paragraph tag</p>
</body>
</html>
This is the basic structure of an HTML5 page. Starting from here, the page can take on more complexity.

Block Elements

A block element takes up the entire width of the browser window and forces items below it to be placed on the next line.

Commonly Used Block Elements

div - divider tag - used to contain other tags that are related in subject
h1 - largest headline tag - used for banners across the page
h2 - next largest headline tag - used for titles of content
h3, h4, h5, h6 - also headline tags: the font gets smaller as the number gets larger
p - paragraph tag - content inside is treated as one paragraph

Inline Elements

An inline element is one that only takes up the space of the content it contains. It does not force items to the next level.

Common Inline Elements

a - makes the text a link to another page either within the same website, another place in the same file or an external website
span - wraps around content for styling
em - makes the content it surrounds italicized
strong - makes the content it surrounds bold

Semantic HTML

Using HTML tags to communicate content priority is what we call Semantic HTML, because tags have meaning beyond separating components on screen. This property is used by search engines like Google to determine what pages are about. A website search engine is an application that digests web pages on the internet, and when a user does a search, tries to find the relevant, previously-digested page. Google and others know the h1 tag is more likely to contain a page title, and weighs that text more heavily than text inside h2 or "lower-priority" tags.
Semantic HTML is also used for accessibility. Some users need the help of browser readers to convey the content on a page to them because they can not see well enough. Semantic tags help communicate that meaning to those users.

Common Semantic Tags

section - div-like tag that holds a section of the main subject of the page
article - div-like tag that holds the main subject of the page
aside - div-like tag that holds content related to the subject but not the main focus of the page.
nav - div-like tag that hold contents of a navigation bar
footer - div-like tag that holds the contents of a footer for the page

Anchor Tags

The anchor tag wraps around text or image and makes it link to an external URL, an internal URL or an ID within the same page.
<a> hyperlink text</a>
Anchor tags have generally have two attribute pairs to work properly. The first is the href which takes the value of of a URL. The second is target and takes the _blank value. This tells the browser to open the link in another tab or window. However, if you do not type the target attribute, the browser will use the default which is to open the link in the same tab as the page it was clicked on. If you were to link to the white house website and want it to open in a new tab, it would look like this:
<a href=“https://www.whitehouse.gov" target=“_blank”> White House </a>

Self Closing Tags

Some tags don't require a separate closing tag. These tags work in the same way as the tags mentioned above. The syntax is a little different. Self closing tags in the past needed a / to close them. In today's modern browsers, it is not necessary but good practice to use the /.

Image Tag

The image is a self-closing tag and its syntax is as follows:
<img src="www.pic.com/image.jpg" alt="this is a picture" />
There are two attribute-value pairs that are needed in the image tag. The first attribute is src which stands for source and it takes the value of the relative path to the rendered image. It can also be a website url for that image. The second attribute is alt which stands for alternate and takes the value of the alternate text to display on the screen in case the image is not available. The alt attribute also serves a second purpose and that is to describe the image for those who are visually impaired and use browser readers. Without it, a browser reader won’t read this information to the user.
To use an image on a page:
<img src="“my_pic.jpg”" alt="“A" picture of me” />
To make an image a link:
<a href=“https://www.amazon.com" target=“_blank”>
<img src=“my_pic.jpg” alt=“A picture of me” />
</a>

Other Self-Closing Tags

meta - describes information about the page like author, description, keywords
link - creates relationships to external pages like JS files, CSS files

Lists

Unordered Lists

The unordered list tag which presents itself with bullet points followed by the item associated with the list. Within the list tags go another tag that is used to wrap each list item: the li tag. Here is what an unordered list would look like:
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
List items can be text, images, numbers and about anything else.

Ordered Lists

The ordered list, as its name implies, provides an ordered list by number or letter or roman numeral. The default is number. This list too uses the li tag to wrap each item in. Here is what an ordered list would looks like:
<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>

Definition Lists

The definition list is used to present words and their definitions as you would see in a glossary. A definition list dl has two components inside for each list item The first is dt which stands for term and the second is dd for definition. It looks like this:
<dl>
<dt>friend</dt>
<dd>someone you have fun with</dd>
<dt>enemy</dt>
<dd>someone you loathe</dd>
</dl>

HTML Tables

The table tag is used to present data on the page in an orderly way. It works very much like a spreadsheet. The table tag wraps the content of the table. Within it are table rows and within the rows are the table data. The first row in the table is special and in that row table headings are used in place of the data. The tags are table - to wrap the table data tr - table row to wrap the columns td - data for each column th - heading for the column Here is an example:
<table>
<tr>
first row of the table
<th>Name</th>
first column heading
<th>Age</th>
<th>second column heading</th>
<th>City</th>
third column heading
</tr>
<tr>
second row of table
<td>Charlie</td>
first column data
<td>23</td>
second column data
<td>Austin</td>
third column data
</tr>
<tr>
third row of table
<td>Melissa</td>
first column data
<td>23</td>
second column data
<td>Dallas</td>
third column data
</tr>
</table>
The above table will not look great but it will get the massage across.

Recap

HTML is the original language used when the internet first launched. Today it is still the fundamental tool used to tell the browser engine what elements are being used and how those elements relate to each other. CSS and JS take advantage of HTML elements, attributes and values to change the style and content of the page. Semantic HTML helps with search engines and browser readers to apply meaning to the page structure. Understanding HTML is essential to any software engineer.

HTML Resources

Here are a few resources to review:
HTML Developer Docs : This is the Mozilla Developer site for HTML. It is comprehensive and is a go to source for developers.
HTML cheat sheets : This site provides helpful cheat sheets that are useful for developing SWE.

Exercise

Free Code Camp Intro to HTML

This exercise introduces the most common HTML elements we'll use during Coding Bootcamp. The exercise also covers <form> and various form input tags, which we won't be using until Module 3.