HTML Cheatsheet

by anupmaurya
860 views

Here, In this article on HTML Cheatsheet you are going through pin-point basics concept of HTML.

HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page.

Sample program

<!-- Sample program --> <!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World! </h1> <p> Good Morning!! </p> </body> </html>
Code language: HTML, XML (xml)
  • <!DOCTYPE html>> : Specifies document type, here it is an HTML5 document
  • <html> : root element of an HTML page
  • <head> : Contains meta information about the HTML page
  • <title> : Specifies a title for the HTML page to display
  • <body> : body of the html document which contains headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • <h1> : defines Large heading
  • <p> : defines Paragraph
  • </body> : represents end of body
  • </html> : represents end of html
  • <!-- comment --> : comments

HTML Tags

HTML TagsDescriptionExample
<h1..h6>Headers </h1..h6><h1><h2><h3><h4><h5><h6> are the heading tags, where <h1> is most important heading and <h6> is least important heading.<h1>MY FIRST BLOG</h1>
<div>..</div><div> is used to wrap a block of code as a single block<div> Block of code </div>
<span> … </span>Used to inject inline elements, like an image, icon etc without disturbing the formatting of the page.<span> icon image </span>
<p> … </p>Contains plain text like a paragraph<p> multi line text </p>
<br/>line break, used to write a new line.<br/>
<hr/>Similar to line break, additionally draws a horizontal bar to indicate the end of the section<hr/>
<meta/>Used to provide meta data information like description of the web page<meta charset="utf-8"/>
<a>..</a>Used to link external webpages to your web page<a href="https://onecompiler.com/" target="_blank"> OneCompiler</a>
<img />Used to insert an image<img src="/sample.jpg" alt="sample image" width="100" height="50" longdesc="image" />

HTML formatting

Formatting ElementsDescription
<i>..</i>Italic
<u>..</u>Underline
<b>..</b>Bold
<strong>..</strong>Important text
<em>..</em>Emphasized text
<mark>..</mark>Marked text
<small>..</small>Smaller text
<del>..</del>Deleted text
<ins>..</ins>Inserted text
<sub>..</sub>Subscript text
<sup>..</sup>Superscript text

Tables

<table> tag is used to create a table and <tr> tag is used to create table rows and <td> tag is used to create data cells.

<table border = "1"> <tr> <td>Row 1, Col 1</td> <td>Row 1, Col 2</td> </tr> <tr> <td>Row 2, Col 1</td> <td>Row 2, Col 2</td> </tr> </table>
Code language: HTML, XML (xml)

Lists

1. Ordered Lists

Numbering the list items

<ol type = "1"> <!-- Numeric numbering, default case--> <ol type = "I"> <!-- Uppercase roman numerals--> <ol type = "i"> <!-- Lowercase roman numerals--> <ol type = "A"> <!-- Uppercase letters--> <ol type = "a"> <!-- Lowercase letters-->
Code language: HTML, XML (xml)
<ol type = "1"> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ol>
Code language: HTML, XML (xml)

2. Unordered Lists

List items are displayed using bullets

<ul type = "disc"> <!-- default case--> <ul type = "square"> <ul type = "circle">
Code language: HTML, XML (xml)
<ul type= "circle"> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul>
Code language: HTML, XML (xml)

3. Definition Lists

List the entries like in a dictionary or encyclopedia.

  • <dl> : Start of the definition list
  • <dt> : Term
  • <dd> : Term definition
  • </dl> : End of the definition list
<dl> <dt><b>OL</b></dt> <dd>Ordered Lists</dd> <dt><b>UL</b></dt> <dd>Unordered Lists</dd> <dt><b>DL</b></dt> <dd>Definition Lists</dd> </dl>
Code language: HTML, XML (xml)

CSS

1. Inline CSS

style attribute is used to define CSS properties at each HTML element.

<h1 style = "color:blue; font-size:40px; font-style: italic;"> One Compiler </h1>
Code language: HTML, XML (xml)

2. Internal CSS

You can define CSS properties using <style> tag in <head> section.

<head> <style> body {background-color: pink;} h1 {color: red;} h2 {color: green; font-size : 40px; font-style: italic;} </style> </head>
Code language: HTML, XML (xml)

3. External CSS

<link> tag is used to refer an external CSS file.

<link rel="stylesheet" href="styles.css" />
Code language: HTML, XML (xml)

Forms

<form> element is used to define a form.

<form> <!--form elements like input select etc--> </form>
Code language: HTML, XML (xml)

<input> element

TypeDescription
<input type="text">To define a single-line text input field
<input type="password">To define a single-line password input field
<input type="radio">To define a radio button
<input type="submit">To define a submit button
<input type = "checkbox">To define a checkbox
<input type = "file">To define a file upload box
<form > ID : <input type = "text" name = "user-id" /> <br> <!-- Single line text input--> Password: <input type = "password" name = "password" /> <br> <!-- Single line password input--> </form>
Code language: HTML, XML (xml)

If you have quires and suggestions put them in the comments.Hope this HTML Cheatsheet useful to you, Share & Help Other to learn 🙂

You may also like

3 comments

Ravi Singh May 11, 2021 - 6:35 am

Great post. I was checking constantly this blog and I’m impressed!
Extremely useful information particularly the last part :
) I care for such information much. I was looking for this certain info for a very long time.
Thank you and good luck.

Mark Jesper June 9, 2021 - 9:25 am

Great cheatsheet! Though it’s missing some tags like meta tags. Hopefully this would be updated since meta tags are also important html tags for parsing. This will really be helpful for individuals that pursue web development or even software engineering career.

anupmaurya June 9, 2021 - 5:48 pm

Noted, Surely we will update!

Comments are closed.