Write HTML the HTML way, not the XHTML way

I am not sure if I will be dropping the closing tags, but thought this was an interesting article nonetheless.

write-html-the-html-way-not-the-xhtml-way

4 Likes

It is an interesting article. Heā€™s right. There a few things that I do because I got used to in the XHTML era and I even today I consider them to be best practices. Perhaps I should review the HTML documentation and refresh my knowledge and question my habits.

3 Likes

I always use closing tags and canā€™t see me changing that. IIRC they have always been optional for </p>, </li> etc, but good practice. I havenā€™t auto-closed <img>, <hr>, <br> etc since HTML5 came along.

3 Likes

I read that article and a lot of those things (at least to me) make the initial coding faster but may make future debugging/changes harder.

4 Likes

The problem with the ā€˜looseā€™ approach is that you actually make it harder for beginners rather than easier.

Consider this example taken from that article.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul>
  <li>Praesent augue nisl
  <li>Lobortis nec bibendum ut
  <li>Dictum ac quam
</ul>

The list doesnā€™t need a closing tag and therefore beginners would expect that they could feasibly do this as well:


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div>
  <div>Praesent augue nisl
  <div>Lobortis nec bibendum ut
  <div>Dictum ac quam
</div>

However the code above will render as 4 nested divs instead and completely break the layout as seen in this recent forum question where the OP has made the same mistake.

So a beginner now has to remember which tags can be left open and which tags canā€™t be left open. Itā€™s much easier to say close all but empty tags.

Even with the list example I would be hard pressed to know if this would work.

<ul>
  <li>1 Praesent augue nisl
  <li>2 Lobortis nec bibendum ut
  <li>3 Dictum ac quam
    <ul>
      <li>Praesent augue nisl
      <li>Lobortis nec bibendum ut
      <li>Dictum ac quam
    </ul>
</ul>

Is the list item 3 automatically closed before the ul and new list item opened automatically? (Itā€™s not but I had to check first :))

All the things that html5 allows are all the things that went wrong with html at the start. Not knowing when to quote and when not to quote and what attributes are needed etc. Lower case, uppercase, mixtures of both some attributes quoted, some not quoted and so onā€¦ In the end it leads to sloppy coding without structure and that is bad for everyone.

Iā€™m not against a consistent use of minimal html but Iā€™ve seen it so many thousands of times in the forum lead to unreadable and broken code by the less experienced.:slight_smile:

In the end those that know what they are doing can do what they like but the less experienced always tend to get it wrong time and time again. At least it keeps us ā€˜in workā€™ on the forums :slight_smile:

8 Likes

What is unreadable to a beginner is just about everything. The questions about not understanding basic JavaScript syntax all over this forum is an example. Professional programming is not being spoon feed snippets on a forum that rarely take into account the whole picture. Itā€™s about delivering quality software products which requires advanced knowledge of programming, patterns, methodologies, and tools available in an ecosystem. I could really care less about opening or closing tags. However, when it comes to readability coding for beginners is complete none sense unless you are writing code specifically to teach. Much of it is attributed to people not taking the time to learn foundations in a traditional sense of gradually learning a topic like programming.

While I donā€™t argue with that that, itā€™s important to remember two things. Firstly, that everybody was a beginner once, and secondly that these forums are not only for professional programmers, but for anybody with an interest in web development. We have many members who only need and want enough knowledge to run a simple site as a hobby.

We aim to cater for everyone, at whatever level they may be, and whether they are professionals or amateurs. Our only requirement is that folk are willing to learn. Their reasons for learning are their own.

In that context, coding for beginners is, and will remain, very relevant here.

5 Likes

Readibility not only affects beginners, it also affects professionals
The easier to read, the better. And if in order to do so you need to code like a beginner wouldā€¦ make it so.

6 Likes

What Iā€™m picking up here is that @windbeneathmywings seems to expect that the audience aspires to be professional programmers. That is not necessarily the case here.

If we attempt to meet them from where we aspire to be, successful communication cannot occur because they are not at our level. We canā€™t give them anything useful because they are not necessarily ready for it.

There is a much wider range of people that we deal with here, and to be successful at communicating with them we must meet them where they are at. Itā€™s only when common ground is found that successful guidance can then occur from there.

3 Likes

Iā€™ve been coding a long time and remember taking a COBOL course in college that I had to use punch cards. That was a pain in the you-know-what and remember one time walking down the hallway dropping the cards all over the floor before I could get it read in. What a pain sorting to make sure I put them back in the same order.

Anyways, HTML is very loose when it comes to the markup, but I close tags other than single elements like img as an example. I have had in the past where the HTML act funky especially when it comes to CSS, so I close the tags off and besides I like having neat code. I like IDEs that format the HTML/code and flags syntax errors right of the bat when it comes to code.

2 Likes

Iā€™m amazed that HTML and CSS are both so sloppy especially since computers are basically binary driven. I prefer to know when Iā€™ve made mistakes rather than having the system sweep them ā€˜under the carpetā€™ and making a best guess at my requirements.

Perhaps it is time for a HTML and CSS rewrite to optionally highlight incorrect syntax as mentioned in the following post:

2 Likes

When not offering professional services or building professional software I agree.

