Namida

A simple CSS for styling semantic HTML.
View this project on GitHub.

Sections

The header element

The header element represents a group of introductory or navigational aids.

The article element

The 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.

The section element

The 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.

The address element

The address element represents the contact information for its nearest article or body element ancestor. For more details see The address element.

The h1, h2, h3, h4, h5, and h6 elements

These elements represent headings for their sections.

The semantics and meaning of these elements are defined in the section on headings and sections.

These elements have a rank given by the number in their name.

The h1 element is said to have the highest rank.
The h6 element has the lowest rank, and two elements with the same name have equal rank.

The hgroup element

The hgroup element represents the heading of a section, which consists of all the h1h6 element children of the hgroup element.

The element is used to group a set of h1h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

The rank of an hgroup element is the rank of the highest-ranked h1h6 element descendant of the hgroup element, if there are any such elements, or otherwise the same as for an h1 element (the highest rank).

Other h1h6 elements of heading content in the hgroup element indicate subheadings or subtitles or (secondary) alternative titles.
The section on headings and sections defines how hgroup elements are assigned to individual sections.

The footer element

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Grouping content

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 blockquote element represents a section that is quoted from another source.

  1. Switzerland
  2. United Kingdom
  3. United States
    1. Alabama
    2. Delaware
    3. New York
  4. Norway
  • If you have exactly five gold coins
    You get five victory points
    If you have one or more gold coins, and you have one or more silver coins
    You get two victory points
    If you have one or more silver coins
    You get one victory point
    Otherwise
    You get no victory points
    Strawberry

    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.

    Text-level semantics

    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: £4.50 £2.00!
    cite Titles of works The case Hugo v. Danielle is relevant here.
    q Quotations The judge said You can drink water from the fish tank but 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 (Orange Juice)
    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.simplyorangejuice.com

    Edits

    ins as block-level.

    del as block-level.

    del as inline-level. ins as inline-level.

    Embedded content

    The picture element

    The img element

    Fluffy

    Fluffy is my favorite.

    She's just too cute.

    Shooting moving targets indoors

    The trick here is to know how to anticipate; to know at what speed and what distance the subject will pass by.

    My pets

    I've got a cat named Fluffy and a dog named Miles.

    My dog Miles and I like go on long walks together.

    Fluffy and the Yarn

    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.

    The iframe element

    The video element

    The audio element

    The map and area elements (Image maps)

    Please select a shape: Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star. Red box. Green circle. Blue triangle. Yellow star.

    Tabular data

    Specification values: Steel, Castings, Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.
    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%

    Forms

    Pizza Size

    Pizza Toppings

    The input element

    Keyword Example
    hidden
    text
    search
    tel
    url
    email
    password
    date
    month
    week
    time
    datetime-local
    number
    range
    color
    checkbox
    radio
    file
    submit
    image
    reset
    button
    disabled

    The button element

    The select element

    The datalist element

    The optgroup element

    Which course would you like to watch today?

    The output element

    + =

    The progress element

    Progress: 0%

    The meter element

    Radius:
    12cm
    Height:
    2cm

    Interactive elements

    The details and summary elements

    Automated Status: Operational

    Velocity: 12m/s

    Direction: North