Format HTML5 Code for Easy Reading and Editing
Edited by Grimm, Amanda, Eng
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.
Click Notepad to launch it.
On the desktop outside of Notepad, click and hold on a ".html" file.
We will use a file called "visi.html".
Drag it inside of the Notepad window.
When hovering over Notepad, the icon changes to a black plus sign inside of a black box.
Release the icon.
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.
Scroll down and find the end of the heading section.
It will read, "</head>". Click to get a cursor just at the end of this line.
Do a carriage return.
This is done by hitting the "Enter" or "Return" key, and it inserts a new line.
Find the end of the body.
Every HTML page has a body. The end tag will read, "</body>".
Create a carriage return after the end body tag.
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.
Click to place the cursor just before the paragraph tag.
In this tutorial, our first paragraph tag reads, "<p>Para 1</p>".
Tap the "Tab" key to indent this tag.
Repeat the last two steps for every paragraph tag.
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.
Click to place the cursor just before the text of the first heading tag.
In our tutorial, this is between the ">" symbol and the phrase "Heading 1".
Create a carriage return.
This moves the rest of that line down one line. Now we have one line that reads, "<h1>", and a second line that reads, "Heading 1</h1>".
Place the cursor just after the "Heading 1" and create a carriage return.
This moves the end heading tag down one line. Now each tag has its own line, as does the text of the tag.
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.
Place the cursor just before the title tags in the header.
This is the line that begins with "<title>", and is found in our header section, or the first section of the page.
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.
Place the cursor before the "Heading 1" tag nested inside the body.
Make sure to place it before the entire tag, right before the "<h1>".
Tap the space bar twice to indent it by two spaces.
Place the cursor before the first paragraph, called "Para 1".
Again, we want to place the cursor before the entire tag, right before the "<p>" that prefaces the "Para 1" text.
Tap the space bar four times.
This indents the paragraph tag by two spaces past the heading tag. This indicates that this paragraph belongs to this heading.
Repeat the process with all other heading tags in the body, and any paragraphs that belong to them.
Now the ownership is relatively and immediately clear. We have our first heading, and a paragraph sitting under it, and so on. Let's save the file.
Click "File" in the top left corner.
Double-click the file on the desktop to open it in a default browser.
View how the page displays.
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.
Find "Heading 5" in the Notepad document.
We know that it is our third heading. Because we have spaced our headings out, we can easily count down to find the third heading. Let's change that to an h3 tag.
Delete the "5" from the h5 tags.
Instead of reading, "<h5>", it will read "<h>".
Add a "3".
It will read, "<h3>".
Repeat for the end tag.
It should read, "</h3>".
Delete the "5" from the text in the tag.
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.
Click "File" in the top left corner.
Double-click on the file on the desktop to open it in a browser.
View the page and check to see how the changes look.
We can see that we have a much nicer "Heading 3". It's a cleaner format, and we kind of like that.
Close the browser by clicking the "x" in the top right-hand corner.
View the file in Notepad.
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.
This concludes our tutorial on how to properly format your HTML5 code so that it is easier for a person to read and later edit, if necessary.
Later, we'll discuss code commenting, so check out that tutorial. Thanks for watching VisiHow. Have a great day.
Video: Format HTML5 Code for Easy Reading and Editing
Recent edits by: Amanda, Grimm