A simple CSS for styling semantic HTML.
View this project on GitHub.
header elementThe header element represents a group of introductory or navigational aids.
article elementThe article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
section elementThe section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
address elementaddress element represents the contact information for its nearest article or body element ancestor. For more details see The address element.
h1, h2, h3, h4, h5, and h6 elementsh1 element is said to have the highest rank.h6 element has the lowest rank, and two elements with the same name have equal rank.hgroup elementhgroup element represents the heading of a section, which consists of all the h1–h6 element children of the hgroup element.h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.hgroup element is the rank of the highest-ranked h1–h6 element descendant of the hgroup element, if there are any such elements, or otherwise the same as for an h1 element (the highest rank).h1–h6 elements of heading content in the hgroup element indicate subheadings or subtitles or (secondary) alternative titles.hgroup elements are assigned to individual sections.The p element represents a paragraph.
While paragraphs are usually represented in visual media by blocks of text that are physically separated from adjacent blocks through blank lines, a style sheet or user agent would be equally justified in presenting paragraph breaks in a different manner, for instance using inline pilcrows.
function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}The
blockquoteelement represents a section that is quoted from another source.
The main element must not appear as a descendant of the section element. It cannot appear here so it has been moved to wrap all the content.
The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements. It can also be used in a dl element, wrapping groups of dt and dd elements.
| Element | Purpose | Example |
|---|---|---|
a
|
Hyperlinks | Visit my drinks page |
em
|
Stress emphasis | I must say I adore lemonade. |
strong
|
Importance | This tea is very hot. |
small
|
Side comments | These grapes are made into wine. Alcohol is addictive. |
s
|
Inaccurate text |
Price: |
cite
|
Titles of works | The case Hugo v. Danielle is relevant here. |
q
|
Quotations |
The judge said You can drink water from the fish tankbut advised against it. |
dfn
|
Defining instance | The term organic food refers to food produced without synthetic chemicals. |
abbr
|
Abbreviations | Organic food in Ireland is certified by the IOFGA. |
ruby, rt, rp
|
Ruby annotations | OJ |
data
|
Machine-readable equivalent | Available starting today! North Coast Organic Apple Cider |
time
|
Machine-readable equivalent of date- or time-related data | Available starting on ! |
code
|
Computer code |
The fruitdb program can be used for tracking fruit production.
|
var
|
Variables | If there are n fruit in the bowl, at least n÷2 will be ripe. |
samp
|
Computer output | The computer said Unknown error -3. |
kbd
|
User input | Hit F1 to continue. |
sub
|
Subscripts | Water is H2O. |
sup
|
Superscripts | The Hydrogen in heavy water is usually 2H. |
i
|
Alternative voice | Lemonade consists primarily of Citrus limon. |
b
|
Keywords | Take a lemon and squeeze it with a juicer. |
u
|
Annotations | The mixture of apple juice and eldeflower juice is very pleasant. |
mark
|
Highlight | Elderflower cordial, with one part cordial to ten parts water, stands apart from the rest. |
bdi
|
Text directionality isolation | Quote in Arabic الرجل القوي إيان. |
bdo
|
Text directionality formatting | The proposal is to write English, but in reverse order. "Juice" would become "Juice" |
span
|
Other | In French we call it sirop de sureau. |
br
|
Line break |
Simply Orange Juice Company Apopka, FL 32703 U.S.A. |
wbr
|
Line breaking opportunity |
www.simply |
ins as block-level.
del as inline-leveldel as block-level.
del as inline-level.ins as inline-level.
picture element
img elementFluffy is my favorite.
She's just too cute.
The trick here is to know how to anticipate; to know at what speed and what distance the subject will pass by.
I've got a cat named Fluffy and a dog named Miles.
My dog Miles and I like go on long walks together.
Fluffy was a cat who liked to play with yarn. She also liked to jump.
She would play in the morning, she would play in the evening.
iframe elementvideo elementaudio elementmap and area elements (Image maps)
Please select a shape:
| Grade. | Yield Point. | Ultimate tensile strength | Per cent elong. 50.8mm or 2 in. | Per cent reduct. area. | |
|---|---|---|---|---|---|
| kg/mm2 | lb/in2 | ||||
| Hard | 0.45 ultimate | 56.2 | 80,000 | 15 | 20 |
| Medium | 0.45 ultimate | 49.2 | 70,000 | 18 | 25 |
| Soft | 0.45 ultimate | 42.2 | 60,000 | 22 | 30 |
| 2008 | 2007 | 2006 | |
|---|---|---|---|
| Research and development | $ 1,109 | $ 782 | $ 712 |
| Percentage of net sales | 3.4% | 3.3% | 3.7% |
| Selling, general, and administrative | $ 3,761 | $ 2,963 | $ 2,433 |
| Percentage of net sales | 11.6% | 12.3% | 12.6% |
input elementbutton elementselect elementdatalist elementoptgroup elementoutput elementprogress elementProgress:
meter elementdetails and summary elementsVelocity: 12m/s
Direction: North