HTML is a forgiving language

HTML Cheatsheet

• Download HTML Cheatsheet (PDF)
• Star HTML Cheatsheet on Github
• Share HTML/CSS Cheatsheet Link: https://ilovecoding.org/blog/htmlcss-cheatsheet

CSS Cheatsheet

• Download CSS Cheatsheet (PDF)
• Star CSS Cheatsheet on Github
• Share HTML/CSS Cheatsheet Link: https://ilovecoding.org/blog/htmlcss-cheatsheet

Video Lesson Transcript

Now one important fact that I want to mention to you, is that HTML is a very forgiving language. That means that if you break the syntax and if you write incorrect code let's say by avoiding the closing </p> tag and miss the closing </span> tag, this is how it should look.

<p id="first-para" class="info">
  This is the text          for the paragraph.
  <br />
  <br />
  <hr />



  <span id="whatever" class="something else">
    this is some more text
  </span>
  <span>
    sadjalsdkjsa

Sometimes it is going to totally break, but sometimes is going to simply work. Right here I am missing the two closing tags, but still it's working.

So that's what I want to mention to you, that HTML is a very forgiving language. That means that when the browser reads the code, it tries it's best to understand it. And even if it's broken, it's gonna try to make sense of it, and render something on the screen to the best of it's knowledge.

With that said, I'm gonna right-click, and inspect the <p> element. Basically you've learned that the inspect feature will open all the code in the elements tab in the Chrome Developer Tools, and you immediately see that this is not the code that we wrote.

We never wrote the <html> element, neither the <head> or the <body> elements, we just wrote the code that goes inside the <body>.

So where is the rest of the code coming from? And that is what goes on to say that HTML is a very forgiving language. The browser interprets our code and fills in the gaps to make the webpage appear on the screen. Now, this does not mean that it's okay to make mistakes. It only means that a lot of times you may have made a mistake and you will not see an error on the screen.

Proper format of an HTML document

Now you see that so far you wrote all of these HTML elements, and these are the elements that shows up on the page.

But, the proper way to write an HTML page, is to have this particular basic markup.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      page title goes here
    </title>
  </head>

  <body>
    page content goes here
  </body>
</html>

You write an <html> element, and inside it you have two elements: the <head>, and the <body> elements.

<body>

The <body> one, will have everything that is shown in this area:

This white area is the <body> of the HTML page.

<head>

in the <head> area, you write let's say the <title>. This is just one option, there are many others as well, but this is one of the thing that you write in the <head> section.

What is <head>? It is the section which is like the options for the web page.

Where it says "index.html", you want to mention the title for that page, so you're going to put it inside the <title> element, and everything that you want to show inside that particular page, will go inside the <body> area.

Explaining the code from the inspector

Now with that said, you can see over here that the browser is smart enough to think "hey, these are some <p>, <hr>, and <span>, it looks like they fit inside the <body> area". So it just puts it automatically inside the <body> element. Smart enough, right?

Even though HTML is a forgiving language, if you break the rules too much, your code will not work in the way that you expect. So always be careful writing code, indent your code pretty well so it is easier for you to read, so you can have the proper result that you are expecting.

With that said, in the next lesson, we are going to go over this basic markup, and you're going to know basically the things that you need to know about HTML to get started. In the rest of the tutorials we are going to be focusing on the different elements one by one, and after that, we are going to get into the CSS.

So that's pretty much it for this lesson, I'll talk to you in the next.