Skip to content

Latest commit

 

History

History
286 lines (225 loc) · 20.6 KB

html-cheatsheet.md

File metadata and controls

286 lines (225 loc) · 20.6 KB
title description created
HTML CheatSheet
The most commonly used html tags nds are given here.
2022-10-20

Table of Contents

HTML CheatSheet for Developers

Basic Tags of HTML

Tags are like keywords which defines that how web browser will format and display the content.

Command Description
<html>...</html> Tag can be thought of as a parent tag for every other tag used in the page.
<head>...</head> Tag is used to specify meta data about the webpage. It includes the webpage’s name,its dependencies (JS and CSS scripts), font usage etc.
<body>...</body> Container for all the contents of the webpage.
<base/> Used to specify the base URL of your site,this tag makes linking to internal links on your site cleaner.
<meta/> Can be useful for mentioning the page’s author,keywords, original published date etc.
<link/> This is used to link to scripts external to the webpage. Typically utilized for including stylesheets.
<style>...</style> The style tag can be used as an alternative to an external style sheet, or complement it.Includes the webpage’s appearance information.
<script>...</script> Used to add code snippets, typically in JavaScript,to make webpage dynamic. It can also be used to just link to an external script.

🔼Back to Top

Tags to Structure Document

Command Description
<h1..h6> … </h1..h6> Six different variations of writing a heading. <h1> Tag has the largest font size, while <h6> has the smallest.
<div>...</div> A webpage’s content is usually divided into blocks, specified by the div tag.
<span>...</span> This tag injects inline elements, like an image, icon, emoticon without ruining the formatting/styling of the page.
<p>...</p> Plain text is placed inside the tag.
<br> A Line Break for Webpages.It is used when wanting to write a new line.
<hr/> In addition to switching to the next line, this tag also drawsa horizontal bar to indicate the end of the section.
<strike>...</strike> Another old tag, this is used to draw a line atthe center of the text, so as to make it appearunimportant or no longer useful.
<cite>...</cite> Tag for citing author of a quote.
<blockquote> … </blockquote> Quotes often go into this tag. Is used in tandem with the <cite>tag.
<q> … </q> Similar to the above tag, but for shorter quotes.
<abbr> … </abbr> Denotes abbreviations, along with the full forms.
<address> … </address> Tag for specifying author’s contact details.
<dfn> … </dfn> Tag dedicated for definitions.
<code> … </code> This is used to display code snippets within a paragraph.
<bdo dir="rtl/ltr"> … </bdo> Overrides the current directionality of text, so that the text within is rendered in a different direction.

🔼Back to Top

Semantic Elements

Semantic element clearly describes its meaning to both the browser and the developer.

Command Description
<article> ... </article> Defines independent, self-contained content
<aside> ... </aside> Defines content aside from the page content
<details> ... </details> Defines additional details that the user can view or hide
<figcaption> ... </figcaption> Defines a caption for a <figure> element webpage.
<figure> ... </figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> ... </footer> Defines a footer for a document or section
<header> ... </header> Specifies a header for a document or section
<main> ... </main> Specifies the main content of a document
<nav> ... </nav> Defines navigation links
<section> ... </section> Defines a section in a document
<summary> ... </summary> Defines a visible heading for a <details> element
<time> ... </time> Defines a date/time
<pre> ... </pre> Preserve both spaces and linebreaks

🔼Back to Top

Formatting

Formatting elements were designed to display special types of text:

Command Description
<b> ... </b> Defines bold text
<em> ... </em> Defines emphasized text
<i> ... </i> Defines a part of text in an alternate voice or mood
<small> ... </small> Defines smaller text
<strong> ... </strong> Defines important text
<sub> ... </sub> Defines subscripted text
<sup> ... </sup> Defines superscripted text
<ins> ... </ins> Defines inserted text
<del> ... </del> Defines deleted text
<mark> ... </mark> Defines marked/highlighted text

🔼Back to Top

Links

Links allow users to click their way from page to page.

Command Description
<a href=””> … </a> Anchor tag. Primarily used for including hyperlinks.
<a href=”mailto:”> … </a> Tag dedicated to sending emails.
<a href=”tel:###-###”> … </a> Anchor tag for mentioning contact numbers. As the numbers are clickable, this can be particularly beneficial for mobile users.
<a name=”name”> … </a> This tag can be used to quickly navigate to a different part of the webpage.
<a href=”#name”> … </a> A variation of the above tag, this is only meant to navigate to a div section of the webpage.

🔼Back to Top

Images

Images can improve the design and the appearance of a web page.

