HTML Snippets
93 snippets in HTML.
- How Not to Wrap the Contents of <p>, <div>, and <span> Elements
In this snippet, we want to demonstrate how you can make the contents of the <p>, <div>, and <span> elements not to wrap. Use the CSS white-space property.
- How to Add a Border Inside the Table
Read this snippet if you have faced the difficulty of setting a border inside the table. In this tutorial, we suggest two methods of overcoming this problem.
- How to Add a Border-Bottom to the Table Row
In this tutorial, we want to demonstrate how you can add a border only to the bottom of the table row. Read and find out what CSS property you need for this.
- How to Add a Mouseover Text with HTML
In this tutorial, find out how to create a mouseover text description without Javascript. Use the HTML <div> or <span> element with the “title” attribute.
- How to Add a Vertical Line in HTML
In this snippet, we’ll show how to add a vertical line on the left and right sides, as well as how to center it and how to add a vertical line before a text.
- How to Add an Anchor Link to Jump to a Specific Part of a Page
Learn how to create an anchor link to jump to a specific section of a page, and how to link to the anchor from another webpage. Also see how to style the jumping anchor link with examples.
- How to Add an HTML Button that Acts Like a Link
There are several ways to place a clickable button on a webpage that will be linked to another page of your website. You can add inline onclick event to HTML button tag, or input tag.
- How to Add an Onclick Effect with HTML and CSS
In this snippet, we’ll demonstrate how to add an onclick event in CSS. The best way of creating an onclick effect is using the well-known checkbox hack.
- How to Add Border Inside a Div
If you need to place a border inside a <div> element, you are in the right place. In this snippet, you can find out how to do it using some CSS properties.
- How to Add Border to HTML Table
Learn how to create an HTML table, how to change HTML table border style using CSS. How to add border to<div>,<h2> &<p> elements. Practice with examples
- How to Add Image in the Title Bar
Make your website look more attractive by using favicons in the title bar. See how favicons are created and find more information about them.
- How to Add Multiple <tbody> Elements in the Same Table
A <table> can have multiple <tbody> elements each of them specifying a row group. Read this snippet to see how to add several <tbody> elements in the same table.
- How to Add Telephone Links with HTML
In this snippet, you will find out how it is possible to add telephone links with HTML. See examples and try to add and style telephone links by yourself.
- How to Align Labels Next to Inputs
In this snippet, you’ll learn how to align <label> elements next to <input> elements. Align labels to the right and left of inputs by using CSS properties.
- How to Align the <span> Element to the Right of the <div>
Find out how to align a <span> element to the right of the <div> element in this tutorial. We’ll explain how you can do this with the CSS float property.
- How to Allow Only Positive Numbers in the Input Number Type
In this snippet, we’ll demonstrate how to allow only positive numbers in the input number type. You can use the “min” attribute to specify restrictions.
- How to Allow the File Input Type to Accept Only Image Files
In this tutorial, we’ll show how to allow the file input type to accept only image files or certain image file extensions. Use the HTML “accept” attribute.
- How to Assign a Checked Initial Value to the Radio Button
In this tutorial, find out how you can assign a checked initial value to the radio button with HTML. To achieve that goal, you need to use the checked attribute.
- How to Center an Image with the CSS text-align Property
In this snippet, you can see a trick, which can help to center an <img> element with the CSS text-align property. Use a <div> and apply the style to it.
- How to Change the Color of an <hr> Element
The HTML <hr> element is a block-level element and creates a horizontal line. In this snippet, find out how to style a horizontal line by adding a color to it.
- How to Change the Size of Glyphicons
In this snippet, you’ll find out how to change the size of glyphicons. You need the CSS font-size property to increase all glyphicons or only one of them.
- How to Control the Space Between Bullets and <li> Elements
In this snippet, you can find out how to control the space between bullets and <li> elements. You can use the HTML <span> element and the CSS left property.
- How to Create a Hidden Div without a Line Break or Horizontal Space
In this snippet, we’re going to demonstrate how you can create a hidden <div> element without a line break or horizontal space. Use the CSS display property.
- How to Create a List With Dashes in HTML
In this tutorial, find out how it is possible to style a list with dashes instead of bullet points. Use the :before pseudo-element with the content property.
- How to Create a Multi-Line Text Input Field In HTML
In this snippet, we’ll demonstrate how to create a multi-line text input field in HTML. Read this tutorial and see how this can be done with the <textarea> tag.
- How to Create a Table with a Fixed Header and Scrollable Body
In this tutorial, find some methods of creating an HTML table with a fixed header and scrollable body. Here, we suggest using some methods. See examples.
- How to Create a Teardrop in HTML
The best way of creating a teardrop is to use SVG, which is used to specify vector-based graphics. In our snippet, we show how to create a teardrop using SVG.
- How to Create a Two-Column Div Layout with the Right Column Having Fixed Width
In this tutorial, we’ll explain how to create a two-column <div> layout with the right column having a fixed width. Here, you can find some examples.
- How to Create an HTML Table with a Fixed Left Column and Scrollable Body
It is possible to create a table, which has a fixed left column and a scrollable body. In this snippet, you’ll see how this is done using some CSS properties.
- How to Create an Unordered List without Bullets
In this snippet, we’re going to demonstrate how to create an unordered list without bullets using the CSS list-style-type property for the parent element.