UI Style Guide

This style guide is the foundation of building this web resource and its apps, and it gives your a basic picture of how a web developer should use typefaces and colors in terms of their role on the interface of a web resource.

Это руководство по стилю оформления является основой построения данного ресурса и его приложений, и дает общее представление о том, как веб-разработчик должен использовать шрифты и цвета с точки зрения их роли в интерфейсе веб-ресурса.

Contents

About 

The highlights:

  • It all starts with the logo.
  • Choose the colors belonging to a certain palette, not just out of the blue; try to assign a color a unique functionality.
  • Choose from known font pairs so that heading and body copy are contrasting, not conflicting.
  • Do not choose smaller and lighter, even if the content is useful, the visitor is likely to leave the resource that owns an irritating and uncomfortable representation.
  • Minimalism is always a good thing.

Основные моменты:

  • Все начинается с логотипа.
  • Выбирайте цвета, принадлежащие готовой палитре, не с потолка; старайтесь каждому цвету назначить свой уникальный функционал.
  • Выбирайте шрифты из готовых пар так, чтобы заголовки и тексты контрастировали, но не конфликтовали.
  • Не мельчите и не выбеливайте: даже если контент полезен посетителю, он уйдет с ресурса, имеющего раздражающее и неудобное представление.
  • Минимализм — всегда хорошо.

UI Colors 

$AccentColor
$AccentColorBrighter
$LeftNavBarDark
$TitleBarAndAppBarDark
$TitleBarAndAppBarDarkItemHighlight
$LeftNavBarLight
$TitleBarAndAppBarLight
$ButtonBackground
$ButtonBackgroundDark
$ButtonText
$ButtonOutline
$PlaceholderText
$color-rgba-selection-text
$color-rgba-selection-bg
$color-hex-body-text
$color-hex-gray-text
$color-hex-progress-bar
$color-hex-highlight
$color-hex-url
$color-hex-page-bg
$color-rgba-page-overlay-bg
$color-hex-divider
$color-hex-lighter-divider
$color-hex-ui-icon-bg
$color-rgba-ui-icon-bg
$color-hex-hover-ui-icon-bg
$color-rgba-dark-ui-icon-bg
$color-hex-hover-dark-ui-icon-bg
$color-hex-ui-button-bg
$color-hex-hover-ui-button-bg
$color-hex-ui-button-secondary-bg
$color-hex-hover-ui-button-secondary-bg
$color-hex-active-input-bg
$color-hex-disabled-input-bg
$color-hex-dark-ui-bar-bg
$color-hex-dark-ui-bar-hover-item-bg
$color-hex-dark-ui-bar-active-item-bg
$color-hex-darker-ui-bar-bg
$color-hex-darker-ui-bar-hover-item-bg
$color-hex-darker-ui-bar-active-item-bg
$color-rgba-darker-ui-bar-inset-shadow
$color-hex-ui-bar-bg
$color-rgba-ui-bar-shadow
$color-hex-lighter-page-bg
$color-rgba-card-shadow
$color-rgba-lightbox-shadow
$color-rgba-hint-bg
$color-rgba-loading-spinner-text
$color-rgba-loading-spinner-bg
$color-rgba-notifier42-text
$color-rgba-notifier42-bg
$color-rgba-notifier42-notice
$color-rgba-notifier42-success
$color-rgba-notifier42-warning
$color-rgba-notifier42-error
$color-rgba-img-lightbox-border
$color-hex-englishextra-logo-bg
$color-hex-vk-like-bg

Heading 1 Font Stack 

"Roboto Light","Segoe UI Light",sans-serif
View Source
h1 {
	font-family: "Roboto Light","Segoe UI Light",sans-serif;
	font-weight: 300;
	font-size: 3.375rem;
	line-height: 1.200;
}

Body Copy Font Stack 

"Roboto","Segoe UI",sans-serif
View Source
p {
	font-family: "Roboto","Segoe UI",sans-serif;
	font-weight: 400;
	font-size: 1.000rem;
	line-height: 1.500;
}

