What is the most common HTML element? Options

[symakhan]

Hey Guys

As a beginner to web design and development, I have recently discovered HTML - HyperText Markup Language. This language is composed of elements that are symbolized by tags and enclosed in angle brackets, which assist in forming the structure of an online page. Considering my newfound knowledge on HTML, I am curious about certain questions regarding this markup language.

What is the most common HTML element?

Is there a specific order in which HTML elements should be used or can I use them as I please?

Are there any tips for making sure my HTML code is written accurately?

How can I debug my HTML code if it isn't functioning properly?

Where can I find coupons and deals for HTML-related courses or products?

I hope to receive some feedback from the web design and development experts here. Thank you!

[pandy]

What is the most common HTML element?

Dunno. But I hope it's P. At one point, when CSS took of, I wouldn't be surprised if it was DIV and SPAN. But that's not good. You should use the elements that are appropriate for your needs. If it's a paragraph, use a P. If it's a table, use TABLE.

Is there a specific order in which HTML elements should be used or can I use them as I please?

Not really, more than the basic structure HMTL - HEAD - BODY.
https://htmlhelp.com/reference/html40/structure.html

And also when it comes to structures that consist of several elements, like tables and list. The elements that make up a table or a list must come in a certain order. Or it's really about containers, see below.

Some may argue that headings should come in a certain order and that levels shouldn't be jumped, but I think the jury still is out about that.


And read up about the different elements, what they stand for and how they can be used. If you look an element up in the HTML reference here, take for example P, you can read it's for paragraphs. But at the top you can also see what other elements it can contain and be contained in.
https://htmlhelp.com/reference/html40/block/p.html


This container stuff is important. HTML is all about that. P can only contain inline elements (text level elements). If you click that link in the reference you can read about what inline elements are and how they differ from block level elements.

If you get these things down pat and validate (see below) you are on your way.

1. Elements are containers. They contain text and/or other elements. The top dog is HTML. It contains the whole document. HEAD contains meta information. BODY contains the visible content on the page including all other elements you may use for the visible part of your page. That's really the only elements where order is important. HEAD goes before BODY.

2. There are rules for what other elements and element can contain and be contained in.

3. What's block and inline is good to get an understanding for too.

Our reference is only HTML 4. But when it comes to these things most are still valid for HTML 5 and it's easier to use and understand than the full spec at W3C.

Are there any tips for making sure my HTML code is written accurately?

Sure. Use the validator. And validate frequently while you are learning so you don't end up with a long document with 184 error the may be hard to localize.
https://validator.w3.org/

How can I debug my HTML code if it isn't functioning properly?

The validator.

Where can I find coupons and deals for HTML-related courses or products?

No idea. Black Friday? All info is available online for free. You don't need other programs than a text editor. There are better ones around, of which some cost money, but to start with you can use the one you already have on your computer. Don't use word processors like Word and the like.

[Jason Knight]

[quote name='symakhan' date='Jan 20 2023, 07:30 AM' post='144864']
What is the most common HTML element?
[\quote]
It's probably DIV, and that's a problem. See, DIV is "meaningless", aka "semantically neutral". It doesn't change or imply meaning to the content it wraps. The entire point of HTML is to say what things are -- structurally and grammatically -- so that the user-agent can best convey that meaning. As a rule of thumb if you're choosing tags, classes, or ID's based on what you want things to look like on "screen user-agents" (browsers) you're using all the wrong HTML for all the wrong reasons.

A browser is a UA but a UA isn't always a browser. Screen readers, braille readers, TTY, search engines. NONE of those give a flying purple fish about what you're trying to make it look like on a browser!

Thus both DIV and SPAN should be your last resort after you've expended what you can do with the tags that actually mean something. Or to group tags that mean something so you're not wasting time setting classes on all of them.

[quote name='symakhan' date='Jan 20 2023, 07:30 AM' post='144864']
Is there a specific order in which HTML elements should be used or can I use them as I please?
[/quote]
@pandy has it right that you need to learn the "contains" and "contained in" rules. One of the biggest mistakes beginners make is just tossing tags in without any concern for that. For example LI can only be children of MENU, UL and OL, and are the only valid children of same.

