XHTML Format - Quick Reference Guide

Posted: February 1, 2009 at 11:55:54 by Dani Iswara. Words count: 811.
Last updated: January 23, 2010 at 16:57:24.

This quick reference guide is intended to present XHTML (Extensible HyperText Markup Language) format used on Dani Iswara .Net. If I need to change the presentational structure made on CSS (Cascading Style Sheets), this page will covers all items. Based on XHTML web standards, web accessibility, semantic web, semantic XHTML, a whole viewable codes and source codes on this page, currenty used on my blog:

Block elements

Division (div)

For the image in the content:

User profile's input in drop-down menu.

Figure 1. Default comment form design by Blogspot.

XHTML source code: 
<div class="figure-center">
<p><img src="http://geocities.com/iswara_wp/comment-form1-dani.jpg" width="90%" alt="Default comment form design by Blogspot" /></p>
<p>Figure 1. Default comment form design by Blogspot.</p>
</div>

Headings (h1-h6)

For the h1, see it as a blog title on the homepage and as a page/post title on a single page/post.

This is subtitle using h2

First sentence after h2 here. Second sentences here.

This is subtitle using h3

First line after h3 here. Second line here.

Archive/Category page title

Post title in Archive/Category page

Content of post here. Using some excerpts. Some blog description here.

Post meta data here. [Number of] comments/trackbacks.

This is subtitle using h4

This is subtitle using h5
This is subtitle using h6

Quotations (q, blockquote, cite)

Menurut Dani Iswara .Net: Kuotasi pendek dengan tag <q> ini tidak semua peramban mengenalinya (sudah dipermak dengan CSS).
Blockquote is a significant block of tenses as a quotation from outside source. Optionally, we can use the cite attribute with a URI refers to source of the quoted text.
-- Dani Iswara
XHTML source code: 
<blockquote>
<p>...</p>
<p>...</p>
<p>...</p><br />
<cite>-- <a href="..." title="...">source</a>.</cite>
</blockquote>

Inline Semantic Elements

Link (a)

E.g. Dani Iswara .Net

Abbreviation (abbr)

This XHTML element has lack of support for in Internet Explorer. XHTML source code: 
<abbr title="Extensible HyperText Markup Language">XHTML</abbr>

Acronym (acronym)

E.g. HON code of conduct. XHTML source code: 
<acronym title="Health on the Net">HON</acronym>
Sometimes, the use of abbreviations and acronyms are very confusing.

Define (dfn)

Better to combine with the use of abbr and acronym. For example: CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a X/HTML document. XHTML source code: 
<abbr title="Cascading Style Sheets">CSS</abbr> (<dfn>Cascading Style Sheets</dfn>) is...

Deleting and Inserting (del and ins)

This information has been deleted. This is the revision or updated information. Including time revision in deleted text. XHTML source code: 
<del datetime="YYYY-MM-DD HH:MM:SS">This information has been deleted</del>. <ins>This is the revision or updated information</ins>

Code, keyboard input, sample code, pre format (code, kbd, samp, pre)

kittaghy%ping -o daniiswara.net PING daniiswara.net (209.51.142.99) 56(84) bytes of data. 64 bytes from 209.51.142.99: icmp_seq=1 ttl=49 time=1701 ms 64 bytes from 209.51.142.99: icmp_seq=2 ttl=49 time=900 ms ... --- daniiswara.net ping statistics --- 15 packets transmitted, 12 received, 20% packet loss, time 22981ms rtt min/avg/max/mdev = 900.043/1162.324/1701.793/226.947 ms, pipe 2 XHTML source code (written in <pre><code>...code here...</code></pre>): 
<samp class="prompt">kittaghy%</samp><kbd>ping -o daniiswara.net</kbd>
<samp>PING daniiswara.net (209.51.142.99) 56(84) bytes of data.
64 bytes from 209.51.142.99: icmp_seq=1 ttl=49 time=1701 ms
64 bytes from 209.51.142.99: icmp_seq=2 ttl=49 time=900 ms
...
--- daniiswara.net ping statistics ---
15 packets transmitted, 12 received, 20% packet loss, time 22981ms
rtt min/avg/max/mdev = 900.043/1162.324/1701.793/226.947 ms, pipe 2</samp></pre>

Superscripting and subscripting (sup and sub)

Superscripting and subscripting of text. E.g. 1005, H2O, Internazionale Milan™.

List Elements

Listing (ol, ul, li)

  1. This should be item no. 1
    • This should be unordered list of sub item
    • This should be unordered list of sub item
  2. This should be item no. 2
  3. This should be item no. 3. It has sub item modification list:
    1. This CSS modified ordered-list-style should works on Firefox
    2. This should be sub item no. b
  4. This should be item no. 4.
