Format HTML5 Code for Easy Reading and Editing

Edited by Grimm, Amanda, Eng, Anonymous

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.

Was this helpful? Yes | No | I need help

Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas279 168.jpg

Ad

Steps

  1. 1
    Click Notepad to launch it.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas21 017892.jpg
    Advertisement
    Was this step helpful? Yes | No | I need help

  2. 2
    On the desktop outside of Notepad, click and hold on a ".html" file.
    We will use a file called "visi.html".
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas31 40383.jpg
    Advertisement
    Was this step helpful? Yes | No | I need help

  3. 3
    Drag it inside of the Notepad window.
    When hovering over Notepad, the icon changes to a black plus sign inside of a black box.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas33 443818.jpg
    Was this step helpful? Yes | No | I need help

  4. 4
    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.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas40 861774.jpg
    Was this step helpful? Yes | No | I need help

  5. 5
    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.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas62 317645.jpg
    Was this step helpful? Yes | No | I need help

  6. 6
    Do a carriage return.
    This is done by hitting the "Enter" or "Return" key, and it inserts a new line.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas65 108629.jpg
    Was this step helpful? Yes | No | I need help

  7. 7
    Find the end of the body.
    Every HTML page has a body. The end tag will read, "</body>".
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas68 554609.jpg
    Was this step helpful? Yes | No | I need help

  8. 8
    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.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas70 587618.jpg
    Was this step helpful? Yes | No | I need help

  9. 9
    Click to place the cursor just before the paragraph tag.
    In this tutorial, our first paragraph tag reads, "<p>Para 1</p>".
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas95 920426.jpg
    Was this step helpful? Yes | No | I need help

  10. 10
    Tap the "Tab" key to indent this tag.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas100 868417.jpg
    Was this step helpful? Yes | No | I need help

  11. 11
    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.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas105 512389.jpg
    Was this step helpful? Yes | No | I need help

  12. 12
    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".
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas115 431276.jpg
    Was this step helpful? Yes | No | I need help

  13. 13
    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>".
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas118 974254.jpg
    Was this step helpful? Yes | No | I need help

  14. 14
    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.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas120 261247.jpg
    Was this step helpful? Yes | No | I need help

  15. 15
    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.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas122 432217.jpg
    Was this step helpful? Yes | No | I need help

  16. 16
    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.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas140 13796.jpg
    Was this step helpful? Yes | No | I need help

  17. 17
    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.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas149 467904.jpg
    Was this step helpful? Yes | No | I need help

  18. 18
    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>".
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas163 394805.jpg
    Was this step helpful? Yes | No | I need help

  19. 19
    Tap the space bar twice to indent it by two spaces.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas164 407821.jpg
    Was this step helpful? Yes | No | I need help

  20. 20
    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.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas165 330778.jpg
    Was this step helpful? Yes | No | I need help

  21. 21
    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.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas166 888772.jpg
    Was this step helpful? Yes | No | I need help

  22. 22
    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.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas174 243728.jpg
    Was this step helpful? Yes | No | I need help

  23. 23
    Click "File" in the top left corner.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas185 352642.jpg
    Was this step helpful? Yes | No | I need help

  24. 24
    Click "Save".
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas186 519655.jpg
    Was this step helpful? Yes | No | I need help

  25. 25
    Double-click the file on the desktop to open it in a default browser.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas190 414593.jpg
    Was this step helpful? Yes | No | I need help

  26. 26
    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.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas191 896585.jpg
    Was this step helpful? Yes | No | I need help

  27. 27
    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.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas214 476451.jpg
    Was this step helpful? Yes | No | I need help

  28. 28
    Delete the "5" from the h5 tags.
    Instead of reading, "<h5>", it will read "<h>".
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas220 258413.jpg
    Was this step helpful? Yes | No | I need help

  29. 29
    Add a "3".
    It will read, "<h3>".
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas220 686411.jpg
    Was this step helpful? Yes | No | I need help

  30. 30
    Repeat for the end tag.
    It should read, "</h3>".
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas222 724399.jpg
    Was this step helpful? Yes | No | I need help

  31. 31
    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.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas225 482383.jpg
    Was this step helpful? Yes | No | I need help

  32. 32
    Click "File" in the top left corner.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas226 416363.jpg
    Was this step helpful? Yes | No | I need help

  33. 33
    Click "Save".
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas226 973381.jpg
    Was this step helpful? Yes | No | I need help

  34. 34
    Double-click on the file on the desktop to open it in a browser.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas228 138354.jpg
    Was this step helpful? Yes | No | I need help

  35. 35
    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.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas230 64434.jpg
    Was this step helpful? Yes | No | I need help

  36. 36
    Close the browser by clicking the "x" in the top right-hand corner.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas241 303243.jpg
    Was this step helpful? Yes | No | I need help

  37. 37
    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.
    Format HTML5 code so that it is easier for a person to read and later edit or update.mp4-canvas244 856221.jpg
    Was this step helpful? Yes | No | I need help

  38. 38
    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.
    Was this step helpful? Yes | No | I need help

    Advertisement

Video: Format HTML5 Code for Easy Reading and Editing

Comments

VisiHow welcomes all comments. If you do not want to be anonymous, register or log in. It is free.




Grimm
Featured Author
811 Articles Started
3,555 Article Edits
154,415 Points
Grimm is a featured author with VisiHow. Grimm has achieved the level of "Colonel" with 154,415 points. Grimm has started 811 articles (including this one) and has also made 3,555 article edits. 2,069,000 people have read Grimm's article contributions.
Grimm's Message Board
Grimm: Hi, my name is Grimm.
Grimm: Can I help you with your problem about "Format HTML5 Code for Easy Reading and Editing"?
 

Article Info

Categories : Software

Recent edits by: Eng, Amanda, Grimm

Share this Article:

Thanks to all authors for creating a page that has been read 216 times.

Do you have a question not answered in this article?
Click here to ask one of the writers of this article
x

Thank Our Volunteer Authors.

Would you like to give back to the community by fixing a spelling mistake? Yes | No