DEV Community

Cover image for HTML Cheatsheet
Mursal Furqan
Mursal Furqan

Posted on

HTML Cheatsheet

My journey from Back-End Python developer to a Front-End React Developer was not a piece of cake. I have a long way since I joined my first job at Diya Interactive back in Feb, 2021. I have started from the scratch my Front-End journey, and I am still learning.
Based on my own personal learning experience, I have prepared a list of most widely used HTML Tags, that you should know of, if you want to pursue a career as a Front-End Developer.

HTML Basic Structure

  • <!DOCTYPE> Defines the document type
  • <html> Defines an HTML Document
  • <head> Contains the metadata/information for the document
  • <meta>
  • <title> Defines a title for the document
  • <body> Defines the document's body
  • <!--...--> Defines a comment in HTML
  • <hr> Defines a thematic change in the content with a horizontal rule/line
  • <br> Inserts a single line break

Styles and Semantics

  • <style> Defines style information for a document
  • <div> Defines a section in a document
  • <span> Defines a section in a document on the same line
  • <header> Defines a header for the document or the section
  • <footer> Defines a footer for the document or the section
  • <main> Specifies the main content of the document
  • <section> Defines a section in a document with references to other elements
  • <article> Defines an article


  • <ul> Defines an unordered list
  • <ol> Defines an ordered list
  • <li> Defines a list item in both, <ol> & <ul> tags
  • <dl> Provides a description to the list
  • <dt> Gives a term/name to the description list
  • <dd> Defines a description of a term/name in a description list

Bore Meme

I hope I didn't bore you with all this 😉
Next time, we will be covering the basic elements you NEEEEEEEEEED to know about Forms & Inputs

Discussion (0)