What exactly is a DIV in HTML?
<div>Other elements go here</div>
What is a DIV class in HTML?
By specifying a class to a div tag, it makes it easy to use the class attribute in a stylesheet file. The class is then used to perform styling tasks to the elements enclosed in the div tag.
You can check this article for more information on HTML DOM Document Objects and HTML Document Object Properties and Methods.
<div class="the-class"><a href="https://example.com">Example </a></div>
We can, therefore, use the CSS class “the-class” above to manipulate the content of the division/container (div) above.
The example above changes the color of the content in the container/div to white (#fff / #ffffff).
Normally, we can make texts, images, spans and DIVs etc clickable using the simple syntaxes below:
<a href="https://example.com">this is the text</a> /*text clickable*/
<a href="https://example.com"><img src="https://example.com/image.jpg" /></a> /*image clickable*/
<a href="https://example.com"><div>the div elements</div></a> /* DIV elements clickable*/
But making the DIV elements clickable may not work in some cases. In WordPress, for example, when using page builders like WPBakery , it may not work. Unless you use raw HTML code.
<div class="the-class" onclick="window.open('https://example.com')" style="cursor: pointer;">Hyperlink Text</div>
– Opens the link in a new tab “on click”
"style=" cursor: pointer;"
– This is a CSS style that adds a “hand pointer” to the DIV on mouse hover over the HTML DIV.
Hyperlink Text – with the text/span/div/image you want to make clickable.
https://example.com – with the target anchor link
the-class – with the CSS class you want to use to customize the DIV element.
Note: To have the link open in the same window, simply use an example below:
Also read our blog about 6 Cool image CSS effects and hover tricks and proven ways to increase WordPress speed and performance.