html tips and trick

Table of Contents

html tips and trick 
your most know

Here are some html tips and trick your most know  It help and Html one liners code.  

html tips and trick

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=” [email protected], [email protected], [email protected] “>  

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

Leave a Reply

Your email address will not be published.