Things you didn’t know about HTML

Abida Alalawi
3 min readJan 20, 2022

--

HTML is a fundamental pillar of web development! HTML stands for the hypertext markup language, and hypertext refers to the truth that HTML makes it so that you can click on hyperlinks in web pages. That’s the hypertext. The phrases markup language simply implies that it is something that you use to mark up everyday English to point out matters. It’s the first language you need to learn if you want to become a web developer.

In this article, I’m going to show you Tricks that you can use while HTML coding. I really think you’re going to enjoy them and they’re going to make you a better HTML coder. let’s get started with tricks.

# Editable texts.

You can make any HTML elements editable. See where it says “you can Edit me”. We can go in there and change the text. We do this with a simple attribute notice in line 12 of the code has the content editable attribute any place we use the content editable attribute the text inside is going to be editable.

# progress element

let’s say that we had a file upload bar that we wanted to render well normally you’d write out some custom HTML and CSS to do that but there’s a progress element built into HTML.. if we want we can specify that we have a value of 50 and specify a max 100.

# Date Picker

the date input element is a type of HTML input element that we use to create a date picker. The date picker is a type of input element that we can click on it and the calendar will be opened, from which you can choose a date that you want.

# Picture elements

use the picture elements for more responsive images in your websites. Notice in line 13 of the code, I have an element named picture. It ends in line 17. you have three other elements inside the picture tag The first two are source elements. that point to a source set, attribute which are, large. JPEG and a small.JPEG. These are designed to display different images at different screen widths.

# Highlighting texts

the text on the first line here has been highlighted as I used a span and gave it a class highlight that span just spans the first sentence inside this paragraph. If we look at the styles in line 9, I created a class for highlight and simply set the background color to that text on spring green. So it appears like a highlighter.

# Text input with suggestions.

The user gets suggestions based on his input. Let’s take a look at the code and see how it works. we have our input tag and we have a list attribute set to the value countries and then surrounding all of our options. We have a data list.

--

--