What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this
is a link", etc.
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title
bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
Note: Some HTML elements have no content (like the <br> element). These elements are
called empty elements. Empty elements do not have an end tag!
eb Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and
display them correctly.
A browser does not display the HTML tags, but uses them to determine how to display the
document:
HTML Page Structure
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>.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type and helps browsers to display web
pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case-sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
<a href="[Link] is a link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
Example
<img src="[Link]" alt="[Link]" width="104" height="142">
To add a comment in HTML, you should use the following syntax:
<!-- Your comment here -->
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>, <body>, <h1> and <p>):
Example Explained
The <html> element is the root element and it defines the whole HTML document.
It has a start tag <html> and an end tag </html>.
Then, inside the <html> element there is a <body> element:
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
The <body> element defines the document's body.
It has a start tag <body> and an end tag </body>.
Then, inside the <body> element there are two other elements: <h1> and <p>:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>:
<h1>My First Heading</h1>
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>:
<h1>My First Heading</h1>
It has a start tag <p> and an end tag </p>:
<p>My first paragraph.</p>
Never Skip the End Tag
Some HTML elements will display correctly, even if you forget the end tag:
Example <p>This is a paragraph
Empty HTML Elements
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing tag:
<p>This is a <br> paragraph with a line break.</p>
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML standard does not require lowercase tags, but W3C recommends lowercase in
HTML, and demands lowercase for stricter document types like XHTML.
HTML Tag Reference
W3Schools' tag reference contains additional information about these tags and their
attributes.
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
Basic HTML
Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<head> Contains metadata/information for the document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
<!--...--> Defines a comment
Formatting
Tag Description
Not supported in HTML5. Use <abbr> instead.
<acronym>
Defines an acronym
<abbr> Defines an abbreviation or an acronym
Defines contact information for the author/owner of a
<address>
document/article
<b> Defines bold text
Isolates a part of text that might be formatted in a different direction
<bdi>
from other text outside it
<bdo> Overrides the current text direction
Not supported in HTML5. Use CSS instead.
<big>
Defines big text
<blockquote> Defines a section that is quoted from another source
Not supported in HTML5. Use CSS instead.
<center>
Defines centered text
<cite> Defines the title of a work
<code> Defines a piece of computer code
<del> Defines text that has been deleted from a document
<dfn> Specifies a term that is going to be defined within the content
<em> Defines emphasized text
Not supported in HTML5. Use CSS instead.
<font>
Defines font, color, and size for text
<i> Defines a part of text in an alternate voice or mood
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
Defines what to show in browsers that do not support ruby
<rp>
annotations
Defines an explanation/pronunciation of characters (for East Asian
<rt>
typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<small> Defines smaller text
Not supported in HTML5. Use <del> or <s> instead.
<strike>
Defines strikethrough text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
Defines a container for content that should be hidden when the page
<template>
loads
<time> Defines a specific time (or datetime)
Not supported in HTML5. Use CSS instead.
<tt>
Defines teletype text
Defines some text that is unarticulated and styled differently from
<u>
normal text
<var> Defines a variable
<wbr> Defines a possible line-break
Forms and Input
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<button> Defines a clickable button
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation
Frames
Tag Description
Not supported in HTML5.
<frame>
Defines a window (a frame) in a frameset
Not supported in HTML5.
<frameset>
Defines a set of frames
Not supported in HTML5.
<noframes>
Defines an alternate content for users that do not support frames
<iframe> Defines an inline frame
Images
Tag Description
<img> Defines an image
<map> Defines a client-side image map
<area> Defines an area inside an image map
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content
<picture> Defines a container for multiple image resources
<svg> Defines a container for SVG graphics
Audio / Video
Tag Description
<audio> Defines sound content
Defines multiple media resources for media elements (<video>,
<source>
<audio> and <picture>)
<track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines a video or movie
Links
Tag Description
<a> Defines a hyperlink
Defines the relationship between a document and an external resource
<link>
(most used to link to style sheets)
<nav> Defines navigation links
Lists
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
Not supported in HTML5. Use <ul> instead.
<dir>
Defines a directory list
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of a term/name in a description list
Tables
Tag Description
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Specifies column properties for each column within a <colgroup>
<col>
element
<colgroup> Specifies a group of one or more columns in a table for formatting
Styles and Semantics
Tag Description
<style> Defines style information for a document
<div> Defines a section in a document
<span> Defines a section in a document
<header> Defines a header for a document or section
<footer> Defines a footer for a document or section
<main> Specifies the main content of a document
<section> Defines a section in a document
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<summary> Defines a visible heading for a <details> element
<data> Adds a machine-readable translation of a given content
Meta Info
Tag Description
<head> Defines information about the document
<meta> Defines metadata about an HTML document
<base> Specifies the base URL/target for all relative URLs in a document
Not supported in HTML5. Use CSS instead.
<basefont>
Specifies a default color, size, and font for all text in a document
Programming
Tag Description
<script> Defines a client-side script
Defines an alternate content for users that do not support client-side
<noscript>
scripts
Not supported in HTML5. Use <embed> or <object> instead.
<applet>
Defines an embedded applet
<embed> Defines a container for an external (non-HTML) application
<object> Defines an embedded object
<param> Defines a parameter for an object
