Browse DevX
Sign up for e-mail newsletters from DevX


HTML Basics: Style and Structure : Page 2

Learn some basic rules for making your HTML files easy to reuse and edit.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

File Creation Guidelines
One of the first steps, in learning how to create Web pages, is to learn some simple structural guidelines. Following a few simple style and structure guides makes your site both consistent and legible. There is no single "right" style or structure to use (as long as you are using the tags correctly of course!). What is most important isn't that you follow our recommendations—it is that you are consistent in your own files, that way:

  • When you're building a new page and troubleshooting a problem, a clean style makes it easy to both see what you've done and make changes.
  • When you come in to edit a page three months after you created it, you can quickly see what you did and how you did it, without having to recreate your thought pattern or walk through the file character by character.
  • If someone else needs to modify it they can understand your code and make the necessary changes.
Tip #1: To Each Its Own Line

In general, keep each tag on a separate line. This makes it easy to see what is going on. Codes don't become lost in a morass of type.

The exceptions to this are: in-body tags, such as making a word bold, and the line break command (<br>). The logical place for both of these are with the text they define.

Ask yourself: in which of these code examples is it easier to find the errors (and there are several errors!)?

In this one?

<h3>Getting Your Own</h3><p>Widgets offers <b>many, many</b>the great things including:<ul><l>wigglers<li>jumpers<li>creepy-crawlies</ul>.<q>To place an order call our 1-800 number.

Or in this one?

<h3>Getting Your Own</h3>
Widgets offers <b>many, many</b>the great things including:
To place an order call our 1-800 number.

Here are the errors—did you see them all?

Tip #2: Use Comments

You can add comments to your file. The comments will be ignored by HTML but they can help you add information about your file or what a piece of code is doing.

The code tag looks like this:


Everything between the opening <!-- and the closing --> is invisible to the web browser.

Tip #3: Lists Should Be Legible

Lists, especially nested lists, are hotbeds for accidental errors. Keeping lists legible makes using them much easier.

  • Indent nested lists. Use the tab key to make a quick and easy indent. Remember, HTML ignores multiple spaces, so indenting in your file won't affect the way the page displays.
  • Keep tags on separate lines.
  • Consider adding an extra return to "pull-out" lists visually.

Both of those examples will display exactly the same on a Web browser—but which do you find easier to read and edit?

This one?

<p>Halloween gifts: <ul> <li>wigglers <ul> <li>corpse white <li>choked blue </ul> <li>jumpers <li>creepy-crawlies </ul> <p>Easter gifts: <ul> <li>fuzzies <ul> <li>chickie yellow <li>bunny beige </ul> <li>floppies <li>cottontails </ul>

Or this one?

Halloween gifts:
      <li>corpse white
      <li>choked blue

Easter gifts:
      <li>chickie yellow
      <li>bunny beige

Things That Are Wrong:
  • The mistyped list tag (<l> instead of <li>)
  • The mistyped paragraph tag (<q> instead of <p>)
  • There is an extra "the" in the phrase "Widgets offers many, many (the) great things"

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date