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.
- 8Create 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.
- 11Repeat 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.
- 15Place 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.
- 31Delete 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.
- 37View 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.
- 38This 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.Advertisement
Video: Format HTML5 Code for Easy Reading and Editing
Referencing this Article
If you need to reference this article in your work, you can copy-paste the following depending on your required format:
APA (American Psychological Association)
Format HTML5 Code for Easy Reading and Editing. (2016). In VisiHow. Retrieved Mar 25, 2017, from http://visihow.com/Format_HTML5_Code_for_Easy_Reading_and_Editing
MLA (Modern Language Association) "Format HTML5 Code for Easy Reading and Editing." VisiHow, visihow.com/Format_HTML5_Code_for_Easy_Reading_and_Editing Accessed 25 Mar 2017.
Chicago / Turabian VisiHow.com. "Format HTML5 Code for Easy Reading and Editing." Accessed Mar 25, 2017. http://visihow.com/Format_HTML5_Code_for_Easy_Reading_and_Editing.
Categories : Software
Recent edits by: Amanda, Grimm