https://developer.mozilla.org/en-US/docs/We...chnical_summary

See "permitted content" and "permitted parents"? Yeah, that.

Side note, as much as I've spent 20+ years pointing at the HTML reference here, it hasn't kept up with HTML 5 so... it's good to learn, but some of the information is way out of date. Thus I suggest MDN.

One of the biggest things that's poorly taught that I'm always trying to drive home is numbered heading orders. Again, the various tags have meanings. For example LI are for short bullet points or selections, if it's big enough for multiple paragraphs and numbered headings, you probably don't have "list items", you hav major SECTION.

The numbered headings are really simple to understand, which is why it's so painful to see how even alleged "experts" abuse them telling non-visual users to go plow themselves. VERY SIMPLE.

H1 -- THE heading that all sections of a document or collection of pages -- like a website -- are subsections of. Thus most of the time it should be your site title. People throwing the H1 into the a hero section, or the first major content section have failed to divine its purpose. That purpose becoming apparent the moment you use a H2 properly.

H2 -- the start of major subsections of the page, aka subsections of the H1. The first H2 on the page should mark the start of your main content if you do not have a MAIN tag.

H3 -- marks the start of a subsection of the H2 preceding it.

H4 -- marks the start of a subsection of the H3 preceding it.

Care to guess what H5 and H6 do?

This is why going down in import (up in number) you do not skip over heading depths. If you see a page with H5 that doesn't even have H4, you're looking at the pesky 3i of web development. Ignorance, incompetence, and ineptitude. Same if you see people pairing H1 + H2 for heading and tagline thus:

CODE

<!-- DO NOT DO THIS -->
<h1>Heading</h1>
<h2>Tagline</h2>

Utter gibberish A tagline is subtext, not the start of an entirely seperate page section!

H1..H6 do not mean "fonts in different weights and sizes" and if you choose them for those reasons, you're doing it all wrong! Even lowly HR means "a paragraph / subsection level change in topic" and not "draw a line across teh screen".

Which plays well with your next question:

[quote name='symakhan' date='Jan 20 2023, 07:30 AM' post='144864']
Are there any tips for making sure my HTML code is written accurately?
[/quote]
Also as @pandy mentioned there's the markup validation service. One thing to pay attention to in there is some of the "optional" information it can give you. One of the most important under "more options" is "show outline" which actually tells you if your document structure makes sense or not. A similar tool can be added to run locally by adding the "web developer toolbar" to your browser.

For example if we take your typical "framework" ignorant BS and run it through these tools you'll get something like this as the result:

https://cutcodedown.com/for_others/medium_a...rterOutline.png

Utter incompetent and ignorant nonsense, because even the people CREATING idiocy like bootcrap and failwind are utterly unqualified to write a single blasted line of HTML or CSS, much less have the unmitigated gall to tell others how to do so. What that structure should look like is:

https://cutcodedown.com/for_others/medium_a...riteOutline.png

Doing this properly allows non-visual users to use such headings as "landings", a way to quickly navigate or organize the subsections of the page.

All the tags -- even the ones that sound presentational -- have a structural and grammatical reason. Take <b> and <i> for example. There are known-nothing turds out there parroting "don't ever use those tags" and other idiots claiming the total fiction that they were deprecated 25 years ago and you should "only" use <strong> and <em>. They clearly weren't.

They do not mean "show this text in bold or italic", they MEAN "this font would be bold or italic for grammatical reasons."

EM -- with emphasis.

STRONG -- with MORE emphasis!

I -- would be italic for grammatical reasons when not emphasizing or citing text, such as a book title.

B -- would be bold for grammatical reasons such as a entity or party in a legal document.

CITE -- Cites a source.

NOT rocket science, this was 4th grade grammar school a decade before HTML was a twinkle in Tim Berners-Lee's eye. So with the state of modern education I figure that's what, 4th year college for an English major?

