Don't already have an account? Create an account.
By creating an Ordinary Coders account, you agree to Ordinary Coders' Terms and Conditions.
If you already have an account, login instead.
Post a Comment
Join the community
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.
Follow us @ordinarycoders
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!
HTML element challenge
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.
HTML document with nested elements
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.
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
Shop Auto Parts
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.
<h3>Compare Car Reviews</h3>
<p>Select vehicle manufacturer</p>
<p>Choose vehicle year</p>
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.
Try your best to debug the code below. Don't worry if you get stuck
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.
Now let's practice commenting to debug.
1. Element B is nested within element A. Which element is the parent element?
"A" is the correct answer since element B is located inside element A. Element B is the child element and element A is the parent element.
2. Is indentation required to render HTML in web browsers?
"B" is correct. Indentation is not required to render a web page although it is recommended to organize code and improve readability.
3. Which of the following is false regarding code comments?
"C" is correct. Code comments are visible in the HTML source code since that is where they are originally written. However, code comments are not visible when the HTML source code is rendered in a browser.