Starting Now: iLoveCoding courses are completely FREE. No login or signup required.

Common HTML Elements (Cheatsheet included)

HTML has seemingly endless HTML elements - here are the most common ones you need to know.

FREELevel: Beginner3:26 mins
Course content
Lessons #1: Tools you need for the HTML/CSS course FREE
1:59 mins
Lessons #2: Overview of the VS Code Text Editor FREE
4:57 mins
Lessons #3: Code your first webpage FREE
3:59 mins
Lessons #4: What is HTML Really? FREE
3:16 mins
Lessons #5: What does HTML look like? FREE
2:46 mins
Lessons #6: HTML Elements FREE
7:20 mins
Lessons #7: HTML Elements - Continued FREE
3:36 mins
Lessons #8: Common HTML Elements (Cheatsheet included) FREE
3:26 mins
Lessons #9: HTML is a forgiving language FREE
3:47 mins
Lessons #10: Basic Markup of HTML FREE
5:18 mins
Lessons #11: The <h1>...<h6>, <i> and <strong> elements FREE
5:18 mins
Lessons #12: Learn to link webpages via the anchor <a> element FREE
4:04 mins
Lessons #13: Relative vs Absolute Paths - linking continued FREE
5:50 mins
Lessons #14: <div> and <span> elements FREE
6:36 mins
Lessons #15: Making lists in HTML via <ul>, <ol> and <li> elements FREE
5:36 mins
Lessons #16: Making nested lists + Homework FREE
4:31 mins
Lessons #17: Adding special characters in your webpage FREE
5:50 mins
Lessons #18: Emmet shortcuts and code comments FREE
3:37 mins
Lessons #19: <meta> elements and what they are about FREE
3:19 mins
Lessons #20: <meta> description and keyword elements for SEO FREE
3:33 mins
Lessons #21: <blockquote> and <pre> elements for special text formatting FREE
5:43 mins
Lessons #22: Adding images with the <img> element FREE
5:11 mins
Lessons #23: Using <video> and <audio> elements FREE
5:56 mins
Lessons #24: Semantic Elements + Homework FREE
4:26 mins
Lessons #25: Intro to CSS - Making the webpages beautiful FREE
4:22 mins
Lessons #26: Intro to CSS continued FREE
4:10 mins
Lessons #27: <style> element & using CSS selectors FREE
5:38 mins
Lessons #28: Organize your CSS is its own file FREE
4:55 mins
Lessons #29: CSS id selector (# hash sign) FREE
4:20 mins
Lessons #30: CSS class selector (. dot sign) FREE
3:52 mins
Lessons #31: Select all elements with asterisk (*) selector FREE
0:58 mins
Lessons #32: Using multiple selectors together (using comma and more) FREE
4:40 mins
Lessons #33: CSS Combinators selectors (~ + > etc.) FREE
7:50 mins
Lessons #34: Pseudo Selectors (:visited: :hover :active :focus) FREE
6:04 mins
Lessons #35: Chrome Developer Tools - Intro FREE
6:43 mins
Lessons #36: Colors in CSS FREE
3:19 mins
Lessons #37: Apply multiple CSS classes + write notes with code comments FREE
2:59 mins
Lessons #38: Fonts: Change & add custom fonts FREE
6:20 mins
Lessons #39: Background CSS Property. Change color, images and more FREE
7:39 mins
Lessons #40: Common CSS Units - (px, em, rem, %) FREE
7:01 mins
Lessons #41: Common CSS Units - (rem) FREE
2:39 mins
Lessons #42: CSS Margin and Padding FREE
9:49 mins
Lessons #43: CSS border property FREE
4:00 mins
Lessons #44: CSS border style FREE
2:05 mins
Lessons #45: Size elements with 'width' and 'height' property FREE
3:21 mins
Lessons #46: Use 'box-sizing' for more control on element sizing FREE
3:43 mins
Lessons #47: 'border-radius' Curve borders and make custom shapes. FREE
7:58 mins
Lessons #48: <div> vs <span> the real difference FREE
4:36 mins
Lessons #49: Using 'display' property of CSS & 'inline-block' FREE
3:19 mins
Lessons #50: 'float' & 'clear' property - Moving elements around. FREE
4:38 mins
Lessons #51: Hide content with `overflow`, `visibility` and `display` property FREE
3:36 mins
Lessons #52: Clearfix: Hack to fix webpage spacing issue FREE
3:51 mins
Lessons #53: Project: Blog Design - Create beautiful looking website FREE
5:20 mins
Lessons #54: Project: Blog Design (Part 2/7) - Layout the HTML FREE
9:09 mins
Lessons #55: Project: Blog Design (Part 3/7) - Styling the header FREE
4:01 mins
Lessons #56: Project: Blog Design (Part 4/7) - Styling main and footer area FREE
4:02 mins
Lessons #57: Project: Blog Design (Part 5/7) - Styling sidebar FREE
3:10 mins
Lessons #58: Project: Blog Design (Part 6/7) - Styling articles FREE
2:17 mins
Lessons #59: Project: Blog Design (Part 7/7) - Additional Pages FREE
5:13 mins
Lessons #60: 'position' - Control element position within your page FREE
8:10 mins
Lessons #61: Project: Coupon (using `absolute` & `relative` position) FREE
5:21 mins
Lessons #62: CSS Flexbox & CSS Grid - More layout methods FREE
3:02 mins
Lessons #63: CSS Priority Order FREE
6:04 mins
Lessons #64: Additional Resources - Codepen + HTML Cheatsheet FREE
5:18 mins
Lessons #65: <table> Making tables in HTML FREE
5:32 mins
Lessons #66: <table> Making tables in HTML continued FREE
2:41 mins
Lessons #67: <iframe> Embedding other webpages in your webpage FREE
4:16 mins
Lessons #68: Creating forms and understanding how they work FREE
11:17 mins
Lessons #69: Creating form - continued FREE
6:41 mins
Lessons #70: Using external CSS libraries in your projects FREE
6:42 mins
Lessons #71: Conclusion and next steps FREE
3:28 mins
πŸ˜‡Important: This course is FREE and always will be πŸ™Œ. Feel free to share it with friends. 🎁