XHTML source code: 
<ol>
<li>This should be item no. 1
	<ul>
	<li>This should be unordered list of sub item</li>
	<li>This should be unordered list of sub item</li>
	</ul>
</li>
<li>This should be item no. 2</li>
<li>This should be item no. 3. It has sub item modification list:
	<ol class="post">
	<li>This <abbr>CSS</abbr> modified ordered-list-style should works on Firefox</li>
	<li>This should be sub item no. b</li>
	</ol>
</li>
<li>This should be item no. 4.</li>
</ol>

Definition list and terms (dl, dt, dd)

dl
definition list
dt
definition terms
dd
its definitions. These elements are commonly used in Frequently Asked Questions (FAQ).
XHTML source code: 
<dl>
<dt>dl</dt>
<dd>definition list</dd>
<dt>dt</dt>
<dd>definition terms</dd>
<dt>dd</dt>
<dd>its definitions. These elements are commonly used in Frequently Asked Questions (FAQ).</dd>
</dl>

Table

Table 1. This is the heading of the table
Column title 1 Column title 2 Column title 3
item item item
item item item
item code in row unessential blog
XHTML source code: 
<table summary="Table description for the non-visual users">
<caption>Tabel 1. This is the heading of the table</caption>
<tr>
<th scope="col">Column title 1</th>
<th scope="col">Column title 2</th>
<th scope="col">Column title 3</th>
</tr>
<tr>
<th scope="row">item</th>
<td class="center"><span class="green pass">item</span></td>
<td class="center"><span class="red fail">item</span></td>
</tr>
<tr>
<th scope="row">item</th>
<td class="center"><span class="green pass">item</span></td>
<td class="center"><span class="red fail">item</span></td>
</tr>
<tr>
<th scope="row">item
</th><td class="center"><code>code here</code> in row</td>
<td class="center"><a href="http://daniiswara.net/">unessential blog</a></td>
</tr>
</table>
These are sample CSS for "keyboard button" style:
  • ctrl++ to enlarge/zoom this page.
  • ctrl+p to print this page.
Semantic XHTML sources: Just unessential weblog
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com.

Posted in category: Web Standards
Tags: , ,
40 Comments/Trackbacks (Comment closed)

You are free to share (copy, distribute, transmit) & adapt this blog post under the similar license (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported; CCA-NC-SA 3.0 Unported). Please put these links on your copy:
Taken from: XHTML Format - Quick Reference Guide by Dani Iswara.

Unimportant Related/Random Posts

You may also read list of most popular posts and most popular tags of Dani Iswara .Net.