In my experience when people complain about code readability it is because they donā€™t know how to use proper debugging tools or lack a fundamental understanding of more advanced methodologies.

I donā€™t complain when I donā€™t understand something. I learn about it. I know there are a lot of complainers out there though.

fair enough

You may be right and the people that youā€™re looking at your code are in the process of learning the basics. It is up to you to show consideration and understanding, not only for them, but for anyone that may read that code in the future. It doesnā€™t do any harm and it can help even yourself.
And not eveyone will be as proficient as you are nor they have to.
Some people are just causal programmers. They know how to program and do their stuff, but they donā€™t do it as an everyday job. And therefore, they will lack experience with the tools and the shortcuts yet, with patiences and time, they will get the job done and move on to their regular work.

Expecting that eveyone knows what you know makes no sense to me. You know more than many people, but no matter how good you are, youā€™ll find plenty of people that knows more than you.

Anyway, may I remind you that we were all unexperienced and newbies once? I am not going to say learners because, no matter how an expert you are, you always keep on learning.

At the end of the day, how you code is up to you and your approach is as good as mine. I simply care about the people that may look at what I did later. Because they will be the ones to deal with it and I may not be there to explain what I did. I simply donā€™t like to assume how much the person behind me knows.

Anyway, this has been off-topic enough, me thinks.

5 Likes

Translation of the quoted article as I understand it: ā€œWhy do well when you can do badly?ā€
Or in the same logic, ā€œwhy learn spelling rather than writing with typos?ā€

Programming languages are all evolving towards standards, which improve their readability and logic. I work daily on code written by others, and when it is badly written ā€¦

I donā€™t see what the omission of closing tags does either. A lighter code? Absolutely not, because the HTML engine will do the work for you.

On the other hand, if the closing tags are omitted I can no longer folder the code parts in my editor, I no longer have the visual markers that show me the beginning and the end of the tag, I can no longer select the tag with a keyboard shortcut.

7 Likes

I agree with @gillesmigliori. I find having opening and closing tags makes it very much easier for me to see at a glance where elements start and end. (And if need be, I can highlight an opening or closing tag and my editor will show the matching one.) I would always close elements, whether HTML requires me to do so or not.

Then again, my friends laugh at me because I always write whole words, and generally whole sentences, in emails and texts. Why wouldnā€™t I? Itā€™s how I learned to read, and while I can decipher messages with abbreviations and a lack of punctuation and capitalisation, I see no point in abandoning the tools which aid communication for the sake of a few seconds saved in typing. My approach to HTML is much the same. smile

6 Likes

I thought I might be the only one left not at least putting an effort forth to use proper grammar in text messages. Though Iā€™m by no means a grammar expertā€¦ I probably know code better than the grammatical constructs of the english language.

Iā€™ve been using closing tags my entire career. I donā€™t see any need to change. However, it is a new world orderā€¦ maybe that means closing tags in html are a thing of the past like many other things.

I prefer to toss people in the deep end and see how they swim.

Thatā€™s because developers are inherently lazy and want to key as little as humanly possibly. Iā€™ve noticed a trend with several development languages (C#, ES6 and even Python being prime examples) where the languages have trended towards stripping out the things which to experienced developers are largely ceremonial items, but which to beginners are fundamental blocks on which to start learning from. Those efforts to make everyday development easier have made the barriers to entry that much higher.

And my experience with a child going into the industry (college age now) and from working with students here is they arenā€™t teaching the building blocks anymore. They are shown patterns and are expected to understand them without showing them the context of why and how they are to be used. I spent more time teaching my son WHY a pattern was chosen or HOW it worked over whenever he got stuck.

The downside of the internet is that nothing goes away and older, more archaic sources often come up to the top of searches when trying to learn something. So you may not be learning the best approach. How many searches return W3Schools (who, giving them props, have improved over the years) over MDN, which is a better, more current resource? Or how many old PHP articles/tutorials are returned for any database pattern you can think of?

4 Likes

I stumbled across adding after:2021 to searches which returns mostly results written this year. Month and day can also be added to refine the results.

Interesting.

I usually use the Tools option to limit those done in the last month myself. But you have to know how to manipulate search parameters, which is not a straightforward thing to do.

2 Likes

I canā€™t relate to much of that. I block out w3 schools and php development. When learning new languages, frameworks I read the documentation associated with those things. For example, when learning about a new service in aws I read the aws documentation about the service. I do need to reference from time to time new js apis like mist recently mutation observer. In that case I know moz is the place to go. I donā€™t listen to YouTube videos and proceed with caution with anything outside docs published by sources like tutorials. I think tutorials are one of the worst things to learn programming. I would much rather recommend a sitepoint course or book over stringing along tutorials.

The last two years I have been working with a small team. I havenā€™t had much exposure to new bloods. So I canā€™t say or comment on their capacity professionally. It does seem though people are becoming more lazy and want things handed to them. However, companies see through this and donā€™t want to hire inadequate employees. Even though we are in demand no one wants to hire 75% of the people on this forum. Imagine how terrible your job would be if you not only had to be responsible for own work but also feed line by line JavaScript code to someone hired which you had little say. No you need to take on but inky your workload but spoon feeding line by line a new blood. That doesnā€™t happen in this industry. We just donā€™t hire them.