Reference

This page lists all the HTML elements (exclude metadata).

Typography

Headings

h1. Mobi.css

h2. Mobi.css

h3. Mobi.css

h4. Mobi.css

h5. Mobi.css
h6. Mobi.css

Inline text

Use <a> to create links.

Use <strong> to create strong importance text.
Use <b> to create bold text.

Use <em> to create emphasized text.
Use <i> to create italic text.

Use <del> to create text that has been deleted from a document.
Use <s> to create text with a strikethrough.

Use <ins> to create text that has been added to a document.
Use <u> to create text with an underline.

Use <small> to create small text.
Use <sub> to create text that lower and smaller than the main text.
Use <sup> to create text that higher and smaller than the main text.

Use <code> to create fragments of computer code: alert(‘Hello World’);.
Use <kbd> to create the defining instance of a term: Ctrl + D.
Use <samp> to create sample output from a computer: Build passed!.

Use <br/> to create line
breaks.

Use <span> to create inline container: I love Mobi.css.

Use <abbr> to create abbreviation elements.

<abbr title="The HTML <abbr> element (or HTML Abbreviation Element) represents an abbreviation and optionally provides a full description for it.">abbreviation elements</abbr>

Use <cite> to create citation elements: Mobi.css.

<cite><a href="http://getmobicss.com">Mobi.css</a></cite>

Use <data> to link a given content with a machine-readable translation: Beijing.

<data value="100000">Beijing</data>

Use <time> to create time: .

<time datetime="2016-09-30T00:00">Sep 30</time>

Use <q> to create inline quotations: I love Mobi.css, xcatliu said.

<q>I love Mobi.css</q>, xcatliu said.

Use <ruby>, <rp>, <rt> to create ruby annotations:

我 (lǎn) 去 (de) 洗 (lǐ) 澡 (nǐ) 了 (le) 
<ruby>
  我 <rp>(</rp><rt>lǎn</rt><rp>)</rp>
  去 <rp>(</rp><rt>de</rt><rp>)</rp>
  洗 <rp>(</rp><rt>lǐ</rt><rp>)</rp>
  澡 <rp>(</rp><rt>nǐ</rt><rp>)</rp>
  了 <rp>(</rp><rt>le</rt><rp>)</rp>
</ruby>

Use <bdi> to create text that be formatted in a DIFFERENT DIRECTION from other text outside it.
Use <bdo> to OVERRIDE the current directionality of text.

text that be formatted in a <bdi>DIFFERENT DIRECTION</bdi> from other text outside it.
<bdo dir="rtl">OVERRIDE</bdo> the current directionality of text.

<bdi> is not working in iOS and Chrome. Don’t use it in your project, use <bdo> instead.

Use <dfn> to create a defining instance of a term:
Mobi.css is a lightweight, flexible css framework that focus on mobile.
What is Mobi.css? You can find the definition here.

<dfn id="dfn-mobicss">Mobi.css</dfn> is a lightweight, flexible css framework that focus on mobile.
What is Mobi.css? You can find the definition <a href="#dfn-mobicss">here</a>.

Use <var> to create a variable in a mathematical expression or a programming context:
A simple equation: x = y + 2

A simple equation: <var>x</var> = <var>y</var> + 2

Use <wbr> to create a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location:

http://this.is.a.really.long.example.com/With/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages 
http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages

Lists

  • Unordered List
  • Unordered List
  • Nesting
    • Sub Unordered List
    • Sub Unordered List
  1. Ordered List
  2. Ordered List
  3. Nesting
    1. Sub Ordered List
    2. Sub Ordered List
Mobi.css
A lightweight, flexible css framework that focus on mobile.
Bootstrap
The world's most popular mobile-first and responsive front-end framework.
<dl>
  <dt>Mobi.css</dt>
  <dd>A lightweight, flexible css framework that focus on mobile.</dd>
  <dt>Bootstrap</dt>
  <dd>The world's most popular mobile-first and responsive front-end framework.</dd>
</dl>

Horizontal rules

Figure elements

Sketch: Layout with side
<figure>
  <img src="../../assets/layout-with-side.jpg" alt="Layout with side"/>
  <figcaption>Sketch: Layout with side</figcaption>
</figure>

Code blocks

// Use <pre><code></code></pre> to create code blocks.
document.write('Hello World');

Blockquotes

A lightweight, flexible css framework that focus on mobile.

<blockquote>
  <p>A lightweight, flexible css framework that focus on mobile.</p>
</blockquote>

Multimedia

<audio controls>
  <source src="../../assets/croatian-rhapsody.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<video controls>
  <source src="../../assets/big-buck-bunny.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

<iframe width="100%" height="320" src="https://www.youtube.com/embed/c2vm-QjK2xQ" frameborder="0" allowfullscreen></iframe>

Tables

