html tips and trick
your most know
Here are some html tips and trick your most know It help and Html one liners code.
Tooltips
With the title attribute you can easily add tooltips to provide extra information to your user.
Code example
<p title=”like”> post </p>
Check out this post… “HTML for beginner 2022 “.
Download
The download attribute is used. When you want user to download the link instead of navigation to the file or link
Code example
<a href=”logo.png” download>
Text direction
With the di=”auto” the browser will change the text alignments per the language of the content
Code example
< dir=”auto”> this text is following dir= auto</p>
Content editable
You can make any content editable by settling the contenteditable attribute to true.
<p contenteditable=”true”> this is a paragraph click the button to malreditable.</p >
Basic accordion
Wrap your accordion element with details element and for the title use the sumay element and p tad for main content!
Code example
<details >
<summary> the summary heading </summary>
<p> the is a simple text where u write all your content</p>
</details>
tips
Accept multiple input values
You can use the multiple attribute to accept multiple value for your files and email addresses . The user experience is not that good with type=”email”
Code example
<input type=”email” placeholder=” avrg@gmail.com, fusas@yahoomail.com, wfw@simple.com “>
2Creating a slide with html
<input type=”range” min=”1” max=”100” value=”80”>
meta tag HTTP-EQUiV
The meta tag HTTP_EQUIV u can use it to refresh or redirect to a page after a certain time u set.
Code example
<meta HTTTP-EQUIV=”refresh” content=”30”>
The above code is use to refresh the page after 30 seconds
<meta HTTTP-EQUIV=”refresh” content=”5; https://www.moondev.com.ng ”>
The above code it will redirect to specified page or website after 30 seconds
disable right click
Disabling right click on the element
Code example
<p oncontextmenu=”return false” > hello word</p>
The below code is to disable right click on the hole of the body of the content.
<body oncontextmenu=”return false” >…</body>
use focus –with
Html:focus-within it improve the scroll speed of find in page in the browser.
Code example.
Html:focus-within { scroll-behavior: smooth: }
2 thoughts on “html tips and trick”