Article
Text...
Auf dieser Seite findest du verschiedene HTML-Elemente deren Code du kopieren und im Code Editor einfügen kannst.
Unser Editor nutzt eine angepasste Version des CSS-Frameworks: simple.css. Du kannst simple.css nutzen, wenn du folgenden Link im Kopfbereich des Editors eingibst:
<link rel="stylesheet" href="simple.css">
Du kannst einem Element die Klasse .full
geben, damit der Inhalt die ganze Breite des
Browsers ausfüllt. Das Element muss ein Child von body
sein.
<div class="full">
<h2>Article</h2>
<p>Text...</p>
</div>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>...</div>
</div>
Text...
<article>
<h2>Article</h2>
<p>Text...</p>
</article>
Test section 1
Test section 2
<section>
<h3>Header 1</h3>
<p>Test section 1</p>
</section>
3rem
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>...</h4>
A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
<p>A paragraph ...</p>
# Ordered list
<ol>
<li>Do this thing</li>
<li>Do that thing</li>
<li>Do the other thing</li>
</ol>
# Unordered list
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
# Description list
<dl>
<dt>Description term</dt>
<dd>Description details.</dd>
<dt>Description term</dt>
<dd>Description details.</dd>
</dl>
A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.
It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
Said no one, ever.
<blockquote>
<p>A block quotation ...</p>
<cite><a href="">Said no one, ever.</a></cite>
</blockquote>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum eligendi optio ipsa nemo assumenda mollitia inventore neque dolores animi ratione libero qui dolorem, distinctio aut, quae, iste, cumque nihil enim!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum perspiciatis corrupti eaque tempore autem doloremque, placeat, in earum ab maxime commodi tenetur quos provident fugit assumenda, consequatur vero ipsum, et.
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Molestias, facilis. Dolores rerum omnis, adipisci odit ipsa, autem animi molestiae fugit temporibus fuga dignissimos, commodi et, itaque quo voluptatem recusandae voluptatibus.
<aside>
<h4>This is an aside</h4>
<p>Aside lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
</aside>
<p>Lorem ipsum dolor sit, ...</p>
<address>
Written by ... <br>
Example.com ... <br>
Germany ... <br>
</address>
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
<hr>
Keyboard input: Strg
Inline code: <div>code</div>
Sample output: This is sample output from a computer program.
<kbd>Strg</kbd>
<code>...</code>
P R E F O R M A T T E D T E X T ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~
<pre>
<code>...</code>
</pre>
Strong is used to indicate strong importance.
This text has added emphasis.
The b element is stylistically different text from normal text, without any special importance.
The i element is text that is offset from the normal text.
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.
This text is deleted and This text is inserted.
This text has a strikethrough.
Superscript®.
Subscript for things like H2O.
This small text is small for fine print, etc.
Abbreviation: HTML
This text is a short inline
quotation.
This is a citation.
The dfn element indicates a definition.
The mark element indicates a highlight.
The variable element, such as x = y.
The time element:
<mark>mark element</mark>
<img src="myPicture.jpg">
<figure>
<img src="myPicture.jpg">
<figcaption>caption</figcaption>
</figure>
Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
---|---|---|---|---|
Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 4 | Table Footer 5 |
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jackie</td>
<td>012345</td>
</tr>
<tr>
<td>Lucy</td>
<td>112346</td>
</tr>
</tbody>
</table>
Header_1 | Header_2 | Header_3 | Header_4 | Header_5 | Header_6 | Header_7 | Header_8 | Header_9 | Header_10 |
---|---|---|---|---|---|---|---|---|---|
Row:1 Cell:1 | Row:1 Cell:2 | Row:1 Cell:3 | Row:1 Cell:4 | Row:1 Cell:5 | Row:1 Cell:6 | Row:1 Cell:7 | Row:1 Cell:8 | Row:1 Cell:9 | Row:1 Cell:10 |
Row:2 Cell:1 | Row:2 Cell:2 | Row:2 Cell:3 | Row:2 Cell:4 | Row:2 Cell:5 | Row:2 Cell:6 | Row:2 Cell:7 | Row:2 Cell:8 | Row:2 Cell:9 | Row:2 Cell:10 |
Row:3 Cell:1 | Row:3 Cell:2 | Row:3 Cell:3 | Row:3 Cell:4 | Row:3 Cell:5 | Row:3 Cell:6 | Row:3 Cell:7 | Row:3 Cell:8 | Row:3 Cell:9 | Row:3 Cell:10 |
Row:4 Cell:1 | Row:4 Cell:2 | Row:4 Cell:3 | Row:4 Cell:4 | Row:4 Cell:5 | Row:4 Cell:6 | Row:4 Cell:7 | Row:4 Cell:8 | Row:4 Cell:9 | Row:4 Cell:10 |
Row:5 Cell:1 | Row:5 Cell:2 | Row:5 Cell:3 | Row:5 Cell:4 | Row:5 Cell:5 | Row:5 Cell:6 | Row:5 Cell:7 | Row:5 Cell:8 | Row:5 Cell:9 | Row:5 Cell:10 |
Row:6 Cell:1 | Row:6 Cell:2 | Row:6 Cell:3 | Row:6 Cell:4 | Row:6 Cell:5 | Row:6 Cell:6 | Row:6 Cell:7 | Row:6 Cell:8 | Row:6 Cell:9 | Row:6 Cell:10 |
<figure>
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jackie</td>
<td>012345</td>
</tr>
<tr>
<td>Lucy</td>
<td>112346</td>
</tr>
</tbody>
</table>
</figure>
<button>Normal</button>
<button class="btnSuccess">Success</button>
<button class="btnDanger">Danger</button>
<button class="btnWarn">Warn</button>
<button disabled>Button disabled</button>
<label for="progress-30">30%, max 100%</label>
<progress id="progress-30" max="100" value="30">30%</progress>
<button onclick="document.getElementById('dialog-demo').showModal()">Open</button>
<dialog id="dialog-demo">
<h2>Title</h2>
<p>Content</p>
<form method="dialog">
<button>Close</button>
</form>
</dialog>
This is a notice box ...
<p class="notice">This is a notice box ...</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique voluptatibus dicta consequuntur animi. Quaerat facilis quidem unde eos! Ipsa.
<details>
<summary>Expand for details</summary>
<p>Content</p>
</details>
<fieldset>
<legend>Fieldset</legend>
<label>Name:
<input type="text" placeholder="Enter name">
</label>
</fieldset>