HTML Cheat Sheet is used to develop web pages and HTML latest version 5.x has different features and functionalities in its HTML Elements and Form tags. The other different features are HTML local and session storages in the browser. The element defines a section in a document. According to W3C's HTML documentation: 'A section is a thematic grouping of content, typically with a heading.' A web page could normally be split into sections for introduction, content, and contact information.

This is a cheat sheet with all of the common HTML5 tags, attributes, semantic markup, etc.

All tags can have attributes which are placed within the start tag providing information about an element.

<tagname attribute = 'value'>content</tagname>

The HTML element is everything from the start tag to the end tag.HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the <br> element (which indicates a line break).

Inline vs Block Level Elements

Inline Level: <span>, <img>, <a>, <strong>, <em>

• Do not start on a new line
• Take only the necessary width

Block Level: <div>, <header>, <h1>-<h6>, <p>, <form>, <ol>, <ul>

• Start on a new line
• Take up the full width available

The <span> element is often used as a container for some text. The <span> element has no required attributes, but style, class and id are common.

<div>

The <div> element is often used as a container for other HTML elements. The <div> element has no required attributes, but style, class and id are common.

Text Formating

Html Semantic Tags Cheat Sheet Printable

Formatting elements were designed to display special types of text:

• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Small text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text

Link

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

List

HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag, followed by <li> tags (list items):

Table

Form

The HTML <form> element defines a form that is used to collect user input. An HTML form contains form elements:

Input Types

Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

The <input> element is the most important form element. The <input> element can be displayed in several ways, depending on the type attribute:

• <input type='text'>
• <input type='password'>
• <input type='submit'>
• <input type='button'>
• <input type='checkbox'>
• <input type='color'>
• <input type='date'>
• <input type='datetime-local'>
• <input type='email'>
• <input type='file'>
• <input type='hidden'>
• <input type='image'>
• <input type='month'>
• <input type='number'>
• <input type='radio'>
• <input type='range'>
• <input type='reset'>
• <input type='search'>
• <input type='tel'>
• <input type='time'>
• <input type='url'>
• <input type='week'>

Input Attributes

The value attribute specifies the initial value for an input field. The maxlength attribute specifies the maximum allowed length for the input field. The min and max attributes specify the minimum and maximum values for an <input> element. The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format).

Semantic Html Cheat Sheet

The action attribute defines the action to be performed when the form is submitted. The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data. Each input field must have a name attribute to be submitted. If the name attribute is omitted, the data of that input field will not be sent at all.

Button

HTML buttons are defined with the <button> tag:

Image

HTML images are defined with the <img> tag.

Quotation

Attributes are used to provide additional information about HTML elements. Attributes are always specified in the start tag as name=”value”.

style

<tagname>

The property is a CSS property. The value is a CSS value.

Some of the properties are background-color, color, font-family, font-size, text-align.

class

The class attribute is used to define equal styles for elements with the same class name.

Html Semantic Tags List

So, all HTML elements with the same class attribute will get the same style.

JavaScript can access elements with a specified class name by using the getElementsByClassName() method.

id

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element.

JavaScript can access an element with a specified id by using the getElementById() method.

Semantic Tags

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

Document

• <title>

  • Second most important piece of content.

  • Shown in the browser tab & search results.

  • Should be unique for every page on the site.

• • For linking CSS and other resources like feeds.

  • href is the path the file.

  • rel has different values for other resources.

• <header>

  • When inside <body> it’s the website masthead.

  • When inside <article> it’s the most important information.

• • When inside <body> it’s the website footer.

  • When inside <article> it’s the least important information.

• <main>

  • Primary content of the page.

• • Defines a group a navigation links.

• <article>

  • A piece of content that’s independent.

  • Could be removed from this website and still make sense.

• • A group in a series of related content pieces.

• <aside>

  • Secondary content not required to understand the main content.

• Navigation inside header

Lists

• <ul>

  • An unordered list—the order of items isn’t important.

  • Can only have <li> elements as direct children.

• • An ordered list—the order of the items is important.

  • Could be alphabetical, numerical, best to worst, etc.

  • Can only have <li> elements as direct children.

• <li>

  • A single list item.

  • Must be inside a <ul>, <ol> or <menu>.

  • Can have most other elements inside it.

• • A description list—a grouping of terms and definitions.

  • Words & definitions, titles & summaries, data points, etc.

  • Can only have <dt> and <dd> elements as direct children.

• <dt>

  • Description title, the term of the item.

  • Must come before the <dd>.

• • Description definition, the data, or text of the item.

  • Can be multiple <dd> tags underneath one <dt>.

• Unordered list

