How to Avoid Drowning in Ocean of HTML Codes

[Tom D]

HTML can get messy, and become very hard to read.

Especially when it's mixed with JavaScript and PHP (database driven web app)

it's like a thousand knitting threads totally tangled together.
When you are writing a complex Html page, how do you handle it ??

 

[Gregory Thompson]

HTML can get messy, and become very hard to read.
When you are writing a complex Html page, how do you avoiding drowning in an ocean of HTML codes ??

It has been a while, but there's a code that is used to make comments that can only be seen by the coder or under view source in the browser.

These comments are supposed to act as headers and bookmarks so the coder can identify that this section of code does "this"

 

[chevyontheriver]

HTML can get messy, and become very hard to read.
When you are writing a complex Html page, how do you avoiding drowning in an ocean of HTML codes ??

The worst HTML code is put together by ‘helpful HTML creation apps’ and it is pretty much unreadable. There was a useful little program available on Linux computers called ‘tidy’ that could clean up a lot of mess.

Oh, and comments in the code are always your friend. As was already pointed out.

 

[Tuur]

HTML can get messy, and become very hard to read. it's like a thousand knitting threads totally tangled, or like
drowning in an ocean of HTML codes.
When you are writing a complex Html page, how do you handle it ??

Like Gregory Thompson said, it's been a while. I used to start simple, then get more elaborate. I've used Bluefish (tm) as an editor and Arachnaphilia (tm), the latter to validate code. Think I used another code validator, but would have to look through my files. I'm not sure because after I got the general web page formatted like I wanted, I used it as a boilerplate for the rest and for maintenance.

I used plenty of comments telling what which section did, like "This is the menu." Or "Such and such goes here." For the style sheets, that came in real handy. If you ever have to go back in to maintain it, comments help a great deal.

 

[Tuur]

The worst HTML code is put together by ‘helpful HTML creation apps’ and it is pretty much unreadable. There was a useful little program available on Linux computers called ‘tidy’ that could clean up a lot of mess.

Oh, and comments in the code are always your friend. As was already pointed out.

What to have some fun? Take a word processor document, export to HTML, and take a peek at it.

 

[trophy33]

HTML can get messy, and become very hard to read. it's like a thousand knitting threads totally tangled, or like
drowning in an ocean of HTML codes.
When you are writing a complex Html page, how do you handle it ??

Do not write one complex html page, write an online app composed of many simple html pages and integrate them into one during the build time (you can use for example Webpack for building).

And instead of creating and styling every button, table, form etc. by yourself, use some UI library (for example Material UI) and potentially also some JS framework, for example React, Angular or Vue.

Your project structure should correspond to your website structure so that you can orient in your code intuitively and easily. Small files in well-named directories. There are even some standards of how to structure projects build in specific frameworks.

Using a more advanced IDE may help you with things like bulk refactors or AI integration. You can use many advanced IDEs for free, like for example Pulsar Edit or VS Code.

 

[pgp_protector]

I don't do a lot of front end coding, and when I do it's in ASP not HTML

 

[Tom D]

The worst HTML code is put together by ‘helpful HTML creation apps’ and it is pretty much unreadable. There was a useful little program available on Linux computers called ‘tidy’ that could clean up a lot of mess.

Oh, and comments in the code are always your friend. As was already pointed out.

I tried a web version of 'Tidy', it's not very helpful. I could do the tidying myself.

What we need is to modularize the code as much as possible.