Html Semantic Tags Cheat Sheet

While using HTML it can be very handy to have an easy way to remember how to use HTML tags properly and how to apply them. MDN provides you with an extended HTML documentation as well as a deep instructional HTML how-to. However, in many cases we just need some quick hints as we go. That's the whole purpose of the cheatsheet, to give you some quick accurate ready to use code snippets for common usages.

Html Semantic Tags List
Html Semantic Tags Cheat Sheet Template

For (let key, value of Object.entries(object1)) returns array of object's keys and values: key, value MDN. 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.' Remember that HTML tags must be used for their semantic, not their appearance. It's always possible to totally change the look and feel of a given tag using CSS so, when using HTML, take the time to focus on the meaning rather than the appearance.

Remember that HTML tags must be used for their semantic, not their appearance. It's always possible to totally change the look and feel of a given tag using CSS so, when using HTML, take the time to focus on the meaning rather than the appearance.

Inline elements

An 'element' is a single part of a webpage. Some elements are large and hold smaller elements like containers. Some elements are small and are 'nested' inside larger ones. By default, 'inline elements' appear next to one another in a webpage. They take up only as much width as they need in a page and fit together horizontally like words in a sentence or books shelved side-by-side in a row.All inline elements can be implemented within the <body></body> tags.

Html Semantic Tags List

Usage	Code snippet	Result
A simple link	`<a href='https://developer.mozilla.org'>A link to MDN</a>`	A link to MDN
A simple image	`<img src='/static/img/beast.png' width='25' />`
A generic inline container	`<p>p its used to <span>style and group</span> particular elements </p>`	p its used to style and group particular elements
Another inline container	`<p>span its used to differentiate a part <span>of the content</span> that we will work on differently </p>`	span its used to differentiate a part of the content that we will work on differently
Emphasize some text	`<em>I'm posh</em>`	I'm posh
Italic text	`You can mark a phrase in the text in <i>italics</i>`	You can mark a phrase in the text in italics
Bold some text	`<b>Bold a word or phrase</b>within the text`	Bold a word or phrase within the text
Mark text as important	`<strong>I'm important</strong>`	I'm important
Highlight some text	`<mark>Notice me</mark>`	Notice me
Draw a line through irrelevant text	`<s>I'm irrelevant</s>`	~~I'm irrelevant~~
Underline a non-textual annotation	`This is <u>mispelled</u>`	This is mispelled
Text displayed lower than normal text	`H<sub>2</sub>O`	H₂O
Small text	`Used to represent the <small>small print </small>of a document`	Used to represent the small print of a document
Used for an address	`<address>Main street 67</address>`	Main street 67
Used for a textual cite	`<cite>Lorem ipsum</cite>`	lorem ipsum
Text displayed higher than normal text	`x<sup>2</sup>`	x²
A short inline quotation	`<q>The q element indicates a short inline quotation.</q>`	The q element indicates a short inline quotation.
A line break	`Line 1<br>Line 2`	Line 1 Line 2
Suggesting a line break	`It is used to suggest the browser to cut the text on this site if </wbr>there is not enough space to display it on the same line`	It is used to suggest the browser to cut the text on this site if there is not enough space to display it on the same line
Date in readable form	`It is used to format the date legibly for the user, such as: <time datetime='2020-05-24' pubdate>published on 23-05-2020</time>`	It is used to format the date legibly for the user, such as:
Text displayed in code format	<p>This text is in normal format.</p> <code>This text is in code format.</code> <pre>This text is in predefined format.</pre>	This text is in normal format. `This text is in code format.`
Embedded Audio	<audio controls='controls' src='https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/2587/81ebdf32055cc6bb8aab948b51d58d9f/AudioTest%20(1).ogg'>Your browser does not support the HTML5 Audio element.</audio>	Your browser does not support the HTML5 Audio element.
Embedded Audio with alternative sources	<audio controls='controls'> <source='https://mdn.mozillademos.org/files/2587/AudioTest%20%281%29.mp3' type='audio/mpeg'> <source='https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/2587/81ebdf32055cc6bb8aab948b51d58d9f/AudioTest%20(1).ogg' type='audio/mpeg'> Your browser does not support Audio. </audio>	Your browser does not support Audio.
Embedded Video	<video controls src='https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4'>The <code>video</code> element is unsupported.</video>

Block elements

'Block elements,' on the other hand, take up the entire width of a webpage. They also take up a full line of a webpage; they do not fit together side-by-side. Instead, they stack like paragraphs in an essay or toy blocks in a tower.

Usage	Code snippet	Result
A simple paragraph	`<p>I'm a paragraph</p>` `<p>I'm another paragraph</p>`	I'm a paragraph I'm another paragraph
An extended quotation	`<blockquote>The blockquote element indicates an extended quotation.</blockquote>`	The blockquote element indicates an extended quotation.
Additional information	`<details><summary>Html Cheatsheet</summary><p>Inline elements</p><p>Block elements</p></details>`	Html Cheatsheet Inline elements Block elements
An unordered list	`<ul> <li>I'm an item</li> <li>I'm another item</li> </ul>`	I'm an item I'm another item
An ordered list	`<ol> <li>I'm the first item</li> <li>I'm the second item</li> </ol>`	I'm the first item I'm the second item
A definition list	`<dl> <dt>A Term</dt> <dd>Definition of a term</dd> <dt>Another Term</dt> <dd>Definition of another term</dd> </dl>` Why wont the download icon come up on netflix macbook air?.	A Term Definition of a term Another Term Definition of another term
A horizontal rule	`<hr>`
Text Heading	`<h1> This is Heading 1 </h1>` `<h2> This is Heading 2 </h2>` `<h3> This is Heading 3 </h3>` `<h4> This is Heading 4 </h4>` `<h5> This is Heading 5 </h5>` `<h6> This is Heading 6 </h6>`	This is Heading 2 This is Heading 3 This is Heading 4 This is Heading 5 This is Heading 6

Your browser does not support the audio element.

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

Download legacy java se 6 runtime for mac. 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

Html Semantic Tags Cheat Sheet Template

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

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.

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.