IPA Symbols Font Stack 

"Roboto Mono","Consolas",sans-serif
View Source
.phonetic {
	font-family: "Roboto Mono","Consolas",sans-serif;
	font-weight: 400;
	font-size: inherit;
	line-height: 1.500;
}

Preformatted Text Font Stack 

"Roboto Mono","Consolas",monospace
View Source
pre code {
	font-family: "Roboto Mono","Consolas",monospace;
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1.500;
}

Address 

Company Name, Inc.
811 7th Ave, Suite 700 Manhattan, NY 10019
USA
View Source
<address>
	Company Name, Inc.<br />
	811 7th Ave, Suite 700<br />
	Manhattan, NY 10019<br />
	USA
</address>

Blockquote 

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

Even better philosophical quote marked up with just a <blockquote> element.
View Source
<blockquote>
	<p>Some sort of famous witty quote marked up with a &lt;blockquote&gt; and a child &lt;p&gt; element.</p>
</blockquote>
<blockquote>Even better philosophical quote marked up with just a &lt;blockquote&gt; element.</blockquote>

Details 

More info
  • Point 1
  • Point 2
More info
  • Point 1
  • Point 2
More info
  • Point 1
  • Point 2
View Source
<details open="open">
	<summary>More info</summary>
	<div>
		<p>Additional information</p>
		<ul>
			<li>Point 1</li>
			<li>Point 2</li>
		</ul>
	</div>
</details>
<details>
	<summary>More info</summary>
	<div>
		<p>Additional information</p>
		<ul>
			<li>Point 1</li>
			<li>Point 2</li>
		</ul>
	</div>
</details>
<details>
	<summary>More info</summary>
	<div>
		<p>Additional information</p>
		<ul>
			<li>Point 1</li>
			<li>Point 2</li>
		</ul>
	</div>
</details>

Figure 

Figcaption content
View Source
<figure>
	<img src="//placehold.it/640x360" alt="Image alt text 1" />
	<figcaption>Figcaption content</figcaption>
</figure>

Form Buttons 

Buttons

View Source
<form>
	<fieldset>
		<legend>Buttons</legend>
		<p><input type="button" value="Input type button" /></p>
		<p><input type="reset" value="Input type reset" /></p>
		<p><input type="submit" value="Input type submit" /></p>
		<p><input type="submit" value="Input type submit disabled" disabled="disabled" /></p>
		<p><button type="button">Button type button</button></p>
		<p><button type="reset">Button type reset</button></p>
		<p><button type="submit">Button type submit</button></p>
		<p><button type="button" disabled="disabled">Button type button disabled</button></p>
		<p><button>Button</button></p>
	</fieldset>
</form>

Form Fields Default 

