What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for Web pages
HTML elements are the building blocks of HTML pages
HTML elements are represented by <> tags
HTML Elements
An HTML element is a start tag and an end tag with content in between:
<h1>This is a Heading</h1>
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | This is a Heading | </h1> |
| <p> | This is paragraph. | </p> |
HTML Attributes
- HTML elements can have attributes
- Attributes provide additional information about the element
- Attributes come in name/value pairs like charset="utf-8"
A Simple HTML Document
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is
another paragraph.</p>
</body>
</html>
Example Explained
HTML elements are the building blocks of HTML pages.
- The
<!DOCTYPE html>declaration defines this document to be HTML5 - The
<html>element is the root element of an HTML page - The
langattribute defines the language of the document - The
<meta>element contains meta information about the document - The
charsetattribute defines the character set used in the document - The
<title>element specifies a title for the document - The
<body>element contains the visible page content - The
<h1>element defines a large heading - The
<p>element defines a paragraph
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
HTML Document Structure
Below is a visualization of an HTML document (an HTML Page):
Note: Only the content inside the <body> section (the white area above) is displayed in a browser.
HTML Headings
HTML headings are defined with <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading:
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Try it Yourself »
HTML Paragraphs
HTML paragraphs are defined with <p> tags:
HTML Links
HTML links are defined with <a> tags:
The link's destination is specified in the href attribute.
HTML Images
HTML images are defined with <img> tags.
The source file (src), alternative text (alt),
width, and height are provided as attributes:
Example
<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"
Try it Yourself »
HTML Buttons
HTML buttons are defined with <button> tags:
HTML Lists
HTML lists are defined with <ul> (unordered/bullet list) or
<ol> (ordered/numbered list) tags, followed by <li>
tags (list items):
HTML Tables
An HTML table is defined with a <table> tag.
Table rows are defined with <tr> tags.
Table headers are
defined with <th> tags. (bold and centered
by default).
Table cells (data) are defined with <td> tags.
Example
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it Yourself »
With CSS »
Programming HTML
Every HTML element can have attributes.
For web development and programming, the most important attributes are id and class. These attributes are often used to address program based web page manipulations.
| Attribute | Example |
|---|---|
| id | <table id="table01" |
| class | <p class="normal"> |
| style | <p style="font-size:16px"> |
| data- | <div data-id="500"> |
| onclick | <input onclick="myFunction()"> |
| onmouseover | <a onmouseover="this.setAttribute('style','color:red')"> |
Full HTML Tutorial
This has been a short description of HTML.
For a full HTML tutorial go to W3Schools HTML Tutorial.
For a full HTML tag reference go to W3Schools Tag Reference.
