Last updated on 14 November 2017 by 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.
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
deleted texts. .
Figure 1. Arch Linux official logo 1.
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
height attributes in
<img> tags. Use proper
alt attribute if necessary.
Figure 2. Arch Linux official logo 2.
Do not use redundant information on alternative text (
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.
Figure 3. Arch Linux official logo 3.
Quotation and citation texts
<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>.
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:
- Number one
- Number two
- Unordered number
- Unordered number
- Number three.
With the help of CSS:
- Lower a latin
- Lower b latin
- Subline one
- Subline two
- Lower c latin
- Lower i roman
- Lower ii roman
- 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.
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:
|Name here||Column title 1||Column title 2|
|Sample 1||Red item||Green item|
|Sample 2||Unessential Weblog
second line here
This is unordered list inside the table:
This is ordered list inside the table:
This is more complex list inside the table:
Use something like ctrl+u (in Firefox) to view the source code.