Form Fields
0
View Source
<form>
	<fieldset>
	<legend>Form Fields</legend>
	<div><label for="text-input">Text input</label> <input id="text-input" type="text" /></div>
	<div><label for="text-input-placeholder">Text input with placeholder</label> <input id="text-input-placeholder" type="text" placeholder="I'm placeholder text" /></div>
	<div><label for="readonly-input">Readonly input</label> <input id="readonly-input" type="text" value="Read only text input" readonly="readonly" /></div>
	<div><label for="disabled-input">Disabled input</label> <input id="disabled-input" type="text" value="Disabled text input" disabled="disabled" /></div>
	<div><label for="required-input">Required input <span class="required">*</span></label> <input id="required-input" type="text" required aria-required="true" /></div>
	<div><label for="email-input">Email input</label> <input id="email-input" type="email" /></div>
	<div><label for="search-input">Search input</label> <input id="search-input" type="search" /></div>
	<div><label for="speech-input">Speech recognition input</label> <input id="speech-input" type="text" name="speech" /></div>
	<div><label for="tel-input">Tel input</label> <input id="tel-input" type="tel" /></div>
	<div><label for="url-input">URL input</label> <input id="url-input" type="url" placeholder="https://" /></div>
	<div><label for="password-input">Password input</label> <input id="password-input" type="password" value="password" /></div>
	<div><label for="select-field">Select field</label> <select id="select-field"><option>Option 01</option><option>Option 02</option></select></div>
	<div><label for="multiple-select-field">Multiple select field</label><select id="multiple-select-field" multiple size="5"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option><option>Option 6</option><option>Option 7</option><option>Option 8</option><option>Option 9</option><option>Option 10</option></select></div>
	<div><label for="radio-input"><input id="radio-input" type="radio" name="rad" /> Radio input</label></div>
	<div><label for="checkbox-input"><input id="checkbox-input" type="checkbox" /> Checkbox input</label></div>
	<div><label for="file-input">File input</label> <input id="file-input" type="file" /></div>
	<div><label for="textarea">Textarea</label> <textarea id="textarea" cols="30" rows="5" >Textarea text</textarea></div>
	<div><label for="color-input">Color input</label> <input id="color-input" type="color" value="#000000" /></div>
	<div><label for="number-input">Number input</label> <input id="number-input" type="number" value="5" min="0" max="10" /></div>
	<div><label for="range-input">Range input</label> <input id="range-input" type="range" value="0" min="0" max="100" /> <output>0</output>
	<script>
		if (document.querySelector) {
			document.querySelector("#range-input").onchange = function(e) {
				e.target.nextElementSibling.innerText = e.target.value;
			}
		}
	</script>
	</div>
	<div><label for="date-input">Date input</label> <input id="date-input" type="date" /></div>
	<div><label for="month-input">Month input</label> <input id="month-input" type="month" /></div>
	<div><label for="week-input">Week input</label> <input id="week-input" type="week" /></div>
	<div><label for="time-input">Time input</label> <input id="time-input" type="time" /></div>
	<div><label for="datetime-input">Datetime input</label> <input id="datetime-input" type="datetime" /></div>
	<div><label for="datetime-local-input">Datetime-local input</label> <input id="datetime-local-input" type="datetime-local" /></div>
	</fieldset>
</form>

Form Fields Disabled 

Disabled Form Fields
View Source
<form>
	<fieldset>
		<legend>Disabled Form Fields</legend>
		<div><label for="text-input-disabled"> Disabled text input</label> <input id="text-input-disabled" type="text" value="Disabled text input" disabled="disabled" /></div>
		<div><label for="select-field-disabled"> Disabled select field</label> <select id="select-field-disabled" disabled="disabled"><option>Option 01</option><option>Option 02</option></select></div>
		<div><label for="file-input-disabled"> Disabled file input</label> <input id="file-input-disabled" type="file" disabled="disabled" /></div>
		<div><label for="radio-input-disabled"><input id="radio-input-disabled" type="radio" name="rad" disabled="disabled" /> Disabled radio input</label></div>
		<div><label for="checkbox-input-disabled"><input id="checkbox-input-disabled" type="checkbox" disabled="disabled" /> Disabled checkbox input</label></div>
		<div><label for="color-input-disabled"> Disabled color input</label> <input id="color-input-disabled" type="color" value="#000000" disabled="disabled" /></div>
		<div><label for="range-input-disabled"> Disabled range input</label> <input id="range-input-disabled" type="range" disabled="disabled" /></div>
		<div><label for="number-input-disabled"> Disabled number input</label> <input id="number-input-disabled" type="number" value="5" min="0" max="10" disabled="disabled" /></div>
		<div><label for="textarea-disabled"> Disabled textarea</label> <textarea id="textarea-disabled" cols="30" rows="5" disabled="disabled">Textarea text</textarea></div>
	</fieldset>
</form>

Form Fields Readonly 