I think it's the biggest hurdle to jump in writing HTML "properly". Which is all "semantic markup" REALLY means, using HTML correctly, and by correctly that's saying what things are or would be, not what you want them to look like.

Failing to jump that hurdle is how some gullible fools actually get suckered into thinking ignorant garbage like bootstrap or tailwind are worth a damn, resulting in writing 100k of HTML to do 10k of HTML's job, 500k of CSS to do 32k's job, and megabytes of JavaScript on pages that might not even warrant the presence of it. And then claiming that somehow that's magically "easier"... what a joke.

Some advice, if it feels like you're writing too much code, you might be writing too much code.

[quote name='symakhan' date='Jan 20 2023, 07:30 AM' post='144864']
How can I debug my HTML code if it isn't functioning properly?
[/quote]

The validation tools can tell you if you're opening and closing all your tags properly. That is -- from an HTML standpoint -- the number one cause of unpredictable behavior. Failing to follow the rules of what tags are valid where, in what order, and failing to close a tag by accident.

Much more of a woe is when you get into your stylesheet -- saying what things look like. A lot of CSS properties still do not behave consistently cross-browser, though it is far better today than it was just a decade ago. We stopped giving a damn about IE, and it made everyone's life easier. Even if crApple's "Safari" browser is aging like milk and jokingly referred to as "the new Internet Explorer"

To that end test. Browsers are free. Thankfully as of 2023 there are only three browser engines you need to worry about. Gecko/Quantum (firefox), Blink (chrome-likes) and Webkit (Safair). And blink is a fork of webkit so the two are very similar. Though the differences grow in order of magnitude yearly since it's been over a decade since they parted ways.

Test different browsers. Test different operating systems. Test different hardware and display sizes.

Once you get the basics down, you'll find you spend more time testing than you do writing code.

This post has been edited by Jason Knight: Jan 21 2023, 11:50 AM

[Christian J]

I knew I had read about this before:

https://css-tricks.com/average-web-page-dat...llion-websites/
https://web.archive.org/web/20120613033230/...f-the-web/2005/
https://maqentaer.github.io/devopera-static...cles/view/mama/

I suppose the exact numbers depend on if you count multiple occurences of an element on a single page (but if so, how do you count endlessly scrolling Ajax-driven pages)?

[pandy]

Cool. The second one didn't load for me. In the first one one can read that TABLE is used more often than TR that is used more often than TD which is strange. In the third one it's the other way around which seems more realistic.

[Christian J]

The second one didn't load for me.

It works, but can be slow.

In the first one one can read that TABLE is used more often than TR that is used more often than TD which is strange.

Even TBODY is more common than TR. Maybe some WYSIWYG program creates broken table markup --perhaps the user deleting all rows in a table doesn't make the program clean up the remaining TABLE and TBODY elements properly? Kind of like you sometimes see things like empty <font></font> left in the markup.

In the third one it's the other way around

No it's the same, it says the frequency of TABLE is 2,894,184, but TR only 2,891,205.

which seems more realistic.

Not if they're counting pages where at least one of the element type was found (as opposed to the total number of an element on the web). If so, a table with three rows will count as a TABLE element occurence and a TR element occurence (not three).

In fact if pages with TR ocurrences were more common it would mean some pages contained at least one TR element but no TABLE, which seem equally strange as a TABLE with no TR.

[pandy]

The second one didn't load for me.

It works, but can be slow.

Yeah. I did't notice it was wayback so I closed the window when it was blank.

In the third one it's the other way around

No it's the same, it says the frequency of TABLE is 2,894,184, but TR only 2,891,205.

Strange. Must have been more crosseyed than usual.

which seems more realistic.

Not if they're counting pages where at least one of the element type was found (as opposed to the total number of an element on the web). If so, a table with three rows will count as a TABLE element occurence and a TR element occurence (not three).

In fact if pages with TR ocurrences were more common it would mean some pages contained at least one TR element but no TABLE, which seem equally strange as a TABLE with no TR.

Well, do they do it that way? I confess I didn't read.

