All HTML Text Styling Tags Demonstrated

HOME
This is a comprehensive list and quick demonstration of all single level HTML Text Styling Tags.

Refer to the HTML standard Rendering Headings Grouping-tags Text-semantics Obsolete-tags
within which the many optional styling parameters are enumerated and discussed in full detail.

Tags which form nested structures such as Lists, Tables, Figures and Forms are not shown here,
nor are semantic grouping tags such as header, article, section, etc which impose no attributes.
Note that this subject matter is completely separate from and has nothing to do with CSS styling.

HTML Form Rendered Example Description
<plaintext/> or <plaintext> self closing tag See example at bottom of page. Show HTML instead of rendering. DEPRECATED
<a name="above"  href="#below">L2Below</a>
<a id="below"  href="#above">L2Above</a>		 L2Below
L2Above		 These clickable examples
jump to each other.
<time datetime="2023-11-18">Today</time> Provides machine readable datetime.
<data value="7">VII</data> VII Provides machine readable value.
<ruby>H<rp>(</rp><rt>hi</rt><rp>)</rp></ruby>
 H(hi) Places small text above the regular text
<abbr title="Abbreviation">Abr.</abbr>
 Abr. Provides mouse-over text.
<acronym title="No Good">NG</acronym>
 NG Provides mouse-over text. DEPRECATED
<bdi lang="">Left 2 right!</bdi>
 Left 2 right! Text to isolate from BIDI surroundings.
<bdo dir=rtl>CANADA</bdo>
<bdo dir=ltr>CANADA</bdo>
 CANADA
CANADA		 Specify BIDI left to right vs
right to left rendering of text.
supercalifragilistic<wbr>expialidocious supercalifragilisticexpialidocious Permits a word to break in lieu of a hyphen.
<nobr>do not anywhere line-break</nobr> do not anywhere here line-break Prevents line breaks. DEPRECATED10
supercalifragilistic<br/>expialidocious supercalifragilistic
expialidocious		 Forces a line break at a specific position.
<spacer type="" width="" height=""/> FakeSpacer! See Note0 below this table. OBSOLETE0
Plain untagged text Plain text Bare text is shown here for comparison purposes.
<span>Plain text</span> Plain text The unstyled span tag does absolutely nothing.
<div>Plain text</div>
Plain text
 Encapsulates the text in a stylable12 block.
<font>Font plain</font>
<font face="sans-serif">Font sans-serif</font>
<font face="serif">Font serif</font>
<font face="monospace">Font monospace</font>
<font face="cursive">Font cursive</font>
<font face="fantasy">Font fantasy</font>
<font color="purple">Font purple</font>
<font size="+1">Font size +1</font>
<font size="-1">Font size -1</font>
<font size="-1">Font size 4</font>
<font size="-1">Font size 1</font>		 Font plain
Font sans-serif
Font serif
Font monospace
Font cursive
Font fantasy
Font purple
Font size +1
Font size -1
Font size 4
Font size 2 		DEPRECATED
Size range -3 through +3
or absolute 1 through 7.
<p>Paragraph</p>

Paragraph

 Margin above and below is 1em.
<pre>Preformat&amp;</pre>
 
Preformat&
 Monospaced serif font. Preserves white space.
Margin above and below is 1em.
<listing>Listing&amp;</listing>
 Listing& Monospaced serif font. Preserves white space.
Margin above and below is 1em. DEPRECATED8
<xmp>NoEscape!</xmp>
Do not escape any  > " < & ' characters!		 Literal! Monospaced serif font. Preserves white space.
Margin above and below is 1em. DEPRECATED9
<blockquote>Blockquote</blockquote>
Blockquote
 Has a 40px left side margin.
Margin above and below is 1em.
<center>Centered</center>
Centered
 Simply centers the text. DEPRECATED4
<marquee>Scrolling!</marquee> Scrolling! Scrolling text. DEPRECATED3
<blink>FakeBlink!</blink> FakeBlink! See Note1 beneath table. OBSOLETE1
<code>Code</code> Code Monospaced serif font.
<samp>Sample</samp> Sample Monospaced serif font. Computer messages.
<kbd>Keyboard</kbd> Keyboard Monospaced serif font. Typed on keyboard.
<tt>TeleType</tt>
 TeleType Monospace serif font. DEPRECATED2
<q>Quote</q> Quote Adds virtual quotation marks as shown.
<mark>Marked</mark> Marked Adds virtual yellow highlight11 as shown.
<u>Underlined</u>
 Underlined Underlined font. DEPRECATED5
<b>Bold</b>
 Bold Bold style font.
<strong>Strong</strong>
 Strong Bold style font.
