Example for HTML5 Main Structure
This is a main structure in HTML5, copy this code and paste it in your own code!
Copy<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title of the singlepage</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<link href="design.css" rel="stylesheet">
</head>
<body>
<p> Hello World! </p>
</body>
</html>
Example explained
    • The <!DOCTYPE html> declaration defines this document to be HTML5
    • The <html> element is the root element of an HTML page
    • The <head> element contains meta information about the document
    • The <title> element specifies a title for the document
    • The <body> element contains the visible page content
    • The <p> element defines a paragraph

HTML Tags

HTML tags are used to tell the document when a command starts and ends

Example for Tags
Copy<tagname>Here is your content</tagname>
    • HTML tags normally come in pairs like <p> and </p>
    • The first tag in a pair is the start tag, the second tag is the end tag
    • The end tag is written like the start tag, but with a forward slash inserted before the tag name

Forms

Buttons

A clickable button is marked up as follows:

Example Element for Buttons
Copy<button>Button Text</button>
Code example Output:

Browser Supports

Element
<button> Yes Yes Yes Yes Yes

Inputs

An HTML form with two input fields:

Example Element for Input
Copy<form>
Username:<br>
<input type="text" name="username"><br>
Password<br>
<input type="password" name="password">
</form>
Code example Output:

Username:

Password
Example explained
    • The <br> defines a break in the document
    • The <input> tag specifies an input field where the user can enter data
    • The type text defines a normal text for the input
    • The type password defines a password char for the input

Browser Supports

Element
<input> Yes Yes Yes Yes Yes

Textareas

Example Element for Textareas
Copy<textarea>Your Text in your Textarea...</textarea> 
Code example Output:

Example explained
    • The <textarea> defines a textareafield in the document

Browser Supports

Element
<textarea> Yes Yes Yes Yes Yes

Lists

Unordered Lists

Example Element for Unordered Lists
Copy<ul>
<li>Audi</li>
<li>VW</li>
<li>Smart</li>
</ul> 
Code example Output:

  • Audi
  • VW
  • Smart
Example explained
    • The <ul> tag started the unordered-list
    • The <li> tag are the list items

Browser Supports

Element
<ul> Yes Yes Yes Yes Yes

Ordered Lists

Example Element for Ordered Lists
Copy<ol>
<li>Audi</li>
<li>VW</li>
<li>Smart</li>
</ol> 
Code example Output:

  1. Audi
  2. VW
  3. Smart
Example explained
    • The <ol> tag started the ordered-list

Browser Supports

Element
<ol> Yes Yes Yes Yes Yes

Tables

Define Tables

Example Element for Tables
Copy<table style="width:100%">
<tr>
<th>Username</th>
<th>Password</th>
<th>E-Mail</th>
</tr>
<tr>
<td>Maxmustermann</td>
<td>1234Pw--</td>
<td>email@provider.org</td>
</tr>
<tr>
<td>Maxmusterfrau</td>
<td>--4321</td>
<td>webedged@web.com</td>
</tr>
</table>
Code example Output:

Username Password E-Mail
Maxmustermann 1234Pw-- email@provider.org
Maxmusterfrau --4321 webedged@web.com
Example explained
    • An HTML table is defined with the <table> tag.
    • Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Borders

Example Element for Table-Borders
Copy<table style="width:100%;border:1px solid black;">
<tr style="border:1px solid black;">
<th>Username</th>
<th>Password</th>
<th>E-Mail</th>
</tr>
<tr style="border:1px solid black;">
<td>Maxmustermann</td>
<td>1234Pw--</td>
<td>email@provider.org</td>
</tr>
<tr style="border:1px solid black;">
<td>Maxmusterfrau</td>
<td>--4321</td>
<td>webedged@web.com</td>
</tr>
</table>
Code example Output:

Username Password E-Mail
Maxmustermann 1234Pw-- email@provider.org
Maxmusterfrau --4321 webedged@web.com

Align

Example Element for Table-Aligns
Copy<table align="right">
<tr>
<th>Username</th>
<th>Password</th>
<th>E-Mail</th>
</tr>
<tr>
<td>Maxmustermann</td>
<td>1234Pw--</td>
<td>email@provider.org</td>
</tr>
<tr>
<td>Maxmusterfrau</td>
<td>--4321</td>
<td>webedged@web.com</td>
</tr>
</table>
Code example Output:

Username Password E-Mail
Maxmustermann 1234Pw-- email@provider.org
Maxmusterfrau --4321 webedged@web.com

Browser Supports

Element
<table> Yes Yes Yes Yes Yes