HTML Cheat Sheet
HTML Cheat Sheet
© Copyright by Interviewbit
Contents
Introduction to HTML:
<html>
<head>
<title> Interviewbit </title>
</head>
<body>
..........................
....Body contents here....
..........................
</body>
</html>
An HTML element's structure in detail is given in the picture above. An HTML file is
saved with the.htm or.html extension, is provided by a web server, and may be
viewed in any web browser.
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>...</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Cheatsheet </title>
<link rel="stylesheet" href="styles.css">
<style>
h1 {colour:green;}
p {colour:yellow;}
</style>
</head>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Cheatsheet </title>
<link rel="stylesheet" href="styles.css">
<style>
h1 {colour:green;}
p {colour:yellow;}
</style>
</head>
<body bgcolour="red">
<p>This is a HTML cheatsheet </p>
</body>
</html>
HTML Comments: Although HTML comments are not visible in the browser, they
can aid in the documentation of your HTML source code. We can add comments
to our HTML code by enclosing them within the symbole: <!-- →. The following
syntax shows how to add comments to your HTML source:
<address>
Written by <a href="mailto:interviewbit@example.com">Kit Harrington</a>.<br>
Find us at:<br>
interviewbit.com<br>
Mumbai<br>
India
</address>
<article>
<h2>HTML Cheatsheet</h2>
<p>HTML is an important markup language for web development</p>
</article>
<aside>
<h4>What's more on Interviewbit</h4>
<p>Prepare for coding interviews of all companies at interviewbit</p>
</aside>
<header>
<h1>Header over here</h1>
<p>Content by Scaler</p>
</header>
<footer>
<p>Author: Jon Snow</p>
<p><a href="mailto:jonsnow@example.com">jon@example.com</a></p>
</footer>
<main>
<h1>The Heading tag</h1>
</main>
<h1> to <h6>: Six levels of section headers are represented by the HTML <h1> to
<h6> elements. The highest level is <h1>. The lowest is <h6> at the section level.
An example showing the usage of these elements is given below:
<nav>
<a href="/oop/">Learn OOPs</a> |
<a href="/c++/">Learn C++</a> |
<a href="/os/">Learn Operating System</a> |
</nav>
<section>
<h2>More about Interviewbit</h2>
<p>Interviewbit helps students prepare for technical interviews and crack the various i
</section>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conserv
</blockquote>
<div>...</div>: The generic container for flow content is the HTML Content
Division element (<div>). Unless it is styled with CSS, it has no effect on the
content or layout. An example that shows the usage of the <div> element is
given below:
<div>
<p> This is a paragraph inside a div element</p>
</div>
<pre>
This message which is contained in a HTML pre tag
will be shown in a fixed size
font. Also,spaces and
line breaks are preserved as it is.
</pre>
<dl>
<dt>Tea</dt>
<dd>Brown Hot drink</dd>
<dt> Milk </dt>
<dd>White cold drink</dd>
</dl>
<div>
<p>List of fruits</p>
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Kiwi</li>
</ol>
<p>List of vegetables</p>
<ul>
<li>Carrots</li>
<li>Broccoli</li>
<li>Spinach</li>
</ol>
</div>
<figure>
<img src="/pictures/lion-1080-720.jpeg"
alt="Lion hunting">
<figcaption>Picture of a lion hunting its prey</figcaption>
</figure>
<img class="fit-picture"
src="/pictures/apple-660-480.jpeg"
alt="This is a picture of an apple">
<figure>
<figcaption>Roaring of a lion:</figcaption>
<audio controls src="/audio/demo/lion-roaring.mp3">
Your browser is not supporting the <code>Audio</code> element.
</audio>
</figure>
<a>...</a>: The href property on the HTML <a> element (or anchor element)
generates a hyperlink to web pages, files, email addresses, page positions, or
anything else a URL can address. An example which shows the usage of the <a>
element is given below:
<em>...</em>: The HTML <em> element denotes text with a strong focus on it.
The em> element can be used in a variety of ways, nested, with each level of
nesting denoting a higher level of importance. An example that shows the usage
of the <em> element is given below:
<code>...</code>: The HTML <code> element styles its contents to imply that
the text is a small piece of computer code. An example that shows the usage of
the <code> element is given below:
<br>...</br>: The <br> element in HTML creates a line break in text (carriage-
return). It is beneficial when composing a poem or an address where the line
division is important. An example that shows the usage of the <br> element is
given below:
<p>Hi, Welcome to<br> Interviewbit. We help you master <br>data structure and algorithm
<mark>...</mark>: The HTML Mark Text element (mark>) denotes text that has
been marked or highlighted for citation or notation, due to the marked
passage's relevance or importance in the enclosing context. An example that
shows the usage of the <mark> element is given below:
<details>
<summary>Summary of the topic</summary>
Java is an Object Oriented Programming Language.
</details>
<!DOCTYPE html>
<html>
<body>
<h1>Demo of the del element and ins element</h1>
<p>Her favourite colour is <del> green</del> <ins> magenta</ins>!</p>
</body>
</html>
<table>
<caption>Details about Tables in HTML</caption>
<thead>
<tr>
<th rowspan="5">HTML table's header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body of the table</td>
<td>Table has 5 rows</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer of the table </td>
</tr>
</tfoot>
</table>
<!DOCTYPE html>
<html>
<body>
<p>Example of a button</p>
<button type="button" onclick="alert(This is a button click!')">Click Me!</button>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Demo of the datalist tag in HTML</p>
<form action="" method="get">
<label for="browser">Choose your favourite fruit from the list given below:</label>
<input list="fruits" name="fruit" id="fruit">
<datalist id="browsers">
<option value="Apple">
<option value="Orange">
<option value="Kiwi">
<option value="Pomegranate">
<option value="Dragon Fruit">
</datalist>
<input type="submit">
</form>
</body>
</html>
<input>: The HTML <input> element is used to create interactive controls for
web based forms in order to accept data from the user; depending on the device
and user, a range of sorts of input data and control widgets are accessible.
Examples of the usage of the input element have been given above.
<progress>...</progress>: The HTML <progress> element shows a progress
indicator for an activity, which is commonly shown as a progress bar. An example
which shows the usage of the <progress> element is given below:
<!DOCTYPE html>
<html>
<body>
<p>Demo of the progress tag</p>
<label for="fileDownload">Progress of the download:</label>
<progress id="fileDownload" value="64" max="80"> 64% </progress>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Demo of the legend and fieldset elements</p>
<form action="">
<fieldset>
<legend>Personal Information:</legend>
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname">
<label for="lastname">Last name:</label>
<input type="text" id="lastname" name="lastname">
<label for="emailId">Email Id:</label>
<input type="emailId" id="emailId" name="emailId">
<label for="birthday">Date of birth:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Css Interview Questions Laravel Interview Questions Asp Net Interview Questions