1: Introduction to HTML formatting


At this point in the tutorial you have learned the most commonly used HTML elements. There are other elements beyond the ones discussed, but elements not mentioned are less commonly used and easy to understand after learning the basics.

 

What is HTML formatting?

The next thing to learn about HTML is how to format a document. HTML documents can fill up rather quickly so it is important to properly format your code to help keep the document organized. This will prove to be beneficial for you and anyone else who might view your code.

 

How is HTML formatting used?

Comments and indentation are commonly used in HTML documents to emphasize the separation between sections of code. Although optional, these separations help ensure the legibility and functionality of the elements in the document. For example, if you include a code comment that describes a block of code, you can more easily find that code later on.

 

How does HTML formatting look?

It is actually up to the coder to decide exactly how they want their spacing and comments to look. There are general formatting rules, but the spacing and comment length is up to the individual writing the code.



This is an HTML document with indentations, spaces, and comments. The HTML formatting does not affect how the elements display in the window. It only helps the coder view and edit the document more efficiently. We will go into more detail about indentation, spacing and comments below.








2: Creating HTML elements


Create one element at a time

It is extremely important that an element requiring a closing tag actually has a closing tag. Functionality issues can arise when a tag is missing from an element. To avoid these issues, it is best to create one element at a time.

 

Make the opening and closing tags first

When you create your opening tag, immediately follow with creating the closing tag. Then you can go in between the tags and add whatever text or other element is needed. It can be difficult to go back through hundreds of lines of code and find the one opening tag that is missing a closing tag, so try and prevent this by coding the opening and closing tags before anything else. Many code editors will actually automatically include a closing tag after a user enters the opening tag. In later lessons, you will use the code editor Sublime Text to edit your HTML and Python files.



Now it's time to start coding HTML elements without being given the HTML element tags. Don't forget to add both the opening and closing tags!

  • create a division element in the body element
  • create a heading one element in the division element with the text: HTML element challenge
  • create a paragraph element after the heading one element with the following text:

This is a challenge designed to help you code HTML without being given the HTML element tags. If you need some help, just look at the previous HTML coding examples.



Check code





3: Placing HTML elements


Nesting elements

HTML document with nested elements

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
	</body>
</html>

As you saw earlier, HTML elements can contain other elements. An element contained in another element is technically nested in that element. The most obvious example of this is how the html element contains the head and body elements or, stated another way, the <head> </head> and <body> </body> tags are nested in the <html> </html> tags.

 

Indenting elements

You can see that all of the <head> </head> and <body> </body> tags are spaced farther in from the <html> </html> tags. HTML indentation applies to nested HTML elements, so if the head and body elements are nested in the HTML element then they should also be indented inside the HTML element.

The nice thing about the HTML indentation format is that it follows one easy rule to remember: Click the Tab on your keyboard when you nest a new element within another element.

 

Parent and child elements

HTML has specific names for an element that contains another element and an element nested within an element. An element that contains another element is called the parent element while the element inside the parent element is called the child element. In the case above, the html element is the parent element while the head and body elements are the child elements.

Don't worry if the concept of correctly placing HTML elements within one another seems a little confusing at first. There will be multiple chances to practice this skill.



Let's practice your HTML nesting and indenting knowledge.  Note: indenting is optional and will not be checked

  • Nest a division element in the body element (the division element should be spaced further in than the body element)
  • Nest a heading two element in the division element with the text: Shop Auto Parts (the heading element should be spaced further in than the division element)
  • Nest two paragraph elements in the division element with the text: wheels and then brakes, respectively  (the paragraph element should be spaced the same distance in as the heading element because the heading element does not contain the paragraph)



Check code





4: HTML commenting


Even after nesting elements with indentations, it can still be difficult to know where a specific section of HTML code starts and ends. HTML comments help clarify the beginning and end of a section of code with custom text that only appears in the HTML document.

 

HTML comment format

An HTML comment is made up of an opening tag with an exclamation mark and two dashes, the actual text of the comment, then two more dashes at the closing tag. The text within the comment can be uppercase or lowercase and will usually contain a few words describing that particular section of the code.

<!-- Comment here -->

If formatted correctly, you will be able to see the comment in the HTML document but not in the web browser page.

 

HTML comment use

To illustrate the helpful nature of code comments, here is a commented code snippet.

You can comment as much or as little as you would like on an HTML document. One suggestion is to add a comment before each main section of code so you can easily find that section without the fear of accidentally deleting or editing the wrong part of your document. With more lines of code, this becomes increasingly relevant.

<!DOCTYPE html>

<html>
    <head>
        <title>Review Comparison</title>
    </head>

    <body>
        <!--INTRO-->
        <h3>Compare Car Reviews</h3>

        <!--CONTENT-->
        <p>Select vehicle manufacturer</p>
        <p>Choose vehicle year</p>

    </body>

</html>

 

Commenting to debug

Besides providing helpful information in an HTML document, commenting is also useful for debugging.  Debugging is defined as “the process of identifying and removing errors from computer hardware or software” and originated when early programmers needed to actually remove bugs from large computational machines.   For our purposes, debugging in HTML will include removing errors and toggling visibility of certain lines of code. As a general rule, code should not be deleted until you are sure it is not needed.  Instead of deleting a line of code, simply comment it out by surrounding the lines with the comment tags <!--Comment -->. In later lessons, debugging will be more in-depth.



Let's add a comment to the code below. If you do not close the comment tag the entire HTML document will be commented out.

  • Add a comment before the division element that says HTML commenting



Check code

Now let's practice commenting to debug.

  • Uncomment the second paragraph element and comment out the first paragraph element
  • Comment out the error on line 9



Check code

Try your best to debug the code below. Don't worry if you get stuck

  • Debug the code below to remove all of the errors on the left-side of the editor



Check code



Quiz Questions


1. Element B is nested within element A. Which element is the parent element?


2. Is indentation required to render HTML in web browsers?


3. Which of the following is false regarding code comments?


Next lesson


Check out the comments and debug buttons if you get stuck.