Good Clean Structured HTML

Hello, I am wondering what the best structured HTML looks like,
like an example of how to properly right it, (in a organized sense)

The best structured HTML is going to vary, depending on the task at hand. We can’t really answer this question :slight_smile: .

Ok well how about something like indentation, is it good practice
to indent for good readability?

Like:

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>

Personal preference really, there is no one best practice here.

1 Like

I always format/indent the html because it makes working with it so much easier and it becomes easy to spot missing tags etc. If you don’t have an editor that formats then just stick the code into a codepen and click tidy and it will indent it nicely (or google html tidy)

3 Likes

You could look at https://html5boilerplate.com/ - but even with this, you will find circumstances where it may not be suitable for your needs.

Edit: Suitable ‘out of the box’ that is. Even with the Noddy crap I do, I’ve found reason to change or query things within it.

http://users.skynet.be/mgueury/mozilla/

I prefer using the above FireFox Addon because not only does it give the option to format code it also validates a web-page in the background.

A Firefox top-right red, amber or green icon indicating problems, warnings or successful validation after rendering the web-page. Viewing web-page source activates a popup with three windows; source, errors/warnings and helpful hints. Numerous other options are available in the popup and well worth investigating.

The main reason I like this FireFox Addon is because it is fast, unobtrusive, W3.ORG compliant, regularly updated, FREE and worthy of a generous donation.

Remind me to check this out when I get home…

Yes I used to use that a lot until it stopped working. I believe you need the developer edition of Firefox now and enable a flag to install it.

@PaulOB

I am using Linux and it installed without any problems.

I believe you run a Windows operating system?

Perhaps if you mentioned your setup others will be able to suggest solutions.

I have 2 computers with windows (windows 10 and windows 7) and 2 macs running the latest mac os systems. I don’t however have linux.

The solution is to update to the webdeveloper edition of Firefox and install the unsigned validation extension by changing a flag to allow unsigned extensions.

I uninstalled the Firefox webdeveloper version on my other PC computer because it kept crashing and because it was actually rendering differently to the normal Firefox which made it no good for testing as I ran into some differences between the two. That’s when I decided to use chrome as my main browser :smile:

I don’t really need the validator extension as my editor will do that anyway but I may when I get time download the developer edition of Firefox and see if it has improved.

1 Like

Same here. But I looked at it again just after John posted the suggestion, and installed it no bother (via Firefox Add-ons) for Firefox 43 on Ubuntu Linux. (That said, Firefox crashed a few minutes ago, which it hasn’t done in a very long time, but that may just be coincidence… I’ve just realised that was due to my own stupidity and nothing to do with the extension. )

1 Like

Thats what I figured good to know

You will do it like this.

<!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    </body>
    </html>

Thanks

Post edited by TechnoBear to remove fake signature

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.