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.
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.
30 tanggapan untuk “Semantic XHTML Format Reference”
This page is intended as a format testing. Almost all styles used on this weblog are available here.
Suggestions are welcome. And I probably have my own reason. :)
Testing as a common users.
Using Midori on Arch Linux.
using another email.
replying from dashboard.
Test using Opera 10.20 Alpha 1 on Linux.
this is first line
this is second line
test using links browser..without wp-spamfree
using epiphany web browser
using flock 2.5.6 on arch linux
using SRWare Iron 4.0.275.2 based on Google Chrome
using Iceweasel 3.5.8 on Debian stable GNU/Linux
using Elinks on Arch (chroot to Debian)
[…] mengunakan tag dl, dt, dan dd. Beberapa pemakaian elemen tersebut sempat saya coba di halaman Semantic XHTML Format Reference (Dani Iswara […]
[…] sekadar untuk membuat teks terlihat nampak lebih menjorok ke dalam. Elemen lain saya rangkum di Semantic XHTML Format Reference (Dani Iswara […]
Testing the same style as code:
using var: 1+2=3
semantic–emphasis+language in English.
[…] Untuk semua elemen presentasi–sekaligus menguji CSS, saya konsisten menerapkan sesuai Semantic XHTML Format Reference (Dani Iswara […]
Server problem (after upgrading server packages?):
source: log files.
” = quote
… = ellipses (3 dots convertion)
& = and
— = en dash (double hyphen convertion)
— = em dash (triple hyphen convertion)
Ini English style in span.
Ini English style in em.
Terang, banyak ★ di langit.
Penulisan entitas diberi ukuran huruf lebih besar dari standarnya.
Mendung, siap-siap pakai ☂.
Awas, blog ini mengandung bahan ☢.
Yang daniiswara.net lebih mengarah ke konten ☤.
Di dunia ini selalu ada ☯.
Rasio/bintang saya ♈.
[…] of Cahya Legawa (cahya.legawa.com), using one of my blog post, we did a test page. My post titled Semantic XHTML Format Reference reposted with my permission on his blog post using the same post title. Odiogo’s […]
reopen comment test
tested on puppy
comment tested :)