HTML Cheatsheet

CSS Cheatsheet

HTML CSS Cheatsheet thumb

Video Transcript

So far you have been writing HTML elements but one question may arise is that How do I remember all of these elements? That is a great question since there are many of them.

Commonly used HTML elements

As you can see above, In the cheat sheet provided, you have a section with the most commonly used HTML elements.

In this course, we are going to go through all of them, and just with these elements, you are going to have enough knowledge to make fancy websites.

Besides this HTML Cheatsheet, there are two additional resources I want to share with you:

Useful references

Mozilla

Besides the cheat sheets provided if you want even more information, just google for "HTML reference".

Link on Google for the Mozilla HTML reference

You'll find the third result to be the Mozilla HTML elements reference, so just ignore all the previous ones.

Basically, Mozilla is the same organization that created the Firefox browser. They are also collecting a lot of information and building a great reference of many things related to technology and web development, including JavaScript, HTML, CSS, and others as well.

Interface of Mozilla documentation website

If you simply scroll down after accessing the page, you'll be able to see the different elements that you can use in HTML as displayed above. There is information about the <html> element, <link>, <meta>, <title>, <style>, <body>, and many others organized by different sections of usage.

Of course, right now it may not make a lot of sense to you but as you finish the course all of this is going to make sense, and you can navigate through different explanations on the elements and have a pretty handy example of use of that element. But worry about it right now, it is just a reference that you can use it later.

Viewing the article element as an example

After clicking any element that you want to know some information about, you'll be able to see the code of a very handy example of how to use that element, and what it's going to do.

Mozilla HTML Reference is a very handy resource that you should bookmark.

One important rules I want to emphasis on is:

Do not want to commit to memory anything that can be looked up in a book.
Albert Einstein

...and this same concept applies for HTML and any other coding language that you are learning. You do not want to memorize these things. I have never memorized it. Whenever I want to look up something I simply google it, and look at the authentic sources just like Mozilla Documentation or some other website depending on the technology that I'm looking into.

Stack Overflow

Another very handy resource to know about is Stack Overflow. Stack Overflow is a question and answer website for developers, and it's another great reference that you can use.

Link of Stackoverflow website

You can look for your questions directly in the search box of the website as shown above in the results, or you can google for "stackoverflow" and the question that you have.

Let's say that you have a question about the HTML paragraph tag, this is how you should search on Google to see the results from Stack Overflow:

Googling for stackoverflow question

Do not attempt to memorize it, these concepts are automatically going to ingest in your brain the more you use it. The more you practice, the more it will become second nature.

That's pretty much it, I will talk to you in the next lesson.

Become a confident software developer with mentor support!
Get Started
Already have an account? Please Login