NameAuthorLanguageSizeFeaturesGitHub
Mobi.css xcatliu Sass 3.6kb Mobi.css GitHub
Skeleton Dave Gamache Css 3.2kb Skeleton GitHub
Pure.css Yahoo Inc. Css 4.6kb Pure.css GitHub
Bootstrap v4 Twitter Sass, JavaScript 20.1kb Bootstrap v4 GitHub
Ratchet This project is dying. 
<div class="scroll-view">
  <table class="table">
    <thead>
      <tr><th>Name</th><th>Author</th><th>Language</th><th>Size</th><th>Features</th><th>GitHub</th></tr>
    </thead>
    <tbody>
      <tr>
        <td><a href="http://getmobicss.com/">Mobi.css</a></td>
        <td><a href="https://github.com/xcatliu">xcatliu</a></td>
        <td>Sass</td>
        <td>3.6kb</td>
        <td><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></td>
        <td><a href="https://github.com/xcatliu/mobi.css">Mobi.css GitHub</a></td>
      </tr>
      <tr>
        <td><a href="http://getskeleton.com/">Skeleton</a></td>
        <td><a href="https://github.com/dhg">Dave Gamache</a></td>
        <td>Css</td>
        <td>3.2kb</td>
        <td><i class="fa fa-star"></i></td>
        <td><a href="https://github.com/dhg/Skeleton/">Skeleton GitHub</a></td>
      </tr>
      <tr>
        <td><a href="http://purecss.io/">Pure.css</a></td>
        <td><a href="https://github.com/yahoo">Yahoo Inc.</a></td>
        <td>Css</td>
        <td>4.6kb</td>
        <td><i class="fa fa-star"></i><i class="fa fa-star"></i></td>
        <td><a href="https://github.com/yahoo/pure/">Pure.css GitHub</a></td>
      </tr>
      <tr>
        <td><a href="http://v4-alpha.getbootstrap.com/">Bootstrap v4</a></td>
        <td><a href="https://github.com/twbs">Twitter</a></td>
        <td>Sass, JavaScript</td>
        <td>20.1kb</td>
        <td><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></td>
        <td><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap v4 GitHub</a></td>
      </tr>
      <tr>
        <td><a href="http://goratchet.com/"><s>Ratchet</s></a></td>
        <td colspan="5"><a href="https://github.com/twbs/ratchet/issues/792"><s>This project is dying.</s></a></td>
      </tr>
    </tbody>
  </table>
</div>
Caption
Header 1 Header 2 Header 3
1.1 1.2 1.3
2.1 2.2 2.3
Footer 1 Footer 2 Footer 3 
<div class="scroll-view">
  <table class="table">
    <caption>Caption</caption>
    <colgroup>
      <col style="background-color:rgba(255, 0, 0, 0.1);"/>
      <col span="2" style="background-color:rgba(255, 255, 0, 0.1);"/>
    </colgroup>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
      </tr>
      <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
        <td>Footer 3</td>
      </tr>
    </tfoot>
  </table>
</div>

Forms

Text inputs

<input type="text" placeholder="input[type=text]"/>
<input type="password" placeholder="input[type=password]"/>
<input type="email" placeholder="input[type=email]"/>
<input type="search" placeholder="input[type=search]"/>
<input type="url" placeholder="input[type=url]"/>
<input type="tel" placeholder="input[type=tel]"/>
<input type="number" placeholder="input[type=number]"/>
<textarea placeholder="textarea"></textarea>

Radio and checkbox

<label class="flex-middle"><input type="radio" name="gender"/>Male</label>
<label class="flex-middle"><input type="radio" name="gender"/>Female</label>
<label class="flex-middle"><input type="checkbox"/>I agree to terms.</label>

Select inputs

<select>
  <option disabled selected value> -- select -- </option>
  <option>China</option>
  <option>USA</option>
</select>
<select>
  <optgroup label="China">
    <option>Beijing</option>
    <option>Shanghai</option>
  </optgroup>
  <optgroup label="USA">
    <option>San Francisco</option>
    <option>Seattle</option>
    <option>New York City</option>
  </optgroup>
</select>
<select multiple>
  <optgroup label="China">
    <option>Beijing</option>
    <option>Shanghai</option>
  </optgroup>
  <optgroup label="USA">
    <option>San Francisco</option>
    <option>Seattle</option>
    <option>New York City</option>
  </optgroup>
</select>

Datalists

<datalist> is not supported in iOS. Don’t use this in your project.

File inputs

<input type="file"/>

Buttons

