Some handy HTML tags can do to make things easier

HTML (Hypertext Markup Language) is a standard markup language used to create web pages. Tags are like blocks to give special semantics meaning to the content and help browser rendering. Thus, they play a very important role in SEO(search engine optimi…


This content originally appeared on DEV Community and was authored by jun

HTML (Hypertext Markup Language) is a standard markup language used to create web pages. Tags are like blocks to give special semantics meaning to the content and help browser rendering. Thus, they play a very important role in SEO(search engine optimization).

Although HTML tags is widely known and widely used, some of them have been long forgotten. In this article I’ll share some HTML tags that have helped me a lot when developing websites over the years ?

 

<summary> & <details>

The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.

The <details> tag is often used to create an accordion that the user can open and close.

image

<dialog>

The <dialog> tag defines a dialog box or other interactive components like alert, inspector, or subwindow.
image

<time>

The <time> tag defines a specific time/date. It does not render anything special on webpage but it's extremely helpful for better search engine results or custom features such as reminders.
image

<datalist>

The <datalist> tag is used to define the list of valid dropdown list for your various element and provide an "autocomplete" feature.
image

<progress>

The <progress> tag represents the completion progress of a task on a bar indicator.
image

<small>

The <small> tag defines smaller text like copyright or legal text. Although it may be perceived to violate the principle of separation between structure and presentation, but it's valid in HTML5. Therefore, please determining whether to use <small> or CSS your content accordingly.
image

 

I hope you find this helpful and don't forget to check on the cross-browser compatibility before adding more semantics to your HTML. Your webpages will become more user friendly and more machine-readable. Thank you ?


This content originally appeared on DEV Community and was authored by jun


Print Share Comment Cite Upload Translate Updates
APA

jun | Sciencx (2021-09-11T10:29:56+00:00) Some handy HTML tags can do to make things easier. Retrieved from https://www.scien.cx/2021/09/11/some-handy-html-tags-can-do-to-make-things-easier/

MLA
" » Some handy HTML tags can do to make things easier." jun | Sciencx - Saturday September 11, 2021, https://www.scien.cx/2021/09/11/some-handy-html-tags-can-do-to-make-things-easier/
HARVARD
jun | Sciencx Saturday September 11, 2021 » Some handy HTML tags can do to make things easier., viewed ,<https://www.scien.cx/2021/09/11/some-handy-html-tags-can-do-to-make-things-easier/>
VANCOUVER
jun | Sciencx - » Some handy HTML tags can do to make things easier. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/11/some-handy-html-tags-can-do-to-make-things-easier/
CHICAGO
" » Some handy HTML tags can do to make things easier." jun | Sciencx - Accessed . https://www.scien.cx/2021/09/11/some-handy-html-tags-can-do-to-make-things-easier/
IEEE
" » Some handy HTML tags can do to make things easier." jun | Sciencx [Online]. Available: https://www.scien.cx/2021/09/11/some-handy-html-tags-can-do-to-make-things-easier/. [Accessed: ]
rf:citation
» Some handy HTML tags can do to make things easier | jun | Sciencx | https://www.scien.cx/2021/09/11/some-handy-html-tags-can-do-to-make-things-easier/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.