Scribd
Upload
Sign up
41 views11 pages

HTML5 Elements Cheat Sheet

The HTML5 Cheat Sheet provides a comprehensive overview of essential HTML tags and their functions, including structural elements like <html>, <head>, and <body>, as well as formatting, links, images, lists, and new HTML5 tags. It serves as a quick reference for web developers to efficiently utilize HTML in their projects. Additionally, it covers form elements and character entities, making it a valuable resource for both beginners and experienced developers.

Uploaded by

Sunil Sharma
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
41 views11 pages

HTML5 Elements Cheat Sheet

The HTML5 Cheat Sheet provides a comprehensive overview of essential HTML tags and their functions, including structural elements like <html>, <head>, and <body>, as well as formatting, links, images, lists, and new HTML5 tags. It serves as a quick reference for web developers to efficiently utilize HTML in their projects. Additionally, it covers form elements and character entities, making it a valuable resource for both beginners and experienced developers.

Uploaded by

Sunil Sharma
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.

HTML5 Cheat Sheet

For web developers, it is crucial to be proficient in HTML. And while HTML is not the most difficult to get
accustomed to, once can still manage to forget all the nooks and crannies it has to offer.

A good solution, therefore, is to always have a cheat sheet at hand , helping you in your most troubling
moments.

Document Summary

Let us see how we can break the code up in different components:

<html> … </html>

This tag specifies that the webpage is written in HTML. It appears at the very first and last line of the
webpage. It is mainly used to show that the page uses HTML5 – the latest version of the language. Also
known as the root element, this tag can be thought of as a parent tag for every other tag used in the
page.

<head> … </head>

This 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.

<title> … </title>

As the name suggests, this tag contains the title/name of the webpage. You can see this in your
browser’s title bar for every webpage open in the browser. Search engines use this tag to extract the
topic of the webpage, which is quite convenient when ranking relevant search results.

<body> … </body>

Everything the user sees on a webpage is written inside this tag. It is a container for all the contents of
the webpage.

Example

<html>
<head>
<title>My First Website</title>
</head>
<body>

</body>
</html>
Document Information
<base/>

Used to specify the base URL of your site, this tag makes linking to internal links on your site cleaner.

<meta/>

This is the meta data tag for the webpage.


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.

Example

<html>
<head>
<meta charset="utf-8">
<base href="[Link] target="_blank" />
<title>My Beautiful Website</title>
<link rel="stylesheet" href="/css/[Link]">
<script type="text/javascript"> var dummy = 0;
</script>
</head>
<body>

</body>
</html>

Document Structure
<h1..h6> … </h1..h6>

Six different variations of writing a heading.


<h1> 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 this tag.

<br/>

A line break for web pages. Is used when wanting to write a new line.

<hr/>

Similar to the above tag. But in addition to switching to the next line, this tag also draws a horizontal bar
to indicate the end of the section.

Example

<div>
<h1>Top 5 Greatest Films</h1>
<p>These are considered the greatest
<span>reel-icon</span> of all time </p>
<hr/>
<h2>1. The Godfather</h2>
<p>This 1972 classic stars Marlon Brando and Al Pacino.</p>
</div>

Test Formatting
<strong> … </strong>

Makes text bold. Used to emphasize a point

<b> … </b>

Alternative to the above tag, also creates bold text.

<em> … </em>

Another emphasis tag, but this displays text in italics.

<i> … </i>

Also used to display text in italics, but does not emphasize it like the above tag.

<tt> … </tt>

Formatting for typewriter-like text. No longer supported in HTML5.


<strike> … </strike>

Another old tag, this is used to draw a line at the center of the text, so as to make it appear unimportant
or no longer useful.

<cite> … </cite>

Tag for citing author of a quote.

<del> … </del>

Pre-formatted, ‘monospace’ text laid out with whitespace inside the element intact.

<ins> … </ins>

Denotes text that has been inserted into the webpage.

<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.

<acronym> … </acronym>

Tag for acronyms. No HTML5 support.

<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.