Readonly Form Fields
View Source
<form>
	<fieldset>
		<legend>Readonly Form Fields</legend>
		<div><label for="text-input-readonly">Readonly text input</label> <input id="text-input-readonly" type="text" value="Readonly text input" readonly="readonly"></div>
		<div><label for="number-input-readonly">Readonly number input</label> <input id="number-input-readonly" type="number" value="5" min="0" max="10" readonly="readonly"></div>
		<div><label for="textarea-readonly">Readonly textarea</label> <textarea id="textarea-readonly" cols="30" rows="5" readonly="readonly">Textarea text</textarea></div>
	</fieldset>
</form>

Form Fields with Datalist 

Form Fields With Datalist
0
View Source
<form>
	<fieldset>
		<legend>Form Fields With Datalist</legend>
		<div>
			<label for="text-input-datalist">Text input with datalist</label>
			<input id="text-input-datalist" type="text" value="" list="fav-color" placeholder="Type your favorite color" />
			<datalist id="fav-color">
				<option value="Red">Red</option>
				<option value="Orange">Orange</option>
				<option value="Yellow">Yellow</option>
				<option value="Green">Green</option>
				<option value="Blue">Blue</option>
				<option value="Purple">Purple</option>
			</datalist>
		</div>
		<div>
			<label for="range-input-datalist">Range input with datalist</label>
			<input id="range-input-datalist" type="range" value="0" min="0" max="100" list="number" />
			<output>0</output>
			<datalist id="number">
				<option>25</option>
				<option>50</option>
				<option>75</option>
			</datalist>
			<script>
			if (document.querySelector) {
				document.querySelector("#range-input-datalist").onchange = function(e) {
					e.target.nextElementSibling.innerText = e.target.value;
				}
			}
		</script>
		</div>
		<div>
			<label for="color-input-datalist">Color input with datalist</label>
			<input id="color-input-datalist" type="color" value="#000000" list="color" />
			<datalist id="color">
				<option>#ff0000</option>
				<option>#0000ff</option>
				<option>#00ff00</option>
				<option>#ffff00</option>
				<option>#00ffff</option>
			</datalist>
		</div>
		<div>
			<label for="date-input-datalist">Date input with datalist</label>
			<input id="date-input-datalist" type="date" list="days" />
			<datalist id="days">
				<option label="Independence Day">2013-07-04</option>
				<option label="Labor Day">2013-09-02</option>
				<option label="Columbus Day">2013-10-14</option>
			</datalist>
		</div>
		<div>
			<label for="time-input-datalist">Time input with datalist</label>
			<input id="time-input-datalist" type="time" list="times" />
			<datalist id="times">
				<option label="Midnight">00:00</option>
				<option>06:00</option>
				<option label="Noon">12:00</option>
				<option>18:00</option>
			</datalist>
		</div>
		<div>
			<label for="datetime-local-input-datalist">Datetime-local input with datalist</label>
			<input id="datetime-local-input-datalist" type="datetime-local" list="datetime-locals" />
			<datalist id="datetime-locals">
				<option label="Santa Visit">2012-12-24T23:59</option>
				<option label="Chrismas party">2012-12-25T18:00</option>
				<option>2012-12-30T00:00</option>
				<option label="Happy New Year">2013-01-01T00:00</option>
			</datalist>
		</div>
		<div>
			<label for="month-input-datalist">Month input with datalist</label>
			<input id="month-input-datalist" type="month" list="months" />
			<datalist id="months">
				<option label="End of last century">2000-12</option>
				<option>2010-01</option>
				<option>2011-01</option>
				<option>2012-01</option>
				<option>2013-01</option>
			</datalist>
		</div>
		<div>
			<label for="week-input-datalist">Week input with datalist</label>
			<input id="week-input-datalist" type="week" list="weeks" />
			<datalist id="weeks">
				<option label="First week of 2013">2013-W01</option>
				<option label="Second week of 2013">2013-W02</option>
				<option label="13th week of 2013">2013-W13</option>
				<option label="The last week of 2013">2013-W52</option>
			</datalist>
		</div>
	</fieldset>
</form>

Form Fieldset 

Fieldset with legend