40 Responses to post titled: XHTML Format - Quick Reference Guide

  1. Comment by Dani Iswara on March 20, 2009 at 06:26:54
    using Firefox 3.0.7 on Gentoo

    comment test
    using latest fx
    on gentoo

  2. Comment by Dani Iswara on March 20, 2009 at 09:03:01
    using Firefox 3.0.7 on Slackware

    test another section of comment

  3. Comment by dani on March 23, 2009 at 12:37:02
    using Safari 3.0 on iPod

    mobile safari 1.1.3 iPhone touch?

  4. Comment by Dani Iswara on April 5, 2009 at 09:28:23
    using Firefox 3.0.8 on Gentoo

    quotation text test
    checks the line-height
    margin top and bottom
    author link here within cite tags

    text after quotation

    1. ordered lists test
    2. number second
    3. has unordered list
      • unordered list
      • unordered list
    4. number four here

    next texts or paragraphs here

  5. Comment by Dani Iswara on April 5, 2009 at 10:01:54
    using Firefox 3.0.8 on Gentoo

    first line
    page break
    second line

  6. Comment by Dani Iswara on May 7, 2009 at 19:02:15
    using Midori on GNU/Linux

    using midori browser

  7. Comment by dani on May 8, 2009 at 13:51:09
    using Internet Explorer 7.0 on Windows XP

    tes browser..maxthon

  8. Comment by dani on May 8, 2009 at 13:56:04
    using BlackBerry 7100i on BlackBerry 7100i

    tes blackberry??

  9. Comment by dani on May 8, 2009 at 14:03:27
    using Safari 4.0 on Windows XP

    tes browser safari 4 beta

  10. Comment by dani on May 8, 2009 at 14:04:36
    using Google Chrome 2.0.158.0 on Windows XP

    tes chrome 2

  11. Comment by Dani Iswara on May 12, 2009 at 01:10:42
    using IceWeasel 3.0.6 on Debian GNU/Linux

    another testing

  12. Comment by Dani Iswara on May 14, 2009 at 16:26:29
    using Firefox 3.5b4 on GNU/Linux

    testing new mozilla firefox

  13. Comment by dani on May 23, 2009 at 23:59:17
    using Opera 9.64 on GNU/Linux

    test

  14. Comment by Dani Iswara on May 24, 2009 at 00:46:29
    using Firefox 3.0.10 on Gentoo

    tes again

  15. Comment by dani on May 24, 2009 at 10:43:13
    using Opera 9.64 on GNU/Linux

    tes lagi

  16. Comment by dani on May 24, 2009 at 21:09:53
    using Firefox 3.0.10 on Windows XP

    tes dgn noscript aktif

  17. Comment by dani on May 27, 2009 at 06:26:38
    using Epiphany 2.22 on GNU/Linux

    comment test using epiphany

  18. Comment by Dani Iswara on May 29, 2009 at 17:01:39
    using Firefox 3.0.10 on Gentoo

    html purifier test test this is new line break test

  19. Comment by Dani Iswara on May 29, 2009 at 17:23:29
    using Firefox 3.0.10 on Gentoo

    1. tes 1
    2. tes 2

  20. Comment by Dani Iswara on June 7, 2009 at 21:38:20
    using Firefox 3.0.10 on Gentoo

    comment test

  21. Comment by dani on June 15, 2009 at 07:04:56
    using Opera 10.00 on GNU/Linux

    test code di sini

  22. Comment by Dani Iswara on June 15, 2009 at 07:10:35
    using Firefox 3.0.11 on Gentoo

    test di sini

  23. Comment by dani on June 15, 2009 at 10:23:52
    using Konqueror 4.2 on GNU/Linux

    comment test using konqueror

  24. Comment by dani on June 15, 2009 at 10:25:14
    using Konqueror 4.2 on GNU/Linux

    reply using konqueror

  25. Comment by dani on June 18, 2009 at 12:04:45
    using Internet Explorer 7.0 on Windows XP

    comment test using msie7

  26. Comment by dani on August 21, 2009 at 02:43:00
    using Firefox 3.5.2 on Gentoo

    this post comment have p codes.
    next line.
    next line.

  27. Comment by Dani Iswara on August 30, 2009 at 21:36:40
    using Firefox 3.5.2 on SuSE

    just replying

  28. Comment by dani on September 24, 2009 at 14:33:34
    using Konqueror 4.2 on SuSE

    using konqueror 4.2.4 on opensuse linux

  29. Comment by Dani Iswara on October 13, 2009 at 02:54:19
    using Firefox 3.5.3 on SuSE

    testing icons

  30. Comment by Dani Iswara on November 6, 2009 at 11:52:02
    using Firefox 3.5.4 on SuSE

    smiley size test :) :P :D
    smiley space test :lol: :mrgreen:
    smiley space, smiley space

  31. Comment by Dani Iswara on December 8, 2009 at 19:56:39
    using Firefox 3.5.5 on Fedora 12

    tes fedora

  32. Comment by dani on December 8, 2009 at 21:35:16
    using Google Chrome 4.0.253.0 on GNU/Linux

    chromium test

  33. Comment by dani iswara on December 22, 2009 at 00:07:44
    using Opera 10.10 on GNU/Linux

    test subscribe

  34. Comment by Dani Iswara on January 4, 2010 at 07:20:20
    using Minefield 3.7a1pre on GNU/Linux

    minefield pre

  35. Comment by dani on January 7, 2010 at 16:19:10
    using Epiphany 2.22 on GNU/Linux

    epiphany gentoo

  36. Comment by dani on January 9, 2010 at 21:08:38
    using Shiretoko 3.5.7 on Arch Linux

    arch linux shiretoko

  37. Comment by dani on January 30, 2010 at 15:50:48
    using Arora 0.7.1 on GNU/Linux

    using arora

  38. Comment by Dani Iswara on January 30, 2010 at 21:57:17
    using Minefield 3.7a1pre on GNU/Linux

    Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.3a1pre) Gecko/20100113 Minefield/3.7a1pre

Trackbacks/Pingbacks

  1. Pingback by Testing! › tes ping on April 13, 2009 at 15:57:02
    WordPress 2.7.1

    [...] tes ping This was written by TT. Posted on Monday, April 13, 2009, at 4:57 am. Filed under Uncategorized. Bookmark the permalink. Follow comments here with the RSS feed. Post a comment or leave a trackback. [...]

  2. Pingback by Evaluasi Aksesibilitas Web - Dani Iswara .Net on October 2, 2009 at 04:12:09
    WordPress abc

    [...] Cascading Style Sheet (CSS). Beberapa fitur mungkin bisa digabung dalam satu halaman. Seperti di XHTML Format Quick Reference Guide (Dani Iswara [...]

Sorry, for some reasons (sometimes due to sp*ms attack), the comment form is closed at this time. If You have any suggestions, please contact me. Thank you.

Dani Iswara .Net

Return to TOP
›› Older entries: Div mania is not Semantic XHTML
‹‹ Newer entries: SEO vs Etika Marketing Dokter