<input type="button" class="btn" value=".btn"/>
<input type="button" class="btn btn-primary" value=".btn.btn-primary"/>
<input type="button" class="btn btn-danger" value=".btn.btn-danger"/>
<input type="reset" class="btn" value=".btn"/>
<input type="reset" class="btn btn-primary" value=".btn.btn-primary"/>
<input type="reset" class="btn btn-danger" value=".btn.btn-danger"/>
<input type="submit" class="btn" value=".btn"/>
<input type="submit" class="btn btn-primary" value=".btn.btn-primary"/>
<input type="submit" class="btn btn-danger" value=".btn.btn-danger"/>
<button type="button" class="btn">.btn</button>
<button type="button" class="btn btn-primary">.btn.btn-primary</button>
<button type="button" class="btn btn-danger">.btn.btn-danger</button>
<button type="reset" class="btn">.btn</button>
<button type="reset" class="btn btn-primary">.btn.btn-primary</button>
<button type="reset" class="btn btn-danger">.btn.btn-danger</button>
<button type="submit" class="btn">.btn</button>
<button type="submit" class="btn btn-primary">.btn.btn-primary</button>
<button type="submit" class="btn btn-danger">.btn.btn-danger></button>
.btn .btn.btn-primary .btn.btn-danger 
<a href="javascript:void(0);" class="btn">.btn</a>
<a href="javascript:void(0);" class="btn btn-primary">.btn.btn-primary</a>
<a href="javascript:void(0);" class="btn btn-danger">.btn.btn-danger</a>

Date inputs

<input type="time"/>
<input type="month"/>
<input type="date"/>
<input type="datetime-local"/>

All the date inputs look ugly in iOS, and their styles cannot be changed. Please be careful while using them. It’s not recommended to use them in your project.

[type=week] is not supported in iOS. Don’t use this in your project.

Other inputs

<input type="color"/>
<input type="range" min="1" max="99" step="2"/>
<input type="image" src="../../assets/xcatliu.png" alt="xcatliu" width="64"/>
<input type="hidden"/>

[type=color] is not supported in iOS. Don’t use this in your project.

350 degrees 
<meter min="200" max="500" value="350">350 degrees</meter>

<meter> is not supported in iOS. Don’t use this in your project.

+
=
60
<form class="form" oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <div class="row top-gap">
    <div class="col flex-middle">
      <input class="top-gap-0" type="range" name="b" value="50" max="80" />
    </div>
    <div class="flex-middle">+</div>
    <div class="col flex-middle">
      <input class="top-gap-0" type="number" name="a" value="10" />
    </div>
    <div class="flex-middle">=</div>
    <div class="flex-middle" style="padding:0 15px 0 7px;"><output name="result">60</output></div>
  </div>
</form>
70 % 
<progress class="top-gap" value="70" max="100">70 %</progress>

Disabled and readonly

<input type="text" disabled placeholder="input[disabled]"/>
<input type="text" readonly value="input[readonly]"/>
<textarea disabled placeholder="textarea[disabled]"></textarea>
<textarea readonly>textarea[readonly]</textarea>
<label class="flex-middle"><input type="radio" name="gender" checked disabled/><span disabled>Male</span></label>
<label class="flex-middle"><input type="radio" name="gender" disabled/><span disabled>Female</span></label>
<label class="flex-middle"><input type="checkbox" disabled/><span disabled>I agree to terms.</span></label>

Radio and checkbox cannot set to readonly.

<select disabled>
  <option disabled selected value> -- select -- </option>
  <option>China</option>
  <option>USA</option>
</select>

Select inputs cannot set to readonly.

<input type="file" disabled/>

File inputs cannot set to readonly.

<input type="button" class="btn" value=".btn" disabled/>
<input type="button" class="btn btn-primary" value=".btn.btn-primary" disabled/>
<input type="button" class="btn btn-danger" value=".btn.btn-danger" disabled/>
.btn .btn.btn-primary .btn.btn-danger 
<a href="javascript:void(0);" class="btn" disabled>.btn</a>
<a href="javascript:void(0);" class="btn btn-primary" disabled>.btn.btn-primary</a>
<a href="javascript:void(0);" class="btn btn-danger" disabled>.btn.btn-danger</a>

Buttons cannot set to readonly.

<input type="datetime-local" disabled/>
<input type="datetime-local" readonly value="2016-12-31T12:59"/>
<input type="color" disabled/>
<input type="range" min="1" max="99" step="2" disabled/>
<input type="image" src="../../assets/xcatliu.png" alt="xcatliu" width="64" disabled/>
<input type="hidden" disabled/>
<input type="range" min="1" max="99" step="2" value="15" readonly/>

[type=image], [type=color] and [type=hidden] cannot set to readonly.

Fieldset in form

Basic info 
<fieldset>
  <legend>Basic info</legend>
  <input type="text" placeholder="Name">
  <input type="number" placeholder="Age">
</fieldset>

Next step

  • Extensions: Plugins, themes, etc.
  • GitHub: Star, folk, open an issue or create a pull request.
Designed and built with by @xcatliu.

Scan to view on mobile