HTML Explained

HTML is the language used to generate web pages. It is quickly becoming the front-end of mobile apps and most of what we see on a daily basis.

Hypertext Markup Language (HTML) is worth learning, no matter what your future in technology might be. It allows us to provide interactivity with the end-user with dynamic, responsive content. Programming with a graphical user interface (GUI) is a little beyond the scope of our course but is an easy way to begin front-end design.
There are several methods to generate good programs with a GUI and back-end. C++ and Java developers would recognize the Model-View-Controller (MVC) paradigm. We will take a more relaxed approach, starting with the basics - getting content onto a web page.
What is HTML?
I will do my best to explain, but there are thousands of better tutorials online. Here's a fantastic one and here is a free online course.
HTML is not a programming language. It is, quite specifically, a markup language. It is not responsive or dynamic, does not run or interpret code. HTML provides content and how the content looks. It is downloaded from a server (computer) as a plain-text file and interpreted on-the-fly by the browser (Chrome, Firefox, IE, Safari, Opera, etc).
Hypertext is content that can link to other files, folders, or locations through navigation (clicks). Hypertext documents are connected through passive "links". 
HTML utilizes opening and closing tags around content in order to organize and decide what that content should look like. An opening, or beginning tag uses arrow brackets < > and a closing, or ending tag with contain a slash </ >. For example, paragraphs of text are surrounding with the <p> and </p> tags.
Example: You can emphasize text with the <em> tag like this:
    <em>This text will look italic,</em> while this does not.
    Will produce:  This text will look italic, while this does not.
There is quite the history to HTML and it has come a long way (version 5.2 as of this writing). If you wish to see all the possible tags along with way more information, I highly recommend the W3Schools Reference. There is also a great cheat sheet provided by Hostinger Tutorials.
HTML File Structure
Think of an HTML file like a person. It has private thoughts, kept inside the head (one would hope) and a body that people can see (and even interact with). This, along with many other elements is called the Document Object Model (DOM).
My attempt at modeling the DOM
The head and body are the two major elements inside your basic html file. These also happen to be the first tags you'll need to write:
<html>
<head></head>
<body></body>
</html>
That would be a very boring web page - there's no content! Let's break it down.
The opening and closing <html> and </html> tags tell the interpreter (browser) that this is in HTML format and to interpret everything between those tags as such.
The <head> and </head> tags define an area for hidden content that the end-user does not typically see. Hidden information could be meta-data (like search tags), loading external files in the background, and giving your page a <title>.
Between the <body> and </body> tags is where the real magic happens! This is where you will define the content and structure of your page. 99% of your page content will be between these tags.
Hello World!
Perhaps the simplest possible HTML file, but worth exploring. Create a new blank text document in your favourite text editor (notepad on Windows, etc). In your document, copy and paste the following:
helloworld.html
<html>
<head>
    <title>My First HTML Page!</title>
