Scribd
Upload
20 views2 pages

HTML Cheatsheet

Uploaded by

TheRitik
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
20 views2 pages

HTML Cheatsheet

Uploaded by

TheRitik
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 2

HTML CHEAT SHEET HTML CHEAT SHEET

Structure <code> import


python
This is the basic template or barebone structure of HTML. </code>
Boilerplate
Text Formatting
<!DOCTYPE html>
<html lang="en"> Text formatting tags are used to format text or data of HTML documents. You can do certain
<head> things like creating italic, bold, strong text to make your document look more attractive and
<meta charset="UTF-8"> understandable.
<title>Document</title> <b> tag
</head> <b>I'm bold text</b>
<body>
</body>
<strong> tag
</html> <strong>I'm important text</strong>
<i> tag
Headings <i>I'm italic text</i>
There are six headings available in HTML, H1 is the largest among all, and H6 is the smallest.
<em> tag
<h1> Tag <em>Emphasized text</em>
<h1>Heading 1</h1>
<sub> tag
<h2> Tag <sub>Subscript</sub>
<h2>Heading 2</h2>
<sup> tag
<h3> Tag <sup>Superscript</sup>
<h3>Heading 3</h3>
h4 Tag
Lists
<h4>Heading 4</h4> Lists can be either numerical, alphabetic, bullet, or other symbols. You can specify list type and
list items in HTML for the clean document.
h5 Tag
<h5>Heading 5</h5> <ol> tag
h6 Tag Ordered list starts with <ol> tag and each list item starts with <li> tag
<ol>
<h6>Heading 6</h6>
<li>Data 1</li>
Container <li>Data 2</li> <li>Data
Container tags are the tags that contain some data such as text, image, etc. There are several 3</li>
container tags in HTML. div tag </ol>
div tag or division tag is used to make blocks or divisions in the document. <ul> tag
<div> This is div block </div> <ul>
span tag <li>Your Data</li> <li>Your
Data</li>
span is a container for inline content
</ul>
<span> This is span block </span>
p tag Media
Paragraph Media is anything that is present in digital form such as image, video, audio, etc.
<p> This is a paragraph </p> <audio> tag
pre tag It is used to embed sound content in the document.
pre tag represents pre-formatted text <audio controls>
<pre> Hello World </pre> <source src="demo.mp3" type="audio/mpeg"> Your
browser does not support the audio element.
code tag
</audio>
code tag is used to represent source codes

1/4 2/4
HTML CHEAT SHEET HTML CHEAT SHEET
<img> tag Form
It is used to embed or import image in a webpage.
Sample Form
<img src="Source_of_image" alt="Alternate text">
Form is used to collect user's input, generally user's data is sent to server for further processing.
<video> tag <form action="/action.php" method="post">
It is used to embed video in the webpage. Name: <input name="name" type="text" /> <br />
<video width="480" height="320" controls> Age: <input max="90" min="1" name="age" step="1" type="number" value="18" />
<source src="demo_move.mp4" type="video/mp4"> <select name="gender">
Your browser does not support the video tag. <option selected="selected" value="male">Male</option>
</video> <option value="female">Female</option>
Table </select><br /> <input checked="checked" name="newsletter" type="radio"
value="daily" /> Dai type="radio" value="weekly" /> Weekly<br /> <textarea
A table is a collection of rows and columns. It is used to represent data in tabular form.
cols="20" name="comments" rows="5">Comment</textarea><br />
Table Structure <label><input name="terms" type="checkbox" value="tandc" />Accept terms</lab
<table> <input type="submit" value="Submit" />
<caption>Demo Table</caption> </form>
<thead>
<tr>
Characters & Symbols
<th>Column1</th> Some symbols are not directly present on the keyboard, but there are some ways to use them in
<th colspan="2">Column2</th> HTML documents. We can display them either by entity name, decimal, or hexadecimal value.
</tr> Copyright Symbol (©)
</thead> &copy;
<tbody>
<tr>
Less than (<)
<td>Data1</td> &lt
<td>Data2</td> Greater than (>)
<td>Data2</td> &gt;
</tr> Ampersand (&)
<tr> &amp;
<td>Data1</td>
<td>Data2</td>
Dollar ($)
<td>Data2</td> &dollar;
</tr> Semantic Elements
</tbody>
Semantic elements are those elements that are self describable, i.e., from their name itself, you
<tfoot>
can understand their meaning.
<tr>
<td>&nbsp;</td> <section> tag
<td>Data</td> It defines a section in the document
<td>Data</td> <section>This is a section</section>
</tr> <article> tag
</tfoot>
It represents self-contained content
</table>
<article> Enter your data here </article>
Links <aside> tag
Links are clickable text that can redirect you to some other page. It is used to place content in the sidebar
<a> tag <aside> Your data </aside>
<a> or anchor tag defines a hyperlink.
<a href="https://www.codewithharry.com/">Visit CodeWithHarry.com!</a>

3/4 4/4

You might also like