<i>Italic</i>
 Italic Italic style font.
<em>Emphasis</em> Emphasis Italic style font.
<cite>Citation</cite> Citation Italic style font.
<address>Address</address>
Address
 Italic style font.
<dfn>Definition</dfn> Definition Italic style font.
<var>Variable</var> Variable Italic style font. For math variables.
<s>Strikethrough</s>
 Strikethrough Strikethrough font. DEPRECATED6
<strike>Strikethrough</strike> Strikethrough Strikethrough font. DEPRECATED6
<del>Deleted</del>
 Deleted Strikethrough font.
<small>Smaller</small>
 Smaller Smaller font size.
<big>Bigger</big>
 Bigger Bigger font size. DEPRECATED7
<sup>Superscript</sup> Superscript Superscript font.
<sub>Subscript</sub>
 Subscript Subscript font.
<h1>Heading1</h1>

Heading1

 Margin above and below is 0.67em.
<h2>Heading2</h2>

Heading2

 Margin above and below is 0.83em.
<h3>Heading3</h3>

Heading3

 Margin above and below is 1.00em.
<h4>Heading4</h4>

Heading4

 Margin above and below is 1.33em.
<h5>Heading5</h5>
Heading5
 Margin above and below is 1.67em.
<h6>Heading6</h6>
Heading6
 Margin above and below is 2.33em.

Note0: Emulate spacer with CSS style: <spacer style="display:inline-block; height:2em; width:2em; vertical-align:middle"></spacer>
Note1: Blink is now broken in all browsers so it becomes necessary to use one of the following four simulations:
<style>blink{animation:blink 1s step-end infinite}@keyframes blink{67%{visibility:hidden}}</style>
<style>blink{animation:blink 1s step-end infinite}@keyframes blink{67%{opacity:0}}</style>
<script>const blnk=document.querySelector('blink');setInterval(()=>{blnk.style.opacity=0;setTimeout(()=>blnk.style.opacity='',333)},999)</script>
<script>const blnk=document.querySelector('blink');setInterval(()=>{blnk.style.visibility='hidden';setTimeout(()=>blnk.style.visibility='',333)},999)</script>
Note2: Emulate tt in CSS with: <style>tt{font-family:monospace}</style>
Note3: The marquee tag can likely be emulated in CSS with an animation.
Note4: Emulate center in CSS with: <style>center{text-align:center}</style>
Note5: Emulate u in CSS with: <style>u{text-decoration:underline}</style>
Note6: Emulate s & strike in CSS with: <style>s,strike{text-decoration:line-through}</style>
Note7: Emulate big in CSS with: <style>big{font-size:larger}</style>
Note8: Emulate listing in CSS with: <style>listing{display:block;margin-block-start:1em;margin-block-end:1em;font-family:monospace;white-space:pre;unicode-bidi:isolate;unicode-bidi:bidi-override}</style>
Note9: Do not escape > < & within the deprecated xmp tag. It can be emulated by adding these 2 lines AFTER browsers stop supporing it:
<style>xmp{display:block;margin-block-start:1em;margin-block-end:1em;font-family:monospace;white-space:pre;unicode-bidi:isolate;unicode-bidi:bidi-override}</style>
<script defer>const xmpTags=document.getElementsByTagName("xmp");for(var i=0;i<xmpTags.length;i++){xmpTags[i].innerHTML=xmpTags[i].innerHTML.replace(/&/g,"&amp;").replace(/>/g,"&gt;").replace(/</g,"&lt;")}</script>
Note10: Emulate nobr in CSS with: <style>nobr{white-space:nowrap;white-space:normal}</style>
Note11: The default style is   mark{background:yellow;color:black}   but this can be modified to provide a different color.
Note12: The default style is   display:block   but is commonly changed to   display:inline-block   or   width:fit-content   or as desired.

Custom tags and elements

Custom tags must start with a letter, be in lower case and contain a dash <my-tag> but they must be registered before using them via Javascript.
Information on custom elements can be found in the HTML living standard here: https://html.spec.whatwg.org/multipage/custom-elements.html

Demonstration of the <plaintext> tag:

Insert <plaintext> tag before first line in HTML page to display entire page as source code instead of rendered HTML.
This tag can not be closed so it is fairly useless except for troubleshooting. Here is an actual live example in an iframe:

Safety, accuracy and completeness of information provided herein is not guaranteed,
so be inspired by it but do not use it as a basis for experimentation or other actions.

Clickable link!  TOP  ©™
 HOME 
 Valid HTML & CSS!
Congrenation.com 2024-12-21T15:58:43.066Z
Version 20231217