Basic Markup of HTML

Now let's write our first HTML page with the proper format, which is the basic markup of every HTML page. So we are going to start off by typing the <!DOCTYPE html>. Basically, the DOCTYPE tells the browser that "Hey browser, process my HTML with the latest version of HTML, which is HTML5". So the browser knows whatever code it read, it's going to be read the latest format.

HTML has multiple versions and subversions, but the latest one is now HTML5. So basically if you have an older website, it's going to have a different number version mentioned in the <!DOCTYPE>. But since HTML5 is very common now, we are going to use it with the <!DOCTYPE html> and it will tell the browser to use the latest version.

So let's remove our previous code and write this particular element.

<!DOCTYPE html>

Before we move further, notice that this is a very special element, it does not have a / (slash) for closing the element, and it also has an ! (exclamation point) at the beginning. This is an unique exception, there is no other element like such in HTML. With that said, let's start with our normal HTML now.

The Basics

So we start off putting our <html> element first, with a mandatory attribute called lang. "lang" stands for language, which is the language that this HTML document is written in. For this value we put "en", for English.

<!DOCTYPE html>
<html lang="en">
    
</html>

Similarly when there is an opening tag, it will always have a closing tag, which is </html>. And inside this HTML we need two children only, nothing else. These are the <head>, and the <body>.

The <title> element

As you already know from our previous lesson, whatever the <body> element has inside, will show up on the page, and anything inside the <head> are basically options for that entire web page.

One important element for an HTML document, is the <title>. In this element we define the title of this page, so let's say that my page title is "This is my first page".

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      This is my first page
    </title>
  </head>
  <body>
        
  </body>
</html>

This is the result:

Notice that what we exactly wrote in the code shows up in the title area.

This area is very important. Let's say if you Google "anything here".

searching on Google a random text to check the title of the page

Over here you can see that the description for one of the Google results is "Scratch Studio - add anything here!".

The title of the page from the google results

If you go to that page, you can see that "Scratch Studio - add anything here!" is actually the title of that page. It's not mentioned anywhere else on the page and there is no other text like such, it's only in that section shown above.

Search engines put a lot of emphasis on what the title of the page is. And whatever it is, it's going to show up in the search engines per page. So every HTMl page is treated separately by your web servers, and also Google.

Google does not index web sites, it actually indexes pages, one at the time. So you want to make sure that your title is very relevant, when you are writing HTML pages.

Elements inside the <body>

Moving further, let's make two paragraphs inside our <body> element. For this we simply use the <p> tags, and write some text between them, like so:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      This is my first page
    </title>
  </head>
  <body>
    <p>
      Hi this is my first para
    </p>
    <p>
      this is the second para
    </p>
  </body>
</html>

The result looks like this:

And you can see that the first and second paragraphs are created.

Notice that there is a natural space in between the paragraphs, and the reason is that when you are wrapping multiple elements with the <p> separately, the paragraph element is going to create a natural space.

Different elements have different attributes, and they treat the content differently. That's why we have multiple elements, and they all treat the content slightly differently.

With that said, we have completed most of the understanding of how HTML works and it's basic elements. You learned what the name of the page should be, how to write elements, what the basic markup of the content should be, and now the rest are just details which we will cover one at the time and create beautiful pages.

I will talk to you in the next lesson.

Become a confident software developer with mentor support!
Get Started
Already have an account? Please Login

All webpages on the internet has this basic markup. Lets see what this markup looks like.

HTML Cheatsheet

CSS Cheatsheet

Video Lesson Transcript

The <!DOCTYPE html> Element

The Basics

The <title> element

Elements inside the <body>