HTML

To select all p elements inside a div element, we can do this using JavaScript, jQuery, or CSS. Let’s take a look at how to do this in each. Let’s first look at how to select all p elements inside a div element using JavaScript. We will have to use the getElementById() method along with […]

To give a textarea field a maxlength, we can simply use the maxlength attribute in HTML. <textarea maxlength="100"></textarea> Let’s see an example below. In this simple example, we will have a form with a textarea that we simply set to have a maxlength of 50 characters. We do this by adding a maxlength property to […]

Can a div have two ids? While you can give a div multiple ids, only one will be applied by the browser. The second id or any other id after the first one will just be ignored by the browser. So having multiple ids for a div is not only pointless but is also incorrect […]

To make an HTML list that will automatically place a number in front of the items, we simply need to use an ordered list, ol. <ol id="list1"> <li>Blue</li> <li>Green</li> <li>Orange</li> <li>Yellow</li> </ol> This is the easiest way to have a number automatically be placed in from of every item in the list. If you use […]

The correct HTML for making a text area element is just to use the HTML textarea tag. <textarea>This is some text in the textarea element.</textarea> Let’s take a look at the text area element in a form. Let’s say I have the following HTML form: <form> <label for="description">Description:</label> <textarea id="description" name="description"></textarea> <button type="submit" value="Submit">Submit</button> </form> […]

The correct HTML for making a drop-down list is just to use the HTML select tag. <select name="colors" id="colors"> <option value="green">Green</option> <option value="blue">Blue</option> <option value="pink">Pink</option> <option value="yellow">Yellow</option> <option value="red">Red</option> </select> A select element is used best on a form to gather user information. We’ll want to add a label along with it to give the […]

The correct HTML for adding a background color to a div is to use the HTML style attribute along with the CSS background-color property. <div style="background-color: green;"></div> Let’s take a look at a simple example. Let’s say I have the following HTML: <div id="div1" style="background-color: green;"> <p id="title">Some text in the div.</p> </div> As you […]

In this post, we’ll go over HTML span width. Let’s start with setting the width of a span in HTML. The main thing to remember about a span element is that it is an inline element, which means that you will not be able to set the width or height of it as is. So […]

The correct HTML for inserting a background image into an HTML element is to use the HTML style attribute along with the CSS background-image property. <div style="background-image: url('someImg.png');"></div> Let’s take a look at a simple example. Let’s say I have the following HTML: <div id="div1" style="background-image: url('someImg.png');"> <p id="title">Some text in the div.</p> </div> As […]

The correct HTML for making a text input field is just to use the HTML input tag with the type set to “text”. <input type="text"> The type “text” is also the default value for an input field. Let’s take a look at the input field in a form. Let’s say I have the following HTML […]

There are a couple of ways we can make an HTML list without bullets. We can do it through CSS, or we can do it in HTML with the style attribute. Let’s look at the style attribute inside an HTML element. <ul id="list1" style="list-style-type:none;"> <li>Blue</li> <li>Green</li> <li>Orange</li> <li>Yellow</li> </ul> As you can see in the […]

We can make a checkbox disabled in HTML using the disabled attribute. We assign the disabled attribute to an input to disable that input. <input type="text" disabled> We can also use the jQuery prop() method to change the disabled attribute of an input to true. $('input').prop('disabled', true); If you are using WordPress, don’t forget to […]

In this post, we will go over how to make an HTML scrollable div. To do this we will use the CSS overflow property and set its value to either scroll or auto. .scrollable-div1 { overflow: scroll; } .scrollable-div2 { overflow: auto; } The main difference between overflow: scroll and overflow: auto is that scroll […]

To lower text in HTML we can use the HTML subscript tag . _text Let’s say I have the following HTML: <div id="div1">The chemical formula for water is H2O</div> If we want to lower the “2” in H2O, we can do this using the HTML subscript tag . <div id="div1">The chemical formula for water is […]

To raise text in HTML we can use the HTML superscript tag . ^text Let’s say I have the following HTML: <div id="div1">Today is December 3rd</div> If we want to raise the “rd” in 3rd, we can do this using the HTML superscript tag . <div id="div1">Today is December 3^rd</div> This would result in the […]