<sub> … </sub>

Used for writing a subscript (smaller font just below the mid-point of normal font). Example: ax

<sup> … </sup>

Similar to the above tag, but for superscripting.


<small> … </small>

Reduces text size. In HTML5, it often refers to redundant or invalid information.

Example

<p><strong>Bold text</strong> Regular text


<em>some words in italics</em> regular text once again.</p>

<blockquote>
Anyone who has never made a mistake has never tried anything new.<cite>- Albert Einstein</cite>
</blockquote>

<pre>
Some pre-formatted text
</pre>
<p>A code snippet: <code>some code</code></p>

Links
<a href=””> … </a>

Anchor tag. Primarily used for including hyperlinks.

<a href=”[Link] … </a>

Tag dedicated to sending emails.

<a href=”[Link] … </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.

Images
<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=””

Coordinates of the vital information of the shape. Example: vertices for rectangles, center/radius for
circles.

Example

<img src="[Link]" width="145" height="126" alt="Planets" usemap="#planetmap">


<map name="planetmap">
<area shape="rect" coords="0,0,60,100" href="[Link]" alt="Sun">
<area shape="circle" coords="90,58,3" href="[Link]" alt="Mercury">
<area shape="circle" coords="124,58,8" href="[Link]" alt="Venus">
</map>
Lists
<ol> … </ol>

Tag for ordered or numbered list of items.

<ul> … </ul>

Contrary to the above tag, used for unordered list 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.

Example

<ol>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ol>

<ul>
<li>France</li>
<li>Germany</li>
<li>Italy</li>
</ul>

<dl>
<dt>Toyota</dt>
<dd>Japanese car brand</dd>
<dt>Armani</dt>
<dd>Italian fashion brand</dd>
</dl>
HTML5 New Tags
<header> … </header>

Specifies the webpage header. Could also be used for objects inside the webpage.

<footer> … </footer>

Specifies the webpage footer. Could also be used for objects inside the webpage.

<main>…</main>

Marks the main content of the webpage.

<article>…</article>

Denotes an article.

<aside> … </aside>

<figure>…</figure>

A tag reserved for figures (diagrams, charts) in HTML5.

<figcaption> … </figcaption>

A description of the figure is placed inside these.

<mark>…</mark>

Used to highlight a particular portion of the text.

<nav>…</nav>

Navigation links for the user in a webpage.

<menuitem>…</menuitem>

A particular item from a list or a menu.

<meter>…</meter>

Measures data within a given range.

<progress>…</progress>

Typically used as a progress bar, this is used to track progress.

<rp>…</rp>

This tag is meant for showing text for browsers without ruby annotation support.
<rt>…</rt>

Displays East Asian typography character details.

<ruby>…</ruby>

Describes a Ruby annotation for East Asian typography

<time>…</time>

Tag for formatting date and time.

<wbr>

A line-break within the content.

Denotes content displayed in a sidebar of the webpage.

<section>…</section>

Specifies a particular section in the webpage.

<details> … </details>

Used for additional information. User has the option to view or hide this.

<summary> … </summary>

Used as a heading for the above tag. Is always visible to the user.

<dialog>…</dialog>

Used to create a dialog box

Collective Character Objects


&#34; &quot;
Quotation Marks - “

&#60; &lt;
Less than sign - <

&#62; &gt;
Greater than sign - >

&#160; &nbsp;
Non-breaking space
&#169; &copy;
Copyright symbol - ©

&#38; &amp;
Ampersand - &

&#64; &Uuml;
@ Symbol - @

&#149; &ouml;
Small bullet - •

&#153; &ucirc;
Trademark symbol –

Forms

<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=””

It specifies which HTTP method (POST or GET) would be used to submit the form.

enctype=””

Only for POST method, this dictates the data encoding scheme to be used when form

is submitted.

autocomplete

Determines if the form has auto-complete enabled.

novalidate
Determines whether the form should be validated before submission.

accept-charsets

Determines character encodings when form is submitted.

target

