Html Semantic Cheat Sheet

Posted : admin On 1/29/2022

Semantic HTML introduces elements that can tell developers exactly what the element does or where it’s placed based on the name of that element. Some of these elements are,. About the W3C Cheat Sheet. The W3C Cheat Sheet is an open source tool freely available for Web developers. It provides quick access to useful information from a variety of specifications published by W3C, the leading international Web standards community. It also incorporates data from the WHATWG DOM specification. In this section you will find elements that can be found on many websites and web applications. In general, it is advisable to consider whether a class name can be derived from the semantic HTML. For example cardheader, cardfooter or listitem.

This cheat sheet - or HTML code quick reference - lists the common HTML tags and their attributes, grouped into relevant sections in an easy-to-read format.

What is html? What are tags? - Perhaps check out where to start or what is html first :-)

Basic HTML Structure Help Top
Benefits of semantic html
Common Tags for Blogs Help Top
<h?> heading </h?>Heading (h1 for largest to h6 for smallest)
<p> paragraph </p>Paragraph of Text
<b> bold </b>Make text between tags bold
<i> italic </i>Make text between tags italic
<a href='url'> link name </a>Create a link to another page or website
<div> ... </div>Divide up page content into sections, and applying styles
<img src='filename.jpg'>Show an image
<ul> <li> list </li> </ul>Unordered, bullet-point list
<br>Line Break (force a new line)
<span> red </span>Use CSS style to change text colour
Text Formatting Help Top
<h?> ... </h?>Heading (?= 1 for largest to 6 for smallest, eg h1)
<b> ... </b>Bold Text
<i> ... </i>Italic Text
<u> ... </u>Underline Text
<strike> ... </strike>Strikeout
<sup> ... </sup>Superscript - Smaller text placed below normal text
<sub> ... </sub>Subscript - Smaller text placed below normal text
<small> ... </small>Small - Fineprint size text
<tt> ... </tt>Typewriter Text
<pre> ... </pre>Pre-formatted Text
<blockquote> ... </blockquote>Text Block Quote
<strong> ... </strong>Strong - Shown as Bold in most browsers
<em> ... </em>Emphasis - Shown as Italics in most browsers
<font> ... </font>Font tag obsolete, use CSS. (*)
Section Divisions Help Top
<div> ... </div>Division or Section of Page Content
<span> ... </span>Section of text within other content
<p> ... </p>Paragraph of Text
<br>Line Break
<hr>Basic Horizontal Line
<hr> Tag Attributes:
size='?'Line Thickness in pixels
width='?'Line Width in pixels
width='??%'Line Width as a percentage
color='#??????'Line Colour(*)
align='?'Horizontal Alignment: left, center, right(*)
noshadeNo 3D cut-out
<nobr> ... </nobr>Line Break
Images Help Top
<img src='url' alt='text'>Basic Image
<img> Tag Attributes:
src='url'URL or filename of image (required!)
alt='text'Alternate Text (required!)
align='?'Image alignment within surrounding text (*)
width='??'Image width (in pixels or %)
height='??'Image height (in pixels or %)
border='??'Border thickness (in pixels) (*)
vspace='??'Space above and below image (in pixels) (*)
hspace='??'Space on either side of image (in pixels) (*)
Linking Tags Help Top
<a href='url'> link text </a>Basic Link
<a> Tag Attributes:
href='url'Location (url) of page to link to.
name='??'Name of link (name of anchor, or name of bookmark)
target='?'Link target location: _self, _blank, _top, _parent.
href='url#bookmark'Link to a bookmark (defined with name attribute).
href='mailto:email'Link which initiates an email (dependant on user's email client).
Lists Help Top
<ol> ... </ol>Ordered List
<ul> ... </ul>Un-ordered List
<li> ... </li>List Item (within ordered or unordered)
<ol type='?'>Ordered list type: A, a, I, i, 1
<ol start='??'>Ordered list starting value
<ul type='?'>Unordered list bullet type: disc, circle, square
<li value='??'>List Item Value (changes current and subsequent items)
<li type='??'>List Item Type (changes only current item)
<dl> ... </dl>Definition List
<dt> ... </dt>Term or phrase being defined
<dd> ... </dd>Detailed Definition of term
Tables Help Top
<table> ... </table>Define a Table
<table> Tag Attributes:
border='?'Thickness of outside border
bordercolor='#??????'Border Colour
cellspacing='?'Space between cells (pixels)
cellpadding='?'Space between cell wall and content
align='??'Horizontal Alignment: left, center, right(*)
bgcolor='#??????'Background Colour (*)
width='??'Table Width (pixels or %) (*)
height='??'Table Height (pixels or %) (*)
<tr> ... </tr>Table Row within table
<th> ... </th>Header Cell within table row
<td> ... </td>Table Cell within table row
<td> Tag Attributes:
colspan='?'Number of columns the cell spans across (cell merge)
rowspan='?'Number of row a cell spans across (cell merge)
width='??'Cell Width (pixels or %) (*)
height='??'Cell Height (pixels or %) (*)
bgcolor='#??????'Background Colour (*)
align='??'Horizontal Alignment: left, center, right(*)
valign='??'Vertical Alignment: top, middle, bottom(*)
nowrapForce no line breaks in a particular cell
Frames Help Top
<frameset> ... </frameset>Define the set of Frames
<frameset> Tag Attributes:
rows='??,??, ...'Define row sizes & number of rows (size in pixels or %)
cols='??,??, ...'Define column sizes & number of columns (size in pixels or %)
noresize='noresize'User cannot resize any frames in frameset
<frame> ... </frame>Define a frame within the frameset
<frame> Tag Attributes:
src='url'Location of HTML File for a frame
name='***'Unique name of frame window
marginwidth='?'Horizontal margin spacing inside frame (pixels)
marginheight='?'Vertical margin spacing inside frame (pixels)
noresize='noresize'Declare all frameset sizes as fixed
scrolling='***'Can the user scroll inside the frame: yes, no, auto
frameborder='?'Frame Border: (1=yes, 2=no)
bordercolor='#??????'Border Colour (*)
<noframes> ... </noframes>Unframed content (for browsers not supporting frames)

Define Semantic Html

Css and html cheat sheet
Forms Help Top
<form> ... </form>Form input group decleration
<form> Tag Attributes:
action='url'URL of Form Script
method='***'Method of Form: get, post
enctype='***'For File Upload: enctype='multipart/form-data'
<input> ... </input>Input field within form
<input> Tag Attributes:
type='***'Input Field Type: text, password, checkbox, submit etc.
name='***'Form Field Name (for form processing script)
value='***'Value of Input Field
size='***'Field Size
maxlength='?'Maximum Length of Input Field Data
checkedMark selected field in radio button group or checkbox
<select> ... </select>Select options from drop down list
<select> Tag Attributes:
name='***'Drop Down Combo-Box Name (for form processing script)
size='?'Number of selectable options
multipleAllow multiple selections
<option> ... </option>Option (item) within drop down list
<option> Tag Attributes:
value='***'Option Value
selectedSet option as default selected option
<textarea> ... </textarea>Large area for text input
<textarea> Tag Attributes:
name='***'Text Area Name (for form processing script)
rows='?'Number of rows of text shown
cols='?'Number of columns (characters per rows)
wrap='***'Word Wrapping: off, hard, soft
Special Characters Help Top
&lt;< - Less-Than Symbol
&gt;> - Greater-Than Symbol
&amp;& - Ampersand, or 'and' sign
&quot;' - Quotation Mark
&copy;© - Copyright Symbol
&trade; - Trademark Symbol
&nbsp; - A space (non-breaking space)
&#??;ISO 8859-1 character - replace ?? with the iso code
Miscellaneous Tags Help Top
<!-- ... -->Comment within HTML source code
<!DOCTYPE html ... >Document Type Definition (wiki)
<meta> ... </meta>META information tag
<meta> Tag Attributes:
name='***'Meta name: description, keywords, author
http-equiv='***'HTTP Equivalent Info: title, etc.
content='***'Information content
<link>LINK content relationship tag
<link> Tag Attributes:
rel='***'Type of forward relationship
http='url'Location (URL) of object or file being linked
type='***'Type of object or file, eg: text/css
title='***'Link title (optional)
Body Background & Colours Help Top
<body> Tag Attributes:
background='url'Background Image (*)
bgcolor='#??????' Background Colour(*)
text='#??????' Document Text Colour (*)
link='#??????' Link Colour (*)
vlink='#??????' Visited Link Colour (*)
alink='#??????' Active Link Colour (*)
bgproperties='fixed' Background Properties - 'Fixed' = non-scrolling watermark (*)
leftmargin='?' Side Margin Size in Pixels (Internet Explorer) (*)
topmargin='?' Top Margin Size in Pixels (Internet Explorer) (*)

(*) Important Note:

Tags marked with (*) should still work, but have been superseded by Cascading Style Sheets (CSS), which is now the recommended way to change the font, colour, spacing, border or alignment of HTML elements.

Prev Top Next

This look-up system only works with Javascript activated. You can do a manual look up in the complete list of keywords (TBD).

Lookup in HTML, JavaScript, CSS, SVG, XPath:

Accessibility: WCAG2 at a Glance

Perceivable

  • Provide text alternatives for non-text content.
  • Provide captions and alternatives for audio and video content.
  • Make content adaptable; and make it available to assistive technologies.
  • Use sufficient contrast to make things easy to see and hear.

Operable

  • Make all functionality keyboard accessible.
  • Give users enough time to read and use content.
  • Do not use content that causes seizures.
  • Help users navigate and find content.

Understandable

  • Make text readable and understandable.
  • Make content appear and operate in predictable ways.
  • Help users avoid and correct mistakes.

Robust

  • Maximize compatibility with current and future technologies.

See WCAG Overview.

Internationalization Quicktips

Use Unicode wherever possible for content, databases, etc. Always declare the encoding of content.

Non Semantic Html

The character encoding you choose determines how bytes are mapped to characters in your text.

Normally character encodings limit you to a particular script or set of languages. Unicode allows you to deal simply with almost all scripts and languages in use around the world. In this way Unicode simplifies the handling of content in multiple languages, whether within a single page or across one or more sites. Unicode is particularly useful when used in forms, scripts and databases, where you often need to support multiple languages. Unicode also makes it very straightforward to add new languages to your content.

Unless you appropriately declare which character encoding you are using your users may be unable to read your content. This is because incorrect assumptions may be made by the application interpreting your text about how the bytes map to characters.

Give me more background
Character encodings for beginners explains some of the basic concepts about character encodings, and why you should care. Introducing Character sets and Encodings gives an gentle introduction to various aspects of the topic.
So, how do I do this?
HTML & CSS authors • Spec developers• Server setup

Use characters rather than escapes (e.g. &#xE1; &#225; or &aacute;) whenever you can.

Escapes such as Numeric Character References (NCRs), and entities are ways of representing any Unicode character in markup using only ASCII characters. For example, you can represent the character á in X/HTML as &#xE1; or &#225; or &aacute;.

Such escapes are useful for clearly representing ambiguous or invisible characters, and to prevent problems with syntax characters such as ampersands and angle brackets. They may also be useful on occasion to represent characters not supported by your character encoding or unavailable from your keyboard. Otherwise you should always use characters rather than escapes.

Give me more background
Using character entities and NCRs provides additional information about the use of escapes in markup languages. In particular, note that entities (such as &aacute;) should be used with caution.
So, how do I do this?
HTML & CSS authors • Spec developers • SVG authors

Declare the language of documents and indicate internal language changes.

Information about the (human) language of content is already important for accessibility, styling, searching, editing, and other reasons. As more and more content is tagged and tagged correctly, applications that can detect language information will become more and more useful and pervasive.

When declaring language, you may need to express information about a specific range of content in a different way from metadata about the document as a whole. It is important to understand this distinction.

Give me more background
Language on the Web gives an gentle introduction to various aspects of the topic.
So, how do I do this?
HTML & CSS authors • SVG authors • XML authors • Schema developers • Server setup

Use style sheets for presentational information. Restrict markup to semantics.

It is an important principle of Web design to keep the way content is styled or presented separate from the actual text itself. This makes it simple to apply alternative styling for the same text, for example in order to display the same content on both a conventional browser and a small hand-held device.

This principle is particularly useful for localization, since different scripts have different typographic needs. For example, due to the complexity of Japanese characters, it may be preferable to show emphasis in Japanese X/HTML pages in other ways than bolding or italicisation. It is much easier to apply such changes if the presentation is described using CSS, and markup is much cleaner and more manageable if text is correctly and unambiguously labelled as 'emphasised' rather than just 'bold'.

It can save considerable time and effort during localization to work with CSS files rather than have to change the markup, because any needed changes can be made in a single location for all pages, and the translator can focus on the content rather than the presentation.

Give me more background
Read the talks slides from the 2007 @media conference presentation 'Designing for International Users: Practical Tips'.

Check for translatability and inappropriate cultural bias in images, animations & examples.

If you want your content to really communicate with people, you need to speak their language, not only through the text, but also through local imagery, color, objects and preoccupations. It is easy to overlook the culture-specific nature of symbolism, behaviour, concepts, body language, humor, etc. You should get feedback on the suitability and relevance of your images, video-clips, and examples from in-country users.

You should also take care when incorporating text in graphics when content is translated. Text on complex backgrounds or in restricted spaces can cause considerable trouble for the translator. You should provide graphics to the localization group that have text on a separate layer, and you should bear in mind that text in languages such as English and Chinese will almost certainly expand in translation.

Give me more background
Read the talks slides from the 2007 @media conference presentation 'Designing for International Users: Practical Tips'.

Use an appropriate encoding on both form and server. Support local formats of names/addresses, times/dates, etc.

The encoding used for an HTML page that contains a form should support all the characters needed to enter data into that form. This is particularly important if users are likely to enter information in multiple languages.

Databases and scripts that receive data from forms on pages in multiple languages must also be able to support the characters for all those languages simultaneously.

The simplest way to enable this is to use Unicode for both pages containing forms and all back-end processing and storage. In such a scenario the user can fill in data in whatever language and script they need to.

You should also try to avoid making assumptions that things such as the user's name and address will follow the same formatting rules as your own. Ask yourself how much detail you really need to break out into separate fields for things such as addresses. Bear in mind that in some cultures there are no street names, in others the house number follows the street name, some people need more than one line for the part of the address that precedes the town or city name, etc. In fact in some places an address runs top down from the general to the specific, which implies a very different layout strategy. Be very careful about building into validation routines incorrect assumptions about area codes or telephone number lengths. Recognize that careful labelling is required for how to enter numeric dates, since there are different conventions for ordering of day, month and year.

If you are gathering information from people in more than one country, it is important to develop a strategy for addressing the different formats people will expect to be able to use. Not only is this important for the design of the forms you create, but it also has an impact on how you will store such information in databases.

So, how do I do this?
HTML & CSS authors • HTML & CSS authors • Spec developers

Use simple, concise text. Use care when composing sentences from multiple strings.

Simple, concise text is easier to translate. It is also easier for people to read if the text they are reading is not in their first language.

You should take considerable care when composing messages from multiple substrings, or when inserting variable text into strings. For example, suppose your site uses JSP scripting, and you decide to compose certain messages on the fly. You may create messages by concatenating separate substrings, such as 'Only' or 'Don't', ' return results in ', and 'any format' or 'HTML'. Because the order of text in sentences of other languages can be very different, translating this may present major difficulties.

Similarly, it is important to avoid fixing the positions of variables in text such as 'Page 1 of 10'. The syntax of other languages may require the numbers to be reversed to make sense. If you use PHP, this would mean using a formatting string such as 'Page %1$d of %2$d.', rather than the more simple 'Page %d of %d.'. The latter is untranslatable in some languages.

So, how do I do this?
HTML & CSS authors

On each page include clearly visible navigation to localized pages or sites, using the target language.

Where you have versions of a page or site in a different language, or for a different country or region, you should provide a way for the user to view the version they prefer. This should be available from any page on your site where an alternative exists.

When providing links to pages in other languages, use the name of the target language in the native language and script. Don't assume that the user can read English. For example, in a link to a French page, 'French' would be written 'français'. This also applies if you are guiding the user to a country- or region-specific page or site, eg. 'Germany' would be 'Deutschland'.

So, how do I do this?
HTML & CSS authors

For XHTML, add dir='rtl' to the html tag for right-to-left text. Only re-use it to change the base direction.

Text in languages such as Arabic, Hebrew, Persian and Urdu is read from right to left. This reading order typically leads to right-aligned text and mirror-imaging of things like page and table layout. You can set the default alignment and ordering of page content to right to left by simply including in the html tag.

The direction set in the html tag sets a base direction for the document which cascades down through all the elements on the page. It is not necessary to repeat the attribute on lower level elements unless you want to explicitly change the directional flow.

Embedded text in, for example, Latin script still runs left to right within the overall right to left flow. So do numbers. If you are working with right to left languages, you should become familiar with the basics of the Unicode bidirectional algorithm. This algorithm takes care of much of this bidirectional text without the need for intervention from the author. There are some circumstances, however, where markup or Unicode control characters are needed to ensure the correct effect.

Give me more background
Creating (X)HTML Pages in Arabic & Hebrew provides a gentle introduction to the basics of handling right-to-left text in HTML. The principles are similar for other markup languages.
What you need to know about the bidi algorithm and inline markup provides a gentle introduction to the basics of handling inline bidirectional text.
So, how do I do this?
HTML & CSS authors • SVG authors • XML authors • Schema developers

Validate! Use techniques, tutorials, and articles at http://www.w3.org/International/

Html semantic cheat sheet template

English Typography

Use the proper English characters instead of their misused equivalents.

Quotes
(&#8220;) opening quote (instead of ')
(&#8221;) closing quote (instead of ')
Apostrophe
(&#8217;) apostrophe (instead of ')
Dashes and Hyphens
(&#8211; or &ndash;) en dash, used for ranges, e.g. “13–15 November” (instead of -)
(&#8212; or &mdash;) em dash, used for change of thought, e.g. “Star Wars is—as everyone knows—amazing.” (instead of -, or --)
Ellipsis
(&#8230; or &hellip;) horizontal ellipsis, used to indicate an omission or a pause (instead of ...)