• Description list

• • For semantically marking up a web application’s toolbar of buttons.

  • The <menu> tag also uses <li> tags inside—one for each toolbar button.

  • You may still have to remove the bullets.

• Menu toolbar list

Text

• • For making hyperlinks.

  • href is the path to where the link should go.

• <h1>

  • The most important piece of content on the page.

  • On the homepage this should be the company’s name.

  • On inside pages this should be the page title.

• • Content headings, each a sub-heading of the one above.

  • The <h2> is a sub-heading of <h1>, <h3> a sub-heading of <h2>, etc.

• <hgroup>

  • Allows you to group multiple headings together and have them semantically treated as a single heading.

  • It’s primary purpose is for subheadings.

• • A generic paragraph of text.

• <blockquote>

  • A large, stand alone quote from another source.

• • A citation for another source, often used with quotations.

  • A person’s name, a URL, a book, a movie title, etc.

• <q>

  • A small quotation embedded within other content.

• • A string of emphasized, slightly more important text.

  • Screen readers will change their voice for this text.

• <strong>

  • A string of highly emphasized, much more important text.

  • Screen readers will change their voice for this text.

• • Content that was inserted after the document was published.

  • datetime defines when it was added.

• <del datetime='…'>

  • Content that was deleted after the document was published.

  • datetime defines when it was removed.

• • An acronym or abbreviation, like “HTML”, “CSS”, etc.

  • title contains the expanded version, like “Hypertext Markup Language”.

• <dfn>

  • A definition of a term on the page.

  • Should only be used once of the term.

• • Used to highlight a piece of text for reference.

  • The keywords in a search results page, the current navigation item.

• <i>

  • Defines technical term, a ship name, a book title, a thought, sarcasm, another language.

• • Defines a keyword, like product name in a review, a lead sentence in a paragraph.

• <s>

  • Content that’s no longer relevant to the document.

  • Consider if the <del> element is better suited first.

• • Labels the text as having a non-textual annotation.

  • A misspelled word, a Chinese proper name, etc.

• <small>

  • Represents side comments and fine print.

• • Contact information, email, tel, postal address, etc.

• Blockquotes

• Text edits

• Abbreviations

Images & media

• <img src='…' alt='…'>

  • Embeds an image that’s important to the content.

  • src is a path to the image file.

  • alt describes the image if it cannot be seen.

• • Embeds annotated images, illustrations, photos, code, etc.

  • Could be moved out of place and would still make sense.

• <figcaption>

  • For adding a caption/annotation to the <figure>.

  • Must be inside a <figure> element—cannot stand alone.

• • Responsive image insertion—allows developers to provide different images for different contexts.

• <video poster='…' autoplay loop muted controls>

  • For embedding movies into a website.

  • poster is the path to an image that’s displayed before the video plays.

  • autoplay will hint the video to start automatically.

  • loop triggers whether the video should repeat or not.

  • muted can be added to not play sound by default.

  • controls shows or hides the browser’s player buttons.

• • For embedding sounds into a website.

  • autoplay will hint the audio to start automatically.

  • loop triggers whether the audio should repeat or not.

  • muted can be added to not play sound by default.

  • controls shows or hides the browser’s player buttons.

• <source>

  • Must be inside <picture>, <video> or <audio> to define the different versions of content.

  • For example, in video it gives paths to the MP4 and WEBM formats.

• • Used to pair captions, chapters, etc. with <video> elements.

• Figures & captions

  • Use only if there’s a caption.

• • See Responsive & retina images for details.

Data & code

• <sub>

  • Defines text as being subscript.

• • Defines text as being superscript.

• <var>

  • Represents a variable in math or programming.

• • Marks some text as a time or date.

  • datetime defines the machine readable version.

• <data value='…'>

  • Marks elements as being a numerical piece of information.

  • value provides the machine readable version.

• • Represents a single number in a range of numbers.

  • value is the current number.

  • min is the minimum number.

  • max is the maximum number.

• <progress value='…' min='…' max='…'>

  • Represents the current position in a series of steps.

  • value is the current position.

  • min is the minimum position.

  • max is the maximum position.

• • Defines a piece of text as a code sample.

• <pre>

  • A piece of text that has a specific formatting, where tabs, whitespaces, etc. should be maintained.

• • Something a user should type into their computer.

• <samp>

  • Something a user should see output from a computer.

• Time

• Maths

Meaningless tags

• • Inherits meaning from its children.

  • Divides content into logical groups, when no other tag is better suited.

  • Has restrictions on what elements it can be inside.

• <span>

  • Inherits meaning from its children.

Be careful