After submission, the form response is displayed wherever this refers to, usually has the following
values: _blank, _self, _parent, _top

<fieldset> … </fieldset>

Identifies the group of all fields on the form.

<label> … </label>

This is used to label a field in the form.

<legend> … </legend>

This operates as a caption for the <fieldset> element.

<input />

This tag is used to take input from the user.

Input type is determined by a number of attributes.

Common questions

Powered by AI

The <head> tag in an HTML document specifies metadata about the webpage, such as the document's title, charset, linked stylesheets and scripts, and other meta-information. It is crucial for setting up the webpage environment before rendering. The <body> tag, on the other hand, encompasses all the visible elements of a webpage, including text, images, and links, essentially being the container for all user-facing content .

The <figure> and <figcaption> tags in HTML5 offer semantic advantages by clearly associating images, diagrams, or illustrations with descriptive captions. The <figure> tag encapsulates both the visual content and the associated <figcaption>, which contains the caption. This explicit relationship enhances accessibility and search capabilities, as screen readers and search engines can easily identify the association between the image and its description, promoting better understanding and content indexing .

Using outdated tags like <tt> and <strike> in HTML5 documents can lead to potential drawbacks, such as reduced compatibility across browsers and devices, since these tags are not supported in modern HTML5 specifications. This can result in inconsistent rendering of web pages, negatively affecting user experience and making the code less maintainable. Furthermore, reliance on these tags prevents developers from leveraging the semantic richness and accessibility improvements offered by HTML5-compliant alternatives .

The <img> and <map> tags together enable the integration of image maps, which enhance user interactivity by allowing specific regions of an image to be clickable, directing users to different URLs based on the area clicked. This feature can improve navigation and user engagement by providing an intuitive, visually oriented way to access related content or additional information without cluttering the interface with numerous links .

HTML5 enhancements have positively impacted mobile usability by introducing elements and attributes specifically designed to improve the mobile browsing experience. The <a href='tel:###-###'> tag, for instance, converts phone numbers into clickable links, facilitating direct calling from mobile devices. Additionally, form elements with attributes like autocomplete and new input types (such as 'email' and 'tel') streamline user interactions by optimizing data entry and improving accessibility. These features collectively enhance usability by making interactions more intuitive and efficient on smaller screens .

In HTML5, the <strong> and <em> tags are used for semantic emphasis, conveying importance and stress in the content they wrap, and are visually represented as bold and italicized text, respectively. In contrast, the <b> and <i> tags provide visual styling without semantic meaning, simply making text bold or italic without implying emphasis. HTML5 prioritizes semantic markup by promoting <strong> and <em> to clarify the intended meaning of content beyond mere presentation .

HTML5's inclusion of new structural elements such as <header>, <footer>, and <section> has significantly improved the semantic organization and clarity of web pages. These elements allow developers to clearly define different parts of web content, thus enhancing both human readability and code maintainability. <header> and <footer> provide semantic delineation of repetitive content across pages, while <section> allows for logical division of content into related groups, each with its own thematic context, improving document outline, accessibility, and SEO .

The <html> tag in HTML5 serves as the root element of the document, encapsulating all other elements of the webpage. It functions as a parent tag for all other tags, establishing the document as an HTML document. This tag is essential as it indicates to the browser and developers that the document follows the structure and syntax of HTML5, facilitating compatibility and proper rendering .

The <base> tag in HTML is used to set a base URL for all relative URLs within a document. By defining a base URL, it simplifies the linking of resources like images, stylesheets, and scripts, making it cleaner and more consistent by providing a singular point of reference. This can enhance maintainability and accuracy in resource linking across a webpage, reducing the potential for errors in path specifications .

The <div> tag is used to define block-level divisions within an HTML document, often functioning as a container for organizational purposes, such as separating content into logical sections or layout structures. In contrast, the <span> tag is an inline element used to apply styling to a part of text without breaking the flow of the document, often employed to highlight portions within a block of text. Thus, <div> organizes content on a larger scale, while <span> is for more granular inline modifications .

You might also like