Semantic XHTML Format Reference

Diperbarui 14 November 2017 oleh Dani Iswara

This page is intended to provide all XHTML codes used on this Unessential Weblog. Based on World Wide Web Consortium (W3C) standards, semantics, Web accessibility, and Web usability recommendation. All codes may be customized using cascading stylesheet (CSS). So, no inline CSS here.

unessential Headings elements

Would be useful for fast reading and scanning. Some screen readers have a capability to jump from heading to heading. This page using heading level one. The subheading using heading level two. More rational and usable to keep the level heading 1-3 on common Web document types. For academic purposes, we may put these:

heading level three, in the long sentence formats, to check the line height, set it properly to make it legible

heading level four

heading level five

heading level six

Use CSS to style the size and font properly.

Special texts

Semantically, it will be useful for screen reader and voice browser users. Emphasized text:

• <strong>, strong emphasize, just like bold style,
• <em>, emphasize, similar to italic,

has a special visualization. May help fast reading and scanning on the page. But furthermore, it also has a meaning for difabled–differently-abled people, not only for common users. It will have emphasizing effect in sounds.

This is English language in span. And This is English language in em.

This is deleted texts. This is inserted texts.

Image content

While on disable images, users should know easily that there are images in content. One of the suggestion is to put border outside the image. Remember to use width or height attributes in <img> tags. Use proper alt attribute if necessary.

Do not use redundant information on alternative text (alt), title (if needed), and the caption. The alt should be empty (alt=”empty here”) if it only a decorative image. The caption may not be needed if there is a descriptive text beside it. Sample are available in figure 1, 2, and 3.

You may find a problem while images are turned off in browser’s side. Image’s placement is terrible. This block of text is in place to fill in the gap between images overlapping.

Quotation and citation texts

Subheading here

<blockquote>…Some long quotation sentences–from somewhere–should be placed in this tags or elements. Not intented to put indent block texts in this way. That is the meaning, not just visualization. Some citation will look like this (Dani Iswara).…</blockquote>

For the short citation, 1 sentence, use <q>…this code inside, not the above one…</q>. But this q element has a low compatibility in some browsers.
Remember to put the source reference in an accessible way, easy to click and descriptive anchor texts inside <cite>this element</cite>.

Listing

It will help scanning and fast reading also. The examples are navigation menu and more than 2 items listing. Using unordered list:

• First line
• Second line
  • Second line has a subline
  • Another subline
• Third line.

In ordered list:

1. Number one
2. Number two
   • Unordered number
   • Unordered number
3. Number three.

With the help of CSS:

1. Lower a latin
2. Lower b latin
   • Subline one
   • Subline two
3. Lower c latin

Another customization:

1. Lower i roman
2. Lower ii roman
3. Lower iii roman

Definition, Definition list, terms, and its definition

For simple defining, use <code>dfn</code>. Better to combine with the use of abbreviation. For example: CSS or Cascading Style Sheets is a stylesheet language used to describe the presentation of a X/HTML document.

For the list, just like in FAQ model. It has these structure:

Terminology 1

Defining terminology 1 here. Make it long sentences to view the and set proper line height. Line break then.
Some new sentences here. How do I look?

Terminology 2

Defining terminology 2 here.

Here is the source code:

<dl>
<dt>Terminology 1</dt>
<dd>Defining terminology 1 here.</dd>
<dt>Terminology 2</dt>
<dd>Defining terminology 2 here.</dd>
</dl>

This is some texts below the pre to check the margin.

Computer codes

This kind of computer text codes, <code>uname -a</code>, usually be used or pasted on GNU/Linux terminal to show your kernel and computer machine version. Sometimes, has a similar function with <pre>, preformatted tags. The <pre> element has a disable word-wrapping capability for the long codes.

Table for tabular data

Sample of simple accessible tabular data:

Use something like ctrl+u (in Firefox) to view the source code.