[Deep Dive]

[HTML Introduction: Hyper Text and the Web with Nick Pettit]

Now that you know how easy it is to make things appear inside of a web browser

it's time to learn about markup languages, specifically HTML.

HTML is an initialism that stands for hypertext markup language.

There's two parts to this: hypertext and markup language.

However, we are going to focus on the markup language part first.

A markup language is not the same as a programming language.

When we use a programming language, we are describing how something should behave.

Rather, markup languages are used to annotate

and add semantic structure, or meaning, to a text document.

So fundamentally, you can think about a web page in terms of text

with markup added on top.

The general concept and term "markup"

evolved from the idea of a book editor or writing instructor

marking up a document with a pen or pencil,

similar to what you might remember from school.

However, HTML isn't intended to suggest corrections to text,

rather it structures and shapes the text in a way that makes it easier to understand,

both for people like you and me as well as for the software that interprets the markup.

As an example, HTML is a markup language that is interpreted by a web browser.

So, lets try an example.

Lets look at some normal text and then we will figure out

how we might mark this up with HTML.

This text is describing one of the elements and principles of art,

but really this text could be about anything.

You might create a web page about your favorite Shakespeare quotes

how to make pizza, practice and procedure for a work environment,

or anything you want. Now lets examine this text.

At the top, we have what looks like a header that describes the content of our page.

Below it we have a few paragraphs that go into detail on the subject.

However, as is, there is no way for a web browser

to determine what part of this text is a header

and what parts are paragraphs.

We can remedy this situation by applying what are called "tags."

A single tag looks like this: there is an opening angle bracket,

a very specific set of text inside,

and then a closing angle bracket.

There are many tags like this, but with some practice

it should be fairly easy for you to remember most

of them without having to look them up.

This tag we are looking at is called a headline tag.

We will talk more about headline tags in an upcoming video,

but for now all we really need to know

is that this tag is intended to mark large headlines.

Here is another tag.

This one is called a paragraph tag,

and you'll sometimes hear it referred to as a "p-tag" for short.

Let's take these two tags and revisit the text that we were just looking at.

For the header, up at the top of this text

we want to add our first level headline tags.

We will go ahead and put our insertion point there,

and we will type a first level headline tag, just like that.

Now we have marked up the start of our headline,

but how will the computer know where our headline ends?

Tags almost always come in pairs.

We have what is called our opening tag right here,

but we need to finish wrapping this text by adding a closing tag.

A closing tag looks just like an opening tag

but with the addition of a forward slash right after the first angle bracket.

We will type our opening angle bracket,

our forward slash,

and then h1 for the first level headline.

Now we need to use the paragraph tag to wrap our two paragraphs here.

Just like the headline, we will use an opening p tag

and a closing p tag.

So, we will go ahead and type our opening p tag

and then we will close it.

Then we want a second paragraph so we will open another paragraph tag.

Then we will skip to the end and go ahead and close it.

Then we can save our file,

and we could check it out in the browser.