ColorCode

Videos 🎥Courses 📚Podcast 🎙️Merch 👕Login 🏠
arrow left
HTML Basics

VIDEOS

Last Updated: February 4, 2023

Useful Things

A few useful tips and trick in HTML

Here are a few useful things to remember when writing HTML.

Line break <br>

<br> is a break. A line break. If you want to put a break within your text, if you just press ENTER and go to the next line in your code, it doesn’t mean the browser will render it that way. It actually ignores it, we call this whitespace. Just like it ignores the spaces or tabs in the beginning of the line, it will ignore your ENTER. If you have to go to the next line you could use a <br>. We just talked about Semantics and <br> is actually not good practice. You’re better off using multiple <p> tags but say you had an <address> tag, you could use <br> to go to the next line. It is available.

Italic Text <em> & <i>

If you want to emphasize on a part of your text, you can use <em> tag. It italicizes the text in between. <i> does the same thing but use <em> because it describes the intention, or meaning or semantic behind your code as opposed to how it should look. You can always change the look later with CSS.

Bold Text <strong> & <b>

Same thing for <strong> tag if you want bold text. You can use <b> but <strong> is preferred. Meaning is more important than look when it comes to picking your tags.

Horizontal Rule <hr>

<hr> will give you a horizontal line. You can achieve this using CSS borders and have more options there but <hr> does exist if you need it.

Alternative Text (<img> alt Attribute)

alt attribute for <img> tags will add a text underneath the image in case the image can’t be loaded. For whatever reason. Slow internet, or the image doesn’t exist, or whatever other reason. This way the user will at least see what your intention was with that image.

Input Types

<input> tags have a lot of different kinds, you can specify what kind it is using a type attribute. The type can be button, checkbox, color, date, email, etc... If you choose the right type some keyboards including the iOS virtual keyboard automatically shows you the @ sign. Password type makes the input hidden. And so many other types.

So use the right type so that the browser will help create a better experience for the user, and you don’t have to do anything else, just change the type.

Anyway, those were a few useful things you can use in HTML that I thought you should know about.