DEV Community

Cover image for 7 cases where we can use HTML instead of CSS

7 cases where we can use HTML instead of CSS

Jyotishman Saikia on August 11, 2021

1 Hide an element Yes! you read it right. We can hide an element using HTML. Using the hidden attribute we can hide an element. Example-...
Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Few issues:

align is deprecated so don't use that as support may be patchy.

<br> and <wbr> are not the same thing. <br> forces a break whereas <wbr> says "you can break here if you need to" to be used with a particularly long word or if a phrase will make more sense if it breaks at a certain point.

Oh and there is a typo as </br> should be <br/> or just <br> in your example. You don't open and close it as it is a self closing element.

And finally the type="color" is not very good accessibility wise so you will probably want to roll your own or enhance it a lot with WAI-ARIA.

Other than that, great tips!

Extra: Perhaps change the item numbers to headings with ## so ## 1 Hide an element as that makes the page easier to navigate for screen readers and it will look better too!

Collapse
 
ludamillion profile image
Luke Inglis • Edited

<wbr> says "you can break here if you need to" to be used with a particularly long word or if a phrase will make more sense if it breaks at a certain point.

Also handy if you are displaying a URL or similar type of string and you want to make sure it breaks at a meaningful/convenient place like a '/'.

Collapse
 
grahamthedev profile image
GrahamTheDev

+1 to that!

URLs and German (with the beautiful mega long words that break your UI when you try to implement i18n!)...I am sure that is what <wbr> was designed for, just those two use cases! 😋

Thread Thread
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Nah, pretty sure URLs were an afterthought. <wbr> was added just for German i18n.

Thread Thread
 
roelroel profile image
Roel de Brouwer

Or Dutch. But in the Netherlands many people have the English disease where they write spaces when they should not. Sometimes this unintentionally totally changes the meaning of a sentence. F.e. "zoete witte wijnprofessor".

Thread Thread
 
dannyengelman profile image
Danny Engelman

Niets mis mee.
Is een blanke vinoloog die universiteitsstudentjes wat zijig lesgeeft

Collapse
 
riidom profile image
riidom

You don't get a hyphen though, which you want when you break up a long word. I'd rather use &shy; here. <wbr> looks more useful for URLS, imo.

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

Don't forget del/ins. Using elements because of how they are displayed on the browser instead of because of their meaning (semantics) is not a good use of HTML, and can be bad for usability/accessibility too.

Collapse
 
veztar profile image
Jelle de Bruijn

Now I know why align is not working in my divs ( it is working in the

    statements though)
Collapse
 
jyotishman profile image
Jyotishman Saikia

hi ! Thanks for the advice and the feedback.

Collapse
 
grahamthedev profile image
GrahamTheDev

No problem, could you fix the article to include / adjust things based on the advice?

People who are new may read the article and learn bad practices and never read the comments!

Thread Thread
 
jyotishman profile image
Jyotishman Saikia

Agree on that ! I will make the adjustments.

Collapse
 
afif profile image
Temani Afif

can you please remove react and JS tag from your post? they are irrelevant here

Collapse
 
jyotishman profile image
Jyotishman Saikia

Hi Temani! I added those tags so that react js and JS interested folks can also read this article as these points are very basic .

Collapse
 
afif profile image
Temani Afif

tag should be used to refer to the content and not to attract people. I wanted you to remove them before asking a moderator to do.

Collapse
 
aoussiadmehdi profile image
Mehdi Aoussiad

I think there is no problem on adding those tags. Also in React, you can use these HTML tags in JSX.

Collapse
 
afif profile image
Temani Afif

The tags should reflect the content and only the content. The post is only about HTML & CSS. The fact that HTML is related to react, JS, Boostrap, Vue, Angular, etc etc is irrelevant to the tagging system.

Collapse
 
grahamthedev profile image
GrahamTheDev

As far as I can see the theme is the culprit as the outline is set to 0 on focus.

By default the summary element will receive focus and have a focus indicator and that is the bit where you should add custom focus indicators. Unlike tabs the content of a details element should not be focusable (unless it contains a focusable item of course!).

No need for any WAI-ARIA on this one, the semantics and relationships are built in (a rare unicorn element that pretty much works out of the box!) - although the accessibility tree does look a little strange on this custom component, need to have a look at it on main computer as I can't see what it is doing...but that could be related to the next point:

Also the example doesn't seem to work, it looks like something is going wrong with the code-sample component and leaking invalid JS into the document.

Nice spot @lukeshiru , I hadn't spotted the focus indicators didn't work!

 
grahamthedev profile image
GrahamTheDev

Ah, submitted a report, I haven't used GitHub in years so apologies if the report is poor, plus I can't even remember how to tag it so I will leave that to you 🤣.

Yes I am aware I am a strange developer!

Collapse
 
ludamillion profile image
Luke Inglis

While you can use the progress element with JS it's not very useful for most progress use cases without a way of updating the value attribute.

Collapse
 
moopet profile image
Ben Sinclair

Do you mean, "without JS"?
progress is fine without dynamic updates. Imagine something saying, "your profile is x% complete" or "you're on page 9 of 32 of this simple government tax form".

Collapse
 
ludamillion profile image
Luke Inglis

I did mean without thanks for the correction. Yes the progress element is still useful without dynamic updates. That's why I said 'most progress use cases'. In my experience (and I expect many other people's) most of the use cases for a progress bar (including the implied use case in the article) is to provide dynamic feedback for an ongoing process.

It is important to note the non-dynamic use cases though so thanks for that. They are definitely semantically meaningful use cases and progress is the best element for those too.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

HTML allows this tags (some of them are deprecated, take care) for the use-case of html content generators, such this kind of textareas where you can type, hit bold, new line, italic and so buttons for a user to get a WYSIWYG interface.

If you use them on a different context it may be tricky as forcing some of those statements on a dynamic content will certainly produce undesired output effects depending on the client's viewport.

Collapse
 
jyotishman profile image
Jyotishman Saikia

Thanks Joel! Really appreciate your feedback.

 
jyotishman profile image
Jyotishman Saikia

Hi Luke! php and node are complete different things.
But a person who works on ReactJS are assumed he is familiar with HTML CSS.
So, lets leave this tag for now. Interested folks can read this article

Collapse
 
vinthefantastic1 profile image
vinthefantastic1 • Edited

I like the simple accordion tip. That may come in handy very soon for me.

Collapse
 
jyotishman profile image
Jyotishman Saikia

Thanks Vinit ! Glad you liked.

Collapse
 
suvelthedev profile image
suvel-the-dev

I never knew "Accordion" is something that we can achieve through just html. Thanks for the info!

Collapse
 
jyotishman profile image
Jyotishman Saikia

Thanks Suvel ! Glad you found something new through this article.

Collapse
 
jyotishman profile image
Jyotishman Saikia

haha! Thats true Jordan.