You are watching VisiHow. In this tutorial, we are going to show you how to properly format your HTML5 code so that it is easier for a human being to read and later edit. To get started, we need to open Notepad. We have it pinned on our desktop, thanks to the help of an earlier VisiHow tutorial.
All of the code falls down onto the page. In this tutorial, we are going to just discuss the most basic formatting of this page. We will do more advanced formatting in other tutorials, as we get into those topics. To start with, every HTML page has the doctype, or the heading.
Now we have visibly separated the three parts of our page. We can work with these three parts depending on how we structure them. We like to make sure that our body is set up so that the body tag doesn't move, and neither do the main tags. For example, the heading is a main tag. However, the paragraph tag is not.
In our tutorial, we have three. One of them even has some text, which reads, "VisiHow is Awesome!". This indenting lets us see where code is more easily and quickly. Some people like to get more in depth than this. Let's reset the indenting of the paragraph tags, and look at another way to do this.
Place the cursor just before the new line that reads "Heading 1"
Hit the "Tab" key to indent this text. This is one example of a type of page we might see, with opening and closing tags left-aligned on their own lines, with the heading text pushed out. This method can be a bit confusing, but depending on the way someone codes, it may be desirable. Other times, people comment code, which we'll discuss in our tutorial on commenting code. Let's reset this again. For our purposes, we do like to add two spaces on things that are inside of nested elements.
Press the space bar twice to add two spaces before the title tag
We did this because we have a head tag, with a title tag nested inside. Body is the other area where we have nested tags. Most of the time, things that fall under one another, we give two spaces of indentation to.
Now, if we want to change something, we know that the visible text we're looking at is the body of our page. Let's say that we decide that "Heading 5" is a little too small. We can look at the web page and see that it is our third heading that we want to change.
It read, "Heading 5". Change this to "Heading 3". In a real document, the third heading would be an actual heading, and not a descriptive placeholder. However, as we are working with a descriptive placeholder, we want to make sure that it actually describes the code we used. So, since we changed the h5 tag to an h3 tag, the description needs to match, and read "Heading 3". If we forget this step, we can make things confusing for later reading or editing.
We can see that the page is much easier to read than it was originally. As we get into more advanced areas of this, we will discuss how to break this up quite a bit more using divs and tags and styles and all that other fun stuff. Right now though, we just want to give the basics.