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.
Steps
- 1Click Notepad to launch it.
- 2We will use a file called "visi.html".On the desktop outside of Notepad, click and hold on a ".html" file.
- 3When hovering over Notepad, the icon changes to a black plus sign inside of a black box.Drag it inside of the Notepad window.
- 4All 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.Release the icon.
- 5It will read, "</head>". Click to get a cursor just at the end of this line.Scroll down and find the end of the heading section.
- 6This is done by hitting the "Enter" or "Return" key, and it inserts a new line.Do a carriage return.
- 7Every HTML page has a body. The end tag will read, "</body>".Find the end of the body.
- 8Now 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.Create a carriage return after the end body tag.
- 9In this tutorial, our first paragraph tag reads, "<p>Para 1</p>".Click to place the cursor just before the paragraph tag.
- 10Tap the "Tab" key to indent this tag.
- 11In 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.Repeat the last two steps for every paragraph tag.
- 12In our tutorial, this is between the ">" symbol and the phrase "Heading 1".Click to place the cursor just before the text of the first heading tag.
- 13This 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>".Create a carriage return.
- 14This 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 after the "Heading 1" and create a carriage return.
- 15Hit 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 new line that reads "Heading 1".
- 16This is the line that begins with "<title>", and is found in our header section, or the first section of the page.Place the cursor just before the title tags in the header.
- 17We 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.Press the space bar twice to add two spaces before the title tag.
- 18Make sure to place it before the entire tag, right before the "<h1>".Place the cursor before the "Heading 1" tag nested inside the body.
- 19Tap the space bar twice to indent it by two spaces.
- 20Again, we want to place the cursor before the entire tag, right before the "<p>" that prefaces the "Para 1" text.Place the cursor before the first paragraph, called "Para 1".
- 21This indents the paragraph tag by two spaces past the heading tag. This indicates that this paragraph belongs to this heading.Tap the space bar four times.
- 22Now 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.Repeat the process with all other heading tags in the body, and any paragraphs that belong to them.
- 23Click "File" in the top left corner.
- 24Click "Save".
- 25Double-click the file on the desktop to open it in a default browser.
- 26Now, 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.View how the page displays.
- 27We 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.Find "Heading 5" in the Notepad document.
- 28Instead of reading, "<h5>", it will read "<h>".Delete the "5" from the h5 tags.
- 29It will read, "<h3>".Add a "3".
- 30It should read, "</h3>".Repeat for the end tag.
- 31It 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.Delete the "5" from the text in the tag.
- 32Click "File" in the top left corner.
- 33Click "Save".
- 34Double-click on the file on the desktop to open it in a browser.
- 35We can see that we have a much nicer "Heading 3". It's a cleaner format, and we kind of like that.View the page and check to see how the changes look.
- 36Close the browser by clicking the "x" in the top right-hand corner.
- 37We 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.View the file in Notepad.
- 38Later, we'll discuss code commenting, so check out that tutorial. Thanks for watching VisiHow. Have a great day.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.
Video: Format HTML5 Code for Easy Reading and Editing
If you have problems with any of the steps in this article, please ask a question for more help, or post in the comments section below.
Comments
Article Info
Categories : Software
Recent edits by: Amanda, Grimm