Command Description
<img /> A tag to display images in the webpage.
src=”url” The URL or path where the image is located on your drive or on the web.
alt=”text” The text written here is displayed when user hovers mouse over the image. Can be used to give additional details of the image.
height=”” Specifies image height in pixels or percentages.
width=”” Specifies image width in pixels or percentages.
align=”” The relative alignment of the image. Can change with changes to other elements in the webpage.
border=”” Specifies border thickness of the image. If not mentioned, defaults to 0.
<map> … </map> Denotes an interactive (clickable) image.
<map name=””> … </map> Name of the map associated between the image and the map.
<area /> Specifies image map area.
shape=”” Shape of the area.
coords=”” The coords attribute specifies the coordinates of an area in an image map.

🔼Back to Top

Lists

Lists allow web developers to group a set of related items in lists.

Command Description
<ol> … </ol> Tag for ordered or numbered list of items.
<ul> … </ul> Contrary to the above tag, used for unorderedlist of items.
<li> … </li> Individual item as part of a list.
<dl> … </dl> Tag for list of items with definitions.
<dt> … </dt> The definition of a single term inline with body content.
<dd> … </dd> The description for the defined term.

🔼Back to Top

Forms

Form is used to collect user input. The user input is most often sent to a server for processing.

Command Description
<form> … </form> The parent tag for an HTML form.
action=”url” The URL listed here is where the form data will be submitted once user fills it.
method=”POST” It specifies which HTTP method (POST or GET) would be used to submit the form.
accept-charset It specifies the character encodings used for form submission.
autocomplete It specifies whether a form should have autocomplete on or off.
enctype It specifies how the form-data should be encoded when submitting it to the server (only for method="post")
name It specifies the name of the form.
novalidate It specifies that the form should not be validated when submitted
target It specifies where to display the response that is received after submitting the form
Form Elements Description
<input> Used to take input from user, can be shown in different ways depending upon 'type' attribute.
<label> It defines a label for several form elements.
<select> It element defines a drop-down list
<textarea> It element defines a multi-line input field (a text area)
<button> It element defines a clickable button

Example:

<form method="POST" action="/page">
  <label for="name">Page Name</label>
  <input id="name" type="text" name="page_name" />
  <input type="submit" value="Create" />
</form>

🔼Back to Top

Input Types

Field Type HTML Code Notes
plain text <input type="text">
password field <input type="password">
text area <textarea></textarea>
checkbox <input type="checkbox">
radio button <input type="radio"> can be grouped with other inputs
drop-down lists <select><option>
file picker <input type="file">
hidden field <input type="hidden">
submit button <input type="submit">

🔼Back to Top

Important Attributes

Input Tags Attributes:

keyword description
type the type of data that is being input (affects the "widget" that is used to display this element by the browser).
name the key used to describe this data in the HTTP request.
id the unique identifier that other HTML elements, JavaScript and CSS use to access this element in the browser.
value the default data that is assigned to the element.
placeholder not a default value, but a useful HTML5 addition of a data "prompt" for an input.
disabled a Boolean attribute indicating that the "widget" is not available for interaction.

Radio Buttons or Checkboxes Attributes:

keyword description
checked a Boolean that indicates whether the control is selected by default (is false unless).
name the group to which this element is connected. For radio buttons, only one element per group (or name) can be checked.
value the data or value that is returned for a specific group (a multi-element control), if this element is checked.

🔼Back to Top

Inputs

Command Description
<input type="email" name=" "> Sets a single-line textbox for email addresses.
<input type="url" name=" "> Sets a single-line textbox for URLs.
<input type="number" name=" "> Sets a single-line textbox for a number.
<input type="range" name=" "> Sets a single-line text box for a range numbers.
<input type="date" name=" "> Sets a single-line text box with a calendar showing the date .
<input type="month" name=" "> Sets a single-line text box with a calendar showing the month .
<input type="time" name=" "> Sets a single-line text box with a calendar showing the time .
<input type="search" name=" "> Sets a single-line text box for searching .
<input type="color" name=" "> Sets a single-line text box for picking a color.

🔼Back to Top

Tables

Tables allow web developers to arrange data into rows and columns.

Command Description
<table> … </table> Marks a table in a webpage.
<caption> … </caption> Description of the table is placed inside this tag.
<thead> … </thead> Specifies information pertaining to specific columns of the table.
<tbody> … </tbody> The body of a table, where the data is held.
<tfoot> … </tfoot> Determines the footer of the table.
<tr> … </tr> Denotes a single row in a table.
<th> … </th> The value of a heading of a table’s column.
<td> … </td> A single cell of a table. Contains the actual value/data.
<colgroup> … </colgroup> Used for grouping columns together.
<col> Denotes a column inside a table.

🔼Back to Top

Graphics

Command Description
<canvas> … </canvas> Used to draw graphics on a web page using javascript.
<svg> … </svg> Used to defines vector-based graphics in XML format.

🔼Back to Top

Media

Command Description
<video> … </video> Used to show a video on a web page.
<audio> … </audio> Used to play an audio file on a web page.
<object> It defines an embedded object within an HTML document.
<iframe> It helps to play video directly from youtube.

🔼Back to Top