View Source
<form>
	<fieldset>
		<legend>Fieldset with legend</legend>
		<p><label for="fieldset-text-input1">Text Input</label> <input id="fieldset-text-input1" type="text" /><input type="submit" value="Submit" /></p>
	</fieldset>
</form>

Headings 

Heading 1 with small text and a link

Heading 2 with small text and a link

Heading 3 with small text and a link

Heading 4 with small text and a link

Heading 5 with small text and a link
Heading 6 with small text and a link
View Source
<h1>Heading 1 with <small>small text</small> and a <a href="#">link</a></h1>
<h2>Heading 2 with <small>small text</small> and a <a href="#">link</a></h2>
<h3>Heading 3 with <small>small text</small> and a <a href="#">link</a></h3>
<h4>Heading 4 with <small>small text</small> and a <a href="#">link</a></h4>
<h5>Heading 5 with <small>small text</small> and a <a href="#">link</a></h5>
<h6>Heading 6 with <small>small text</small> and a <a href="#">link</a></h6>

HR 


View Source
<hr />

List Definition 

Description name
Description value
Description name
Description value
Description value
Description name
Description name
Description value
View Source
<dl>
	<dt>Description name</dt>
	<dd>Description value</dd>
	<dt>Description name</dt>
	<dd>Description value</dd>
	<dd>Description value</dd>
	<dt>Description name</dt>
	<dt>Description name</dt>
	<dd>Description value</dd>
</dl>

List Ordered 

  1. list item 1
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1
View Source
<ol>
	<li>list item 1</li>
	<li>list item 1
		<ol>
			<li>list item 2</li>
			<li>list item 2
				<ol>
					<li>list item 3</li>
					<li>list item 3</li>
				</ol>
			</li>
			<li>list item 2</li>
			<li>list item 2</li>
		</ol>
	</li>
	<li>list item 1</li>
	<li>list item 1</li>
</ol>

List Unordered 

  • list item 1
  • list item 1
    • list item 2
    • list item 2
      • list item 3
      • list item 3
    • list item 2
    • list item 2
  • list item 1
  • list item 1
View Source
<ul>
	<li>list item 1</li>
	<li>list item 1
		<ul>
			<li>list item 2</li>
			<li>list item 2
				<ul>
					<li>list item 3</li>
					<li>list item 3</li>
				</ul>
			</li>
			<li>list item 2</li>
			<li>list item 2</li>
		</ul>
	</li>
	<li>list item 1</li>
	<li>list item 1</li>
</ul>

Default Image 

View Source
<img src="//placehold.it/640x360" alt="Image alt text 3" />

Linked Image 

View Source
<a href="#"><img src="//placehold.it/640x360" alt="Image alt text 4" /></a>

SVG Logo 