Nice to see P comes high up in the recent study.

[Christian J]

Well, do they do it that way? I confess I didn't read.

https://developers.google.com/webmasters/st...b/2005/elements says "The ten elements used on the most pages". Also, elements like HEAD (which only occurs once per page) wouldn't be the most popular one if multiple occurences of other elements where counted.

Nice to see P comes high up in the recent study.

Yeah, and also UL and LI. The table elements have really slipped compared to the older studies.

[Christian J]

In the first one one can read that TABLE is used more often than TR that is used more often than TD which is strange.

Seems they have no explanation: https://developers.google.com/webmasters/st...web/2005/tables

[pandy]

Maybe it is that way then.

[Jason Knight]

In the first one one can read that TABLE is used more often than TR that is used more often than TD which is strange.

Pretty good proof that it's bullshit, given that every table would have at LEAST one TR and TD, and the whole point of table is to have multiple TR with multiple TH and TD inside said TR.

But then 99% of the data in those three links sound to me like someone pulling numbers out their collective backsides.

[symakhan]

Hello Everyone

Last week I posted about web development and HTML. I got some great feedback from many of you, so thank you for that. Here I am sharing all the information I have gathered and experienced during my journey in web development.

1) The most common HTML element is the <p> tag which stands for paragraph. This tag defines a section of content or text on your web page. It's one of the most basic elements and is used in almost all HTML documents.

2) Yes, there is a certain order in which HTML elements should be used in order to produce valid code. The basic structure of an HTML document starts with the <html> tag and ends with the </html> tag. Within this pair of tags you will find two sections: the head section and the body section.

3) Yes! There are a few tips that you should consider when writing HTML code. First, make sure to close all tags properly. Any tag that has an opening (<TAG>) must have a closing (</TAG>) in order for the document to be valid. Secondly, use proper indentation and spacing while coding in order to keep your code organized. Lastly, use a validator to check your HTML code before you publish it online. There are many free online validators that can help you make sure that your code is written correctly and will function properly when viewed in a browser. This can be an invaluable resource for any web developer!

4) Debugging HTML code can be a tricky process, but there are some basic steps you can take to help you find and fix any errors. First, use the browser's developer tools or console to check for any errors that may have been generated when attempting to view the page.

********

I removed some links from the post that looked a bit spammy.
/Christian J

This post has been edited by Christian J: Jan 24 2023, 12:26 PM

[pandy]

3. True. But it should be mentioned that the tags for both HTML and BODY are actually optional. If they aren't there they are implied. There is only one mandatory element, and that's TITLE:

3. No, Not all elements have a closing tag. There are so called replaced elements that lack them, like IMG and BR.

5. Why pay at all when there are lots of free resources?

[Jason Knight]

3. True. But it should be mentioned that the tags for both HTML and BODY are actually optional. If they aren't there they are implied. There is only one mandatory element, and that's TITLE:

Beware omitting them can wreak havoc in trying to manipulate the DOM in JavaScript before DOMContentLoaded fires.

Just because you can do something, doesn't mean you should.

3. No, Not all elements have a closing tag. There are so called replaced elements that lack them, like IMG and BR.

I have never heard them called 'replaced elements'. That's certainly not what the HTML specification calls them. The correct term in HTML 4/prior was "empty elements" -- which was confusing since apparently <div></div> is not empty thus <div /> is gibberish and does not exist... no, not even in XHTML -- and in HTML 5 they're called "void" which... did not a blasted thing to improve matters.

I just a week or so ago wrote an article about that where I suggest a more apt name for them, "sterile". The defining characteristic of these tags/elements is that they cannot wrap content or other elements. Basically, they can't have children.

https://medium.com/codex/html-empty-void-se...ts-b859d8508d47

This post has been edited by Jason Knight: Jan 25 2023, 04:47 AM

[coothead]

. Head tag: The head tag is used to contain all the head elements in the HTML file.
. It contains the title, style, meta, … etc tag.

Are you aware that the HTML document will validate without either the head or body elements.

coothead