The division tag is also known as the div tag. HTML uses the div tag to create content divisions in web pages such (text, images, header, footer, navigation bar, etc.). It is required to close the div tag, which has an opening () and closing () tag. The Div element is the most useful in web development because it allows us to divide out the data on a web page and create specific sections for different types of information or functions. Let’s look into the following examples for getting better understanding on how to select divs that has a specific ... Read More

Inline Frame is known as iframe in HTML. The tag designates a rectangular area within the content where a different document, complete with scroll bars and borders, may be displayed by the browser. To embed another document inside the current HTML document, use an inline frame. An element's reference can be specified using the HTML iframe name property. In JavaScript, a reference to an element is also made using the name attribute. Iframes are essentially used to display a webpage inside the one that is now shown. The URL of the document that contains the iframe is specified ... Read More

When line breaks should occur, they can be changed using the word-break property in CSS. Text line breaks typically only appear in specific locations, such as after a space or hyphen. Following is the syntax for word-break word-break: normal|break-all|keep-all|break-word|initial|inherit; Let’s dive into the article for getting better understanding on how can we prevent word breaking into different line in HTML table. Before that let’s have a quick view on the HTML table. HTML tables Web designers can organize information like text, images, links, and other tables into rows and columns of cells using HTML tables. The tag is ... Read More

In CSS, the ‘overflow’ property is used to specify the overflow of the content of the HTML element. For example, if the height of the div element is ‘500px’, and the height of the inside content is ‘1000px’, we need to make the content scrollable. In this tutorial, we will learn the difference between the ‘auto’ and ‘scroll’ values of the CSS ‘overflow’ property. Overflow: auto in CSS In CSS, overflow: auto sets the overflow of the HTML element to auto. It means if the content of the div is overflowing, it sets the ‘scroll’ as a value of ... Read More

In this tutorial, we will learn to shake a button when the user hovers using HTML and CSS. Creating a shaking button makes the UX of the application more attractive. We need to create a custom animation using the CSS ‘keyframes’ rules to shake any HTML element. After that, we can use custom keyframes as a value of the ‘animation’ CSS property to shake the button when the user hovers over the button. Syntax Users can follow the syntax below to shake a button on hover using HTML and CSS. .btn:hover { animation: key_frame_name animation_time ... Read More

Generally, the developer uses JavaScript to add the behaviour to the HTML code. Sometimes, we can also add behaviour to the HTML code using CSS. For example, we can create a slideshow using HTML and CSS rather than using JavaScript with HTML. We can create custom keyframes to animate the slides and create a slideshow. Syntax Users can follow the syntax below to create a slideshow using only HTML and CSS. .slides { width: calc(716px * 2); animation: slideShow 10s ease infinite; } @keyframes slideShow { 30% {margin-left: 0px;} ... Read More

HTML and XHTML are computer languages that are used in the development of web pages. It has simpler syntax that can be understood easily. XHTML is the extension of HTML which also combines the features of XML. It has more strict syntax than HTML. Although XHTML is derived from HTML, there are considerable differences between these two. What is HTML? The full form of HTML is Hypertext Markup language. It was developed by Tim Berners Lee in the year 1993. It is an extended form of standard generalized markup language (SGML). HTML provides the base or skeleton for the web ... Read More

While creating the responsive design for the application, it is also necessary to create a responsive card designs. Sometimes, developers require to add a hover effect on the card. So, when the user hovers over the card, it should change the style of the card. Here, we will learn to add a hover effect on the card and change the CSS whenever the user hovers over the card. Syntax Users can follow the syntax below to add the hover effect to the card. .card:hover { /* add css to set to element on hover */ ... Read More

Sometimes, the task is to find the user’s current position and then to show the location coordinates on the webpage or show the location on a map. Using HTML and javascript code this process of getting the current location of the user in an HTML page is demonstrated in this article. This is shown by using two different examples. In the first example, the current location of the user can be fetched and then the location coordinates are displayed on the HTML page. In the second example, an open-source Leaflet map library is used to fetch and then display the ... Read More

Sometimes, the task is to click a link in one container and to display the content in another container. In HTML, iframes are used to easily show the content in specified area on the page. In this article, using two different examples, links are used to load an iframe using another iframe links. In example 1, the links in the upper Iframe are used to display two different pictures in the bottom iframe. In example 2, using the links in the upper iframe the video content is displayed both in the bottom iframe as well in the upper iframe. ... Read More