/
View Source
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 48 48" enable-background="new 0 0 48 48"><rect fill="#F03B4C" width="48" height="48"></rect><path fill="#191919" d="M31.8,43c-0.5,0-1.2-0.2-1.8-0.4c-2.6-0.9-3.7-2.9-3.2-5.7c0.5-2.2,1.2-4.1,2-6.1c0.5-1.4,1.1-2.6,1.7-4c0.3-0.9,0.8-2,1.1-2.9l0,0c-0.3,0.4-0.7,0.7-1,1.1c-0.9,0.9-1.8,2-2.7,2.9c-1.4,1.6-3,3.3-4.6,4.9c-1.1,1.1-2.5,2.4-4.1,3.2c-1,0.5-2,0.7-2.9,0.4c-1.7-0.5-2.6-1.8-2.5-3.8c0.1-1.6,0.5-3.2,1.4-4.9c0.7-1.5,1.4-2.9,2-4.5c0.3-0.7,0.7-1.5,1-2.2l0.8-1.8c0.9-2,1.9-4.2,2.8-6.3c0.2-0.6,0.5-1.3,0.5-2c0.1-0.2,0.1-0.5,0.2-0.7c-0.1,0.2-0.2,0.2-0.3,0.5c-1.2,1.7-2.3,3.4-3.6,5.1c-0.3,0.6-0.8,1.1-1.1,1.6c-0.9,1.3-1.9,2.6-2.8,4c-0.5,0.8-1.4,1.4-2.1,2c-0.8,0.5-1.7,0.6-2.5,0.2c-0.8-0.4-1.4-1.1-1.8-2c-0.5-1.5,0-2.9,0.5-4c0.5-1.1,1-2,1.4-2.9c0.5-0.8,0.9-1.7,1.4-2.5c0.5-0.9,0.9-1.8,0.8-2.9c0-0.6-0.3-1.1-0.8-1.5c-0.2-0.2-0.5-0.2-1,0c-1,0.5-1.7,1.3-2.3,2c-0.5,0.6-1,0.8-1.6,0.5C6.4,10.1,6.2,9.7,6,9.5C6,9.1,6,8.8,6.3,8.4c1-1.6,2.3-2.6,3.7-3.2c1.7-0.7,3.4,0,4.5,1.7c0.8,1.3,0.9,2.6,0.5,4c-0.5,1.3-0.9,2.5-1.4,3.6c-0.3,0.7-0.7,1.5-1,2.2c-0.3,0.7-0.7,1.5-1,2.2c-0.2,0.5-0.2,0.9-0.3,1.5v0.2c0,0,0,0.2,0.1,0.2c0.1,0,0.1-0.2,0.2-0.2c0.2-0.2,0.3-0.4,0.5-0.6c0.5-0.6,1-1.1,1.4-1.7c0.8-1.3,1.7-2.5,2.5-3.6c0.7-1.1,1.4-2.2,2.1-3.3c0.9-1.3,1.7-2.4,2.6-3.4c0.8-0.9,1.6-1.4,2.3-1.6c0.8-0.2,1.4,0.2,2.1,0.6c0.7,0.6,1,1.4,1.1,2.2c0.1,1.1,0,2.2-0.5,3.3l-0.2,0.7c-0.7,2-1.4,3.9-2.3,5.8c-0.7,1.6-1.4,3.2-2.1,4.9c-0.7,1.6-1.4,3.2-2.1,4.9c-0.3,0.9-0.7,2-0.9,2.9c-0.1,0.2-0.1,0.6-0.2,0.8c0,0.2,0,0.2,0,0.2c0.2-0.2,0.5-0.2,0.7-0.5c1.6-1.1,2.9-2.6,4.3-4.1c2-2.3,4.3-4.8,6.5-7c0.8-0.9,1.8-1.6,2.8-2c1-0.5,2-0.4,2.8,0.2c0.8,0.5,1.4,1.3,1.6,2.3c0.2,1.1,0,2-0.1,2.7c-0.5,1.8-1.1,3.6-1.8,5.2c-0.2,0.5-0.3,0.9-0.5,1.4c-0.9,2.3-1.6,4.1-2.3,5.8c-0.1,0.4-0.1,0.7-0.2,1.1c0,0.2-0.1,0.4-0.1,0.6h0.1c0.3,0,0.8,0,1-0.2c1.2-0.5,2.3-1.5,3.2-2.4c0.7-0.7,1.4-1.4,2-2l0.1-0.2c0.7-0.7,1.4-0.7,2.1,0c0.5,0.5,1,0.9,1.4,1.4c0.3,0.4,0.5,0.7,0.5,1.1c0,0.4-0.1,0.7-0.5,0.9l-0.2,0.2c-1.8,1.8-3.6,3.6-5.9,4.9C34,42.6,32.9,43,31.8,43z"/>
</svg>

Video 

View Source
<video id="video2" controls="" poster="../libs/branding/img/big_buck_bunny_640x360.jpg">
	<source id="webm" src="https://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
	<source id="ogv" src="https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
	<source id="mp4" src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
	<source id="mp4" src="https://www.quirksmode.org/html5/videos/big_buck_bunny.3gp" type="video/3gp">