</head>
<body>Hello World!</body>
</html>
Save that file with the .html extension (call it something snazzy like helloworld.html). Now open that file in your favourite web browser (typically by double-clicking the file wherever you have it saved). It should look something like this:
Hello World! in HTML (illustration by author)
You may have noticed a new <title> tag inside the head tags. This is one of the only tags inside the head that is visible to the user. Did you notice what it did?
Useful Tags
HTML is backwards-compatible so that we don't break the Internet. When you first learn HTML it is a toss-up between learning the simpler, deprecated tags (like <b> for bold) or the shiny, new HTML5 standards (<strong>). The general rule of thumb is: if it can be done using a style (CSS), then do it with a style. That becomes overly complicated for new learners. Here is a non-exhaustive list of some useful tags to learn, in no particular order:
Tag
Description
<p>
Creates a paragraph block separating content and allowing for styling paragraphs of text.
<div>
Invisible tag that defines a section of content. The soul purpose of <div> is to provide labeled sections and subsections of the document that can be styled, hidden, etc.
<br />
One of the few standalone tags (hence the slash to close itself), this tag adds a new line or line break.
<h1>...<h6>
Different predefined heading styles that enlarge and bold the font.
<font>
A more complicated or involved tag that allows you to change the actual font, font size, and overall look of the text.
<a>
The anchor tag is used to link from one page to another. It can have a name attribute, allowing you to link to a section in the current document and a href attribute which is a reference to another page (the link).
Example: <a href="https://cs.brash.ca">Computer Science</a> would create a link to my computer science website like this: Computer Science​
<img>
Insert a picture (image) file into your document using the src attribute.
<table>
A block tag used to create a table (much like the table showing you this information). You create rows with <tr> and cells of data (columns in a row) with <td>.
<button>
Insert a clickable button on your page. This tag is different than the button you can create with the <input> tag, found on a <form>. We will use the <button> tag to help create interactivity on our pages with Javascript!
Commenting HTML
To insert a comment in your HTML document that is not interpreted, use the <!-- opening tag and close with -->.
Example (the photo will not be loaded):
<!-- This next line is commented out
<img src="..\images\sample.jpg">
-->
It's important to note that comments are not shown on the page but are visible in the source file if the user asks to view the source.
What is CSS?
In short, CSS stands for Cascading Style Sheets. It is an incredibly detailed (and complicated) subset of HTML that almost has its own markup language / syntax. It allows us to separate style from content, each in its own file.
CSS allows you to create a look (or skin) for your page, defining the colours, fonts, and overall style of any tiny visual detail on your page. If it has a tag, it can be styled (generally speaking). CSS is extremely powerful (and beyond the scope of this course). By all means, if you wish to learn CSS on your own, I encourage it. However, do not let it interfere with your understanding of basic HTML and the interaction between HTML and Javascript.
Simple Example
<!DOCTYPE html>
<html>
​
<head>
    <title>Single Button</title>
</head>
​
<body>
    <p>The button below does nothing. Can you make it do something interesting?</p>
    <button style="padding:10px"> Click me! </button>
</body>
​
</html>
In this example you can see that the <button> tag has a style associated with it to add padding (space) around the label "Click me!".
HTML & Javascript
So that was a lot to read and it's just skimming the surface of HTML. Let's get to the real reason we're here - how do we get an HTML page to feel interactive?
Enter: Javascript!
Javascript can be downloaded in the background of (or inside) an HTML document and interpreted on the client's computer. It is important to note that Javascript was designed to run client-side, not server-side. This means the computations and animations happen in the browser. Data can be transferred to/from a server via Javascript, in the background.
External Links
HTML
​W3Schools Reference​
​HTML Tags List​
​Hostinger Cheat Sheet​
​freeCodeCamp​
Free Online Lesson: HTML Basics​
CSS
​W3Schools Reference​
​freeCodeCamp​
​CSS Basics​
​

Commenting Code

Hello World! (in HTML)

Last updated -6

Tag	Description
`<p>`	Creates a paragraph block separating content and allowing for styling paragraphs of text.
`<div>`	Invisible tag that defines a section of content. The soul purpose of `<div>` is to provide labeled sections and subsections of the document that can be styled, hidden, etc.
`<br />`	One of the few standalone tags (hence the slash to close itself), this tag adds a new line or line break.
`<h1>...<h6>`	Different predefined heading styles that enlarge and bold the font.
`<font>`	A more complicated or involved tag that allows you to change the actual font, font size, and overall look of the text.
`<a>`	The anchor tag is used to link from one page to another. It can have a `name` attribute, allowing you to link to a section in the current document and a `href` attribute which is a reference to another page (the link). Example: `<a href="https://cs.brash.ca">Computer Science</a>` would create a link to my computer science website like this: Computer Science
`<img>`	Insert a picture (image) file into your document using the `src` attribute.
`<table>`	A block tag used to create a table (much like the table showing you this information). You create rows with `<tr>` and cells of data (columns in a row) with `<td>`.
`<button>`	Insert a clickable button on your page. This tag is different than the button you can create with the `<input>` tag, found on a `<form>`. We will use the `<button>` tag to help create interactivity on our pages with Javascript!