Welcome to my first ever blog page 😀 hope you will enjoy and get knowledge📙
Talking of html we all know html more or less.
Ever heard about these 5 awesome html tags which could be helpfull for you in your next project!
- DETAILS TAG. The details tag helps you to hide or show some information/sentence behind your heading or subheading,which helps you to make a small web page having long information just on button's click.It's like having a hide and show button without using JS.
by writing the above syntax you will se something like this.
and by clicking on the arrow like button,the hidden details will show up.
2.BDO TAGS.
The bdo tag can change the direction of a sentence or word sometimes helps to make some fun web pages and can add some funky effects.
the syntax would be like:-
whatever you'll write inside "</bdo" will go right to left.
3.ABBR TAG. The abbr tag is something which can highlight any word,It's like underlying something on a web page without using css.
you can see above there inside abbr there is title and it has the full form of WWW(world wide web).
but on the web page you can se only www is underlined or highlighted.
4.SAMP TAG. The samp tag is used to display some information in monospace font as a system output of any program like a warning or alert.
After applying the above syntax you will see something like this in the browser.
5.KBD TAG . The kbd tag is used to diplay some keyboard inputs in the webpage like showing WIN+E can open my pc.
the syntax would be like:
any keyboard key or keyboard shortcut could be written like in a monospace font format by using kbd tag.
Finally! that's enogh for the topic wish you understood the use of these mentioned html tags and I hope you'll use them in your next projects.
Thank you so much, if you enjoyed reading the post you can give me a heart💓.
Top comments (23)
Some tips on writing articles:
Never represent code in an image, always use three backticks. Markdown supports that elegantly with language senstive markup. For example:
which comes from this markdown (which you write in your aritcle or comment):
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.
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...
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.
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...
It's impractical to include the entire code in an
altattribute 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.
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).
Thanks for mentioning CodeSnap plugin
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.
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
Thanks kindly for your understanding and appreciation. Note that you can edit this article too if you'd like to improve it.
I will look into it thanks alot.
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!
I will be more than happy if you people learn and use it,
Your most welcome 💗
<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'}">Will include them in the next post
Thanku so much
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
Thanks
I will do something related to progress tag
That means a lot, if it's gonna help you.
Wow. Since when is the detail tag a thing?!? That's a great tip!
Wonderful post!
Thanks
Yeah sure is, thanks🎉
woah the detail tag was really fascinating to learn about
Hope it'll help you.👍
yeah probably will, thanks!
Never heard of these, but they seem useful! Great post!
Thank you so much,
keep growing.