</video>

Preformated Text 

<html>
	<head>
	</head>
	<body>
		<div class="main"> <div>
	</body>
</html>
View Source
<pre><code>&lt;html&gt;
	&lt;head&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;div class=&quot;main&quot;&gt; &lt;div&gt;
	&lt;/body&gt;
&lt;/html&gt;</code></pre>

Sample Content Block 

Hello World

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • In voluptate velit esse cillum
  • In voluptate velit esse cillum
  • In voluptate velit esse cillum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

View Source
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
	<li>In voluptate velit esse cillum</li>
	<li>In voluptate velit esse cillum</li>
	<li>In voluptate velit esse cillum</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Default Table 

Table Caption
thead th thead th thead th
tbody td tbody td tbody td
tbody td tbody td tbody td
tbody td tbody td tbody td
Table Caption
thead th thead th thead th
tbody th tbody td tbody td
tbody th tbody td tbody td
View Source
<h3>Default Table</h3>
<table>
	<caption>Table Caption</caption>
	<thead>
		<tr>
			<th scope="col">thead th</th>
			<th scope="col">thead th</th>
			<th scope="col">thead th</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>tbody td</td>
			<td>tbody td</td>
			<td>tbody td</td>
		</tr>
		<tr>
			<td>tbody td</td>
			<td>tbody td</td>
			<td>tbody td</td>
		</tr>
		<tr>
			<td>tbody td</td>
			<td>tbody td</td>
			<td>tbody td</td>
		</tr>
	</tbody>
</table>
<table>
	<caption>Table Caption</caption>
	<thead>
		<tr>
			<th id="th1" scope="col">thead th</th>
			<th id="th2" scope="col">thead th</th>
			<th id="th3" scope="col">thead th</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th id="th4" scope="row" headers="th1">tbody th</th>
			<td headers="th2 th4">tbody td</td>
			<td headers="th3 th4">tbody td</td>
		</tr>
		<tr>
			<th id="th5" scope="row" headers="th1">tbody th</th>
			<td headers="th2 th5">tbody td</td>
			<td headers="th3 th5">tbody td</td>
		</tr>
	</tbody>
</table>

Text Elements 

The a element example

The abbr element and an abbr element with title examples

The b element example

The cite element example

The code element example

The em element example

The del element example

The dfn element and dfn element with title examples

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The s element example

The samp element example

The small element example

The span element example

The strong element example

The sub element example

The sup element example

The u element example

The var element example

View Source
<p>The <a href="#">a element</a> example</p>
<p>The <abbr>abbr element</abbr> and an <abbr title="Abbreviation">abbr</abbr> element with title examples</p>
<p>The <b>b element</b> example</p>
<p>The <cite>cite element</cite> example</p>
<p>The <code>code element</code> example</p>
<p>The <em>em element</em> example</p>
<p>The <del>del element</del> example</p>
<p>The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples</p>
<p>The <i>i element</i> example</p>
<p>The <ins>ins element</ins> example</p>
<p>The <kbd>kbd element</kbd> example</p>
<p>The <mark>mark element</mark> example</p>
<p>The <q>q element</q> example</p>
<p>The <q>q element <q>inside</q> a q element</q> example</p>
<p>The <s>s element</s> example</p>
<p>The <samp>samp element</samp> example</p>
<p>The <small>small element</small> example</p>
<p>The <span>span element</span> example</p>
<p>The <strong>strong element</strong> example</p>
<p>The <sub>sub element</sub> example</p>
<p>The <sup>sup element</sup> example</p>
<p>The <u>u element</u> example</p>
<p>The <var>var element</var> example</p>

Time 

Remember, remember the
View Source
<p>Remember, remember the <time datetime="1605-11-05">5<sup>th</sup> of November</time></p>

Credits 

Комментарии

Регистрироваться необязательно. Поставьте курсор в текстовую область, щелкните по появившемуся полю «Имя», отметьте опцию «Хотел бы написать как гость».

Далее