Scribd
Upload
28 views

HTML Ccheatsheet

This document provides a cheat sheet overview of common HTML tags and terminology. It defines tags used in the head and body sections, semantic grouping tags, UI tags, and common layout examples.

Uploaded by

amitkumardatta2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

HTML Ccheatsheet

This document provides a cheat sheet overview of common HTML tags and terminology. It defines tags used in the head and body sections, semantic grouping tags, UI tags, and common layout examples.

Uploaded by

amitkumardatta2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

C​SE 154: Web Programming

HTML “Cheat Sheet”


Terminology

Term Definition Example

Tag Make up the start and end of an element. <p></p>


Tags that contain content (other tags or text)
have open/closing pairs. Tags that do not
have content are almost always self-closing.

Element The term to refer to the page element (tag(s) <p>


and any content). Content of a paragraph
element.
</p>

Attribute Defines a property for an element, consists of <img src="pup.gif"


an attribute/value pair, and is defined within alt="An adorable puppy.">
the element's start tag (or self-closing tag).
An element's start tag may contain any (src and alt are attributes)
number of space-separated attribute/value
pairs.

Some attributes are “boolean” meaning they <button disabled>


don’t require a value (e.g. the ​disabled Click Me!
attribute for button elements) </button>

Semantic Tag HTML elements that introduce meaning to Options include, but not limited to:
the web page rather than just presentation. <strong> <main> <section>
<header> <blockquote> <code>
<em>

Deprecated/ Tags that are discouraged to use and Options include, but not limited to:
Presentational browsers may remove support for them in the <center> <font> <b> <i> <u>
Tags future if they haven’t already. Many are <strike> <s> <applet>
presentational tags originally used to control
display without semantic value.

CSE 154 HTML Cheat Sheet Summer 2019 - Version 06/23/19


Tags Used in the ​<head> ​Section

Tag Description
<title> t​ext <
​ /title> title shown on page tab
attribute="value" .
<meta ​ ​ .. /> page metadata
url​" rel="stylesheet" />
<link href="​ links to a CSS style sheet
url​"></script>
<script src="​ link to JavaScript program
<!-- c
​omments ​--> comment (can appear in ​head o
​r ​body​
)

Tags Used in the ​<body> ​Section

Tag Display Description


text <
<p>​ ​ /p> Block paragraph
text <
<h1>​ ​ /h1> Block headings (h1 for top-level heading
text <
<h2>​ ​ /h2> through h6 for six-level heading)
...
text <
<h6>​ ​ /h6>
<hr /> Block horizontal rule (line)
<br /> Inline line break
<a href="​ path​">​
text ​</a> Block anchor (link)
<img src="​ path​" alt="​ description​" Inline-block image
/>
text​</em>
<em>​ Inline emphasis (italic)
text <
<strong>​ ​ /strong> Inline strong emphasis (bold)
<ol> Block ordered (​ol​
) and unordered (​ul​
) list;
text <
<li>​ ​ /li> list item (​li​
)
text <
<li>​ ​ /li>
text
<li>​
<ul>
nested item text​</li>
<li>​
nested item text​</li>
<li>​
</ul>
</li>
</ol>

CSE 154 HTML Cheat Sheet Summer 2019 - Version 06/23/19


Tags Used in the ​<body>​ ​Section (Continued)

Tag Display Description


<blockquote> Block block-level quotation (often contains a ​footer
text <
<p>​ ​ /p> for citing an author)
</blockquote>
text <
<q>​ ​ /q> Inline inline-level quotation
text <
<code>​ ​ /code> Inline computer code (monospace)
text ​</pre>
<pre>​ Inline pre-formatted ​text ​(preserves whitespace)
<table> Block table of data (​table​
)
text ​</caption>
<caption>​ description of table (​caption​
)
<tr> table row (​tr​
)
heading 1 <
<th>​ ​ /th> table heading cell (​hr​
) normal table cell (​td​
)
heading 2 <
<th>​ ​ /th>
</tr>
<tr>
<td> cell 1 </td>
<td> cell 2 </td>
</tr>
...
</table>
<div> ... </div> Block block-level container of a page (should only be
used for styling/layout purposes)
<span> ... </span> Inline inline-level section of a page (should only be
used for styling/layout purposes)

CSE 154 HTML Cheat Sheet Summer 2019 - Version 06/23/19


HTML5 Semantic Grouping Tags (all block elements)

Tag Description
<header> Header of a page or another structural element
Main content of a page. The content inside should be unique to the document and ​not
<main> contain content that is shared across pages (e.g., website nav links, search bars, etc.)
<footer> Footer of a page or another structural element
<article> A standalone piece of content (e.g., entire blog post including title, author, etc.)
<section> A piece of content that is part of another (e.g., a chapter section of a reading)
<aside> Defines some content aside from the content it is placed in (e.g., a sidebar in an article)
<nav> Navigational element, often containing links to navigate within/between pages

Some common layout examples:

CSE 154 HTML Cheat Sheet Summer 2019 - Version 06/23/19


Common HTML UI Tags

Tag Display Description


<form> block form element to group input elements, often
​content for submitting data/information or specifying
</form> options for page application
<button> Inline clickable button
content type can be ​submit, reset, button
</button>
type​" name="​
<input type="​ name​" /> Inline form element input tag
type can be ​text, number, checkbox,
radio, file, etc.

num​" cols="​
<textarea rows="​ num​"> Inline multi-line ​text ​input box
initial text
</textarea>
text <
<label>​ ​ /label> Inline clickable ​text l​ abel around a form control
<select> Inline drop-down selection box (​select​
);
text <
<option>​ ​ /option> each option within the box (​option​
);
<optgroup label="text"> a labeled group of option (​optgroup​
);
text <
<option>​ ​ /option>
text <
<option>​ ​ /option>
</optgroup>
...
</select>

<fieldset> Block a grouped set of form fields with a legend


text <
<legend>​ ​ /legend>
...
</fieldset>

HTML Entities Reference


Result Description Entity Name
non-breaking space &nbsp;
< less than &lt;
@ at symbol &commat;
> greater than &gt;
& ampersand &amp;
© copyright &copy;

CSE 154 HTML Cheat Sheet Summer 2019 - Version 06/23/19

You might also like