• • Creates a line break that’s significant to the content.

  • Useful in poems and addresses where the division of lines is important.

  • Do not use to create space in a design—use margins and padding.

• <hr>

  • Represents a thematic break in the content.

  • For example, a scene change or topic change.

  • Do not use to create a horizontal line—use CSS borders.

• • Represents a interactive, clickable button.

  • Should be used in forms and with JavaScript.

  • Do not use to link to another page—use the <a> tag.

• <wbr>

  • Presents an opportunity for the browser to add a line-break if necessary.

  • Groups strings of text, when no other tag is better suited.

Links

• • The href always needs a value—# means nowhere.

• Links on the same page

  • Add an id=' to the element to jump to, refer to that inside the href

• • Just write the name of the HTML file, also include any folders its inside.

• Links to other websites

  • Always start with https:// or less ideally http://

• • Start with tel:, use international format

  • Also send a text message with sms:

• Links to email addresses

  • Pops open a new email message, start with mailto:

  • %20 is used to escape spaces—See more percent-encoding examples

Date/time formats

Html Semantic Tags Cheat Sheet Pdf

Apply to the datetime=' attribute of the <time>, <del> & <ins> elements.

Html Semantic Tags Cheat Sheet Template

• • Format: YYYY

  • Example: 1963

• Year, month

  • Format: YYYY-MM

  • Example: 1963-11

  • Nov. 1963

• • Format: YYYY-MM-DD

  • Example: 1963-11-23

  • Nov. 23, 1963

• Year, week

  • Format: YYYY-Wdd

  • Example: 1963-W47

  • 1936, the week of Nov. 18–24

• • Format: HH:MM

  • Example: 17:16

  • 5:16 PM

• Hour, minute, second

  • Format: HH:MM:SS

  • Example: 17:16:20

  • 5:16:20 PM

• • Format: HH:MM:SS.sss

  • Example: 17:16:20.258

  • 5:16:20.258 PM

• UTC timezone

  • Format: Z

  • Example: Z

  • UTC timezone

• • Format: ±HH:MM

  • Example: -05:00

  • Eastern Standard Time, Daylight Savings

• Year, month, day, hour, minute

  • Format: YYYY-MM-DDTHH:MM

  • Example: 1963-11-23T17:16

  • Nov. 23, 1963 at 5:16 PM

• • Format: YYYY-MM-DDTHH:MM:SS

  • Example: 1963-11-23T17:16:20

  • Nov. 23, 1963 at 5:16:20 PM

• Year, month, day, hour, minute, second, millisecond

  • Format: YYYY-MM-DDTHH:MM:SS.sss

  • Example: 1963-11-23T17:16:20.258

  • Nov. 23, 1963 at 5:16:20.258 PM

• • Format: YYYY-MM-DDTHH:MMZ

  • Example: 1963-11-23T17:16Z

  • Nov. 23, 1963 at 5:16 PM UTC

• Year, month, day, hour, minute, timezone

  • Format: YYYY-MM-DDTHH:MM±HH:MM

  • Example: 1963-11-23T12:16-05:00

  • Nov. 23, 1963 at 12:16 AM EST

• • Format: YYYY-MM-DDTHH:MM:SS±HH:MM

  • Example: 1963-11-23T12:16:20-05:00

  • Nov. 23, 1963 at 12:16:20 AM EST

• Year, month, day, hour, minute, second, millisecond, timezone

  • Format: YYYY-MM-DDTHH:MM:SS.sss±HH:MM

  • Example: 1963-11-23T12:16:20.258-05:00

  • Nov. 23, 1963 at 12:16:20.258 AM EST

• • Format: PddD

  • Example: P686D

  • 686 days

• Period of days, hours

  • Format: PddDThhH

  • Example: P686DT23H

  • 686 days, 23 hours

• • Format: PddDThhHmmM

  • Example: P686DT23H18M

  • 686 days, 23 hours, 18 minutes

• Period of days, hours, minutes, seconds

  • Format: PddDThhHmmMssS

  • Example: P686DT23H18M14S

  • 686 days, 23 hours, 18 minutes, 14 seconds

• Period of days, hours, minutes, seconds, milliseconds

  • Format: PddDThhHmmMss.sssS

  • Example: P686DT23H18M14.400S

  • 686 days, 23 hours, 18 minutes, 14 seconds, 400 milliseconds

• • Format: PThhH

  • Example: PT23H

  • 23 hours

• Period of minutes

  • Format: PTmmM

  • Example: PT18M

  • 18 minutes

• • Format: PTmmMssS

  • Example: PT18M14S

  • 18 minutes, 14 seconds

• Exact date example

• Range of time periods