Table of Contents

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>

<!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
 : comments

HTML Tags

HTML Tags	Description	Example
`<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 Elements	Description
`<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>

Lists

1. Ordered Lists

Numbering the list items

2. Unordered Lists

List items are displayed using bullets

<ul type = "disc"> <!-- default case-->
<ul type = "square">
<ul type = "circle">

<ul type= "circle">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
</ul>

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>

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>

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>

3. External CSS

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

 <link rel="stylesheet" href="styles.css" />

Forms

<form> element is used to define a form.

<form>
<!--form elements like input select etc-->
</form>

`<input>` element

Type	Description
`<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>

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

cheatsheet Html cheatsheet

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.

HTML Cheatsheet