DEV Community

Cover image for 5 HTML tags that you might don't know.

5 HTML tags that you might don't know.

Dilshad0404 on February 22, 2022

Welcome to my first ever blog page ๐Ÿ˜€ hope you will enjoy and get knowledge๐Ÿ“™ Talking of html we all know html more or less. Ev...
Collapse
 
thumbone profile image
Bernd Wechner

Some tips on writing articles:

  1. Never represent code in an image, always use three backticks. Markdown supports that elegantly with language senstive markup. For example:

    This be <abbr title="Hypertext Markup Language">HTML</abbr>
    

    which comes from this markdown (which you write in your aritcle or comment):

    ```html
    This be <abbr title="Hypertext Markup Language">HTML</abbr>
    ```
    

    The difference is and the deep irony here (which I'll get to) is that three backticks are accessible (they maintain the semantic content for readers and access to the contents). The irony being that abbr is not a tag for underlining at all, you have misunderstood, or at least misrepresented it. It is a tag for adding semantics to the page to tell a parse or reader that this is an abbreviation (with an expansion). In fact it's likely that the specification does not define the renderig at all and it's a browser choice how to render they abbreviation and how to provide access to its expansion.

  2. If you want to provide live samples, large white-space-laden images are not a good look. Consider using codepen.io. For example:

    codepen.io/bernd-wechner/details/y...

  3. When introducing abbreviatons like tag names, I counsel strongly adding explanatory expansions. For example, it worth stating the the BDO tag is for Bi-Directional Output.

For a first ever article, thumps ups ๐Ÿ‘. I mean only to provide supportive and encouraging feedback, not criticism.

Collapse
 
paulknulst profile image
Paul Knulst

Unfortunately, I have to disagree with number 1.

Using code block formatting with Markdown is not always the best choice. It depends on the reason why you display the code.

If a reader should copy your code you can choose to provide a markdown code block.

But if you only want to demonstrate your code because you explaining something like @dilshad0404 did here in the article I would suggest using pictures.

The reason for that is that pictures will be resized in relation to the display size. This means that you will see everything on every device.

If you are using Markdown code formatting there will be a scroll bar that could feel weird for a reader.

To support both, I would suggest taking a fancy readable picture and providing an external GIST link where a user can copy the code (if needed).

I see you use VSCode and I know a nice plugin that can be used to create beautiful code pictures: marketplace.visualstudio.com/items...

Collapse
 
moopet profile image
Ben Sinclair

It's impractical to include the entire code in an alt attribute for an image, meaning that image versions of code are useless to anyone using a screen reader.

Using markdown means that the site will render the code block in a manner that matches the rest of the site. It means that (if the site supports it, which it really should by 2022) the code block will respect people's choice of theme and whether they're using a dark- or light-mode in their OS. You lose all that with an image.

Collapse
 
thumbone profile image
Bernd Wechner • Edited

We will have to disagree there. There is almost never any reason to represent text of any sort in an image. it is fundamentally disresectful fo accessibility norms, and bandwidth (minor concern). Where it has some very limited role to play is in logos and banners for example.

With true text in place your complaints relate only to the tools you'r eusing (which are real I admit, but do nt IMHO justify poor practices as work arounds). I find text code reading on my phone inordnately easier than images. As it happens I can zoom and scale either, but the markdown version typically has a button top right on my phone that opens it up as a code window and again the fonts scale and zoom as text fonts do.

I will always counsel against the use of images to convey textual information. It is fundamentally wrong, and the only justifications lrest in working around certai shortcomings of reading tools (and these evolve rapidly to meet demands in my experience in this ever changing world of ours).

Oh, and the scroll bars only seem to appear on my end when the code is wider than the screen. Sure it benefits from formatting and I do reformat (when is to wide for convenience), here and elswhere there are good Preview options as a rule. But an image also either overflows and is off screen or scales down to make the text illegible (as it does on my phone).

Collapse
 
mustafaalbazy profile image
Mustafa Albazy

Thanks for mentioning CodeSnap plugin

Collapse
 
dilshad0404 profile image
Dilshad0404

Thanku so much for you feedback i will definitely look into it and will overcome this mistake and will use markdown code block, for this I used code sandbox to test the code.

Collapse
 
dilshad0404 profile image
Dilshad0404

I really admire your suggestions and thanks alot for guiding me on a right way,I really respect your feedback next time I will make sure to overcome these mistakes, again thanku so much brother

Collapse
 
thumbone profile image
Bernd Wechner

Thanks kindly for your understanding and appreciation. Note that you can edit this article too if you'd like to improve it.

Thread Thread
 
dilshad0404 profile image
Dilshad0404

I will look into it thanks alot.

Collapse
 
fyrfli profile image
Camille

Can I just add that links to either the specification page for the tag or even MDN would be a nice addition.

Now Iโ€™m off to read up on these tags.

Thanks!

Collapse
 
dilshad0404 profile image
Dilshad0404 • Edited

I will be more than happy if you people learn and use it,
Your most welcome ๐Ÿ’—

Collapse
 
darkwiiplayer profile image
๐’ŽWii ๐Ÿณ๏ธโ€โšง๏ธ

<details> is an amazing tag.

Two tags I would add, however: <data> and the more specific <time> tags. They can be super-useful especially when combined with custom elements like <data is=json value="{'foo':'bar'}">

Collapse
 
dilshad0404 profile image
Dilshad0404

Will include them in the next post
Thanku so much

Collapse
 
techman09 profile image
TechMan09 • Edited

You missed the progress tag! I always get blank looks when I mention it. I have heard of them all except bdo, great work!

formatting replyโ€™s on mobile is horrible

Collapse
 
dilshad0404 profile image
Dilshad0404 • Edited

Thanks
I will do something related to progress tag

Collapse
 
dilshad0404 profile image
Dilshad0404

That means a lot, if it's gonna help you.

Collapse
 
camco profile image
Camco

Wow. Since when is the detail tag a thing?!? That's a great tip!

Wonderful post!

Thanks

Collapse
 
dilshad0404 profile image
Dilshad0404

Yeah sure is, thanks๐ŸŽ‰

Collapse
 
vulcanwm profile image
Medea

woah the detail tag was really fascinating to learn about

Collapse
 
dilshad0404 profile image
Dilshad0404

Hope it'll help you.๐Ÿ‘

Collapse
 
vulcanwm profile image
Medea

yeah probably will, thanks!

Collapse
 
jonaspetri profile image
Jonas Petri

Never heard of these, but they seem useful! Great post!

Collapse
 
dilshad0404 profile image
Dilshad0404

Thank you so much,
keep growing.