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 […]
HTML
innerHTML vs outerHTML
The main difference between innerHTML vs outerHTML is that the innerHTML property will get the HTML code that is inside of a div or element, while the outerHTML property will get the innerHTML plus the HTML code of the div or element itself. The best way to show the difference is with some simple examples. […]
outerHTML – How to Get and Change the outerHTML Property of an Element
We can get and change the outerHTML of an element using JavaScript. We can use the JavaScript getElementById() method to target the outerHTML property of an element. document.getElementById("p1").outerHTML Let’s see an example of this below. Let’s say we have the following HTML: <div id="div1"> <p id="p1">This is a paragraph with some text.<p> </div> If we […]
How to Give a Textarea a Max Length
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 […]
Clicking on an Image to Enlarge it in HTML
In HTML, we can click on an image to enlarge it with the help of the JavaScript getElementById() method and by targeting the width and height properties of the image. The best way to show this is with an example. Let’s say we have the following HTML: <div id="div1"> <img id="image1" width="150px" height="150px" src="https://theprogrammingexpert.com/wp-content/uploads/example-img1.png"> </div> […]
Can a div Have Two ids?
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 […]
What Type of HTML List will Automatically Place a Number in Front of the Items?
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 […]
What is the Correct HTML for Making a Text Area?
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> […]
What is the Correct HTML for Making a Drop-Down List?
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 […]
What is the Correct HTML for Adding a Background Color to a Div?
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 […]
HTML span width – Set the Width of a Span in HTML
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 […]
What is the Correct HTML for Inserting a Background Image?
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 […]
What is the Correct HTML for Making a Text Input Field?
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 […]
How to Make an HTML List Without Bullets
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 […]
Making a Checkbox Disabled in HTML
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 […]
How to Call a JavaScript Function From HTML
To call a JavaScript function from HTML, we can add an onclick event in our HTML code that will fire a function when the HTML element is clicked on. <div id="div1" onclick="funct1()">Click me to run the function funct1</div> We can also use the onmouseover event to call a function when the user moves a mouse […]
How to Make a Div Scrollable in HTML
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 […]
HTML subscript – How to Lower Text in HTML
To lower text in HTML we can use the HTML subscript tag <sub></sub>. <sub>text</sub> 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 <sub></sub>. <div id="div1">The chemical formula for water is […]
HTML superscript – How to Raise Text in HTML
To raise text in HTML we can use the HTML superscript tag <sup></sup>. <sup>text</sup> 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<sup>rd</sup></div> This would result in the […]
How to Filter a List of Divs with a Text Input Bar Using Javascript
Being able to add filtering functionality to lists using Javascript and jQuery can be very beneficial for the user experience of a web page. It is very common for a page to have a list of products, events, blogs, etc. which the user could want to sort or filter – depending on the purpose of […]
Sort List of Divs with Data Attribute with Radio Buttons Using Javascript
We can use Javascript and jQuery to sort a list of divs very easily by using the sort() Javascript function. Being able to add sorting functionality to lists using Javascript and jQuery can be very beneficial for the user experience of a web page. It is very common for a page to have a list […]