HTML FOR BEGINNERS
HTML
So, what exactly is HTML?
Main root
<html> …
</html>
The HTML <html> element represents the root (top-level element) of an HTML document, so it is also
referred to as the root
element. All other
elements must be descendants of this element.
Example:
Document metadata
<head> …
</head>
The HTML <head> element contains machine-readable information (metadata) about
the document, like its title, scripts, and style sheets.
<link>
The HTML External Resource Link element
(<link>) specifies relationships between the current document and an external resource. This element is most commonly
used to link
to stylesheets but is also used to establish site icons (both
"favicon" style icons
and icons for the home screen
and apps on mobile devices)
among other things.
<meta>
The HTML <meta> element represents metadata that cannot be represented by other HTML meta-related elements, like
<base>, <link>, <script>, <style>, or <title>
<style> …
</style>
The HTML
<style> element contains style information for a document or part of a
document.
<title> … </title>
The HTML Title
element (<title>) defines
the document's title
that is shown
in a browser's title bar or a page's
tab.
Example:
Sectioning root
<body> …
</body>
The HTML <body> Element represents the content of an HTML
document. There can be only one <body> element
in a document.
Example:
Content sectioning
<address> …
</address>
The HTML <address> element indicates that
the enclosed HTML
provides contact information for a person
or people, or for an organization.
<article> …
</article>
The HTML <article> element represents a self-contained composition in a document, page, application, or site,
which is intended to be independently distributable or reusable
(e.g., in syndication).
<aside> … </aside>
The HTML <aside> element represents a portion of a document
whose content is only indirectly related to the document's main content.
<footer> … </footer>
The HTML <footer> element represents a footer for its nearest
sectioning content or sectioning
root element. A footer typically contains information about
the author of the section, copyright data, or links to related documents.
<header> …
</header>
The HTML <header> element represents introductory content, typically a group of introductory
or navigational aids.
It may contain some heading
elements but also a logo,
a search form,
an author name, and other
elements.
<h1> to <h6> … </h6>
The HTML <h1>–<h6> elements represent six levels
of section headings. <h1> is the highest
section level and <h6> is the lowest.
<main> … </main>
The HTML <main> element represents the dominant content
of the <body> of a document. The main
content area consists
of content that
is directly related
to or expands upon the central
topic
of a document, or the central functionality of an application.
<nav> … </nav>
The HTML <nav> element represents a section of
a page whose purpose is to provide navigation links,
either within the
current document or to other
documents. Common examples of navigation sections
are menus, tables
of contents, and indexes.
<section> … </section>
The HTML <section> element represents a standalone section
— which doesn't
have a more specific semantic element
to represent it — contained within an HTML
document.
Example:
Text content
<blockquote> …
</blockquote>
The HTML <blockquote> Element (or HTML Block
Quotation Element) indicates that the enclosed
text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it).
A URL for the source
of the quotation may be given
using the cite attribute, while a text
representation of the source can be given
using the <cite> element.
<dd> … </dd>
The HTML <dd> element provides the description, definition, or value for
the preceding term (<dt>) in a description list (<dl>).
<div> …
</div>
The HTML Content
Division element (<div>) is the generic
container for flow
content. It has no
effect
on the content or layout
until styled using
CSS.
<dl> … </dl>
The HTML <dl> element represents a description list.
The element encloses a list of groups of terms
(specified using the
<dt> element) and descriptions (provided by <dd> elements).
Common uses for this element
are to implement a glossary
or to display metadata (a list of key-value pairs).
<dt> …
</dt>
The HTML <dt> element specifies a term in a description or definition list,
and as such must be used inside an <dl> element.
<figcaption> … </figcaption>
The HTML <figcaption> or Figure Caption
element represents a caption or legend describing the rest of the contents
of its parent <figure> element.
<figure> … </figure>
The HTML <figure> (Figure With Optional
Caption) element represents self-contained content,
potentially with an optional caption,
which is specified using the (<figcaption>) element.
<hr>
The HTML <hr> element represents a thematic break
between paragraph-level elements: for example, a change of scene in a story,
or a shift of topic
within a section.
<li> … </li>
The HTML <li> element is used
to represent an item in a list.
<ol> …
</ol>
The HTML <ol> element represents an ordered list
of items, typically rendered as a numbered
list.
<p> … </p>
The HTML <p> element represents
a paragraph.
<pre> … </pre>
The HTML <pre> element represents preformatted text which is to be presented exactly
as written in the HTML file.
<ul> … </ul>
The HTML <ul> element represents an unordered list of items,
typically rendered as a bulleted list.
Examples:
Inline text semantics
<a> …
</a>
The HTML <a> element (or anchor
element), with its href attribute, creates a hyperlink to web pages, files,
email addresses, locations on the same
page, or anything
else a URL can address.
<abbr> … </abbr>
The HTML Abbreviation element (<abbr>) represents an abbreviation or acronym; the optional
title
attribute can provide
an expansion or description for the abbreviation.
<br>
The HTML <br> element produces a line break
in text (carriage-return). It is useful
for writing a poem or an address, where
the division of lines is significant.
<cite> … </cite>
The HTML Citation element (<cite>) is used to describe a reference to a cited
creative work, and must include the title of that work.
<code> …
</code>
The HTML <code> element displays its
contents styled in a fashion
intended to indicate
that the text is a short fragment
of computer code.
<em> … </em>
The HTML <em> element marks text
that has stress
emphasis. The <em> element can be nested, with each
level of nesting
indicating a greater
degree of emphasis.
<mark> … </mark>
The HTML Mark Text element
(<mark>) represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context.
<small> … </small>
The HTML <small> element represents side comments and small print,
like copyright and
legal text, independent of its styled
presentation. By default,
it renders text within it one font-size small, such as from small
to x-small.
<span> … </span>
The HTML <span> element is a generic inline
container for phrasing content, which does
not inherently represent anything. It can be used to group elements for styling purposes
(using the class or id attributes), or because they
share attribute values,
such as lang.
<strong> … </strong>
The HTML Strong
Importance Element (<strong>) indicates that its contents have
strong importance, seriousness,
or urgency. Browsers typically render the contents in bold type.
<time> … </time>
The HTML <time> element
represents a specific period in time.
Examples:
Image and multimedia
<audio> …
</audio>
The HTML <audio> element is used to embed
sound content in documents. It may contain
one or more audio sources,
represented using the src attribute or the <source> element: the browser will choose
the most suitable one. It can
also be the
destination for streamed media, using MediaStream.
<img>
The HTML <img> element embeds
an image into the document.
<track>
The HTML <track> element is used as a child of the media
elements <audio> and <video>. It lets
you specify timed
text tracks (or time-based data),
for example, to automatically handle subtitles. The tracks are formatted in WebVTT format
(.vtt files) — Web Video
Text Tracks or Timed Text Markup
Language (TTML).
<video> …
</video>
The HTML Video
element (<video>) embeds
a media player
which supports video
playback into the document. You can use
<video> for audio
content as well,
but the <audio> element may provide a more appropriate user experience.
Examples:
Scripting
<script> …
</script>
The HTML <script> element is used
to embed or reference executable code; this is typically
used
to embed or refer to JavaScript code.
Example:
Demarcating edits
<del> …
</del>
The
HTML <del> element
represents a range
of text that
has been deleted
from a document.
<ins> … </ins>
The
HTML <ins> element
represents a range
of text that has been
added to a document.
Example:
Table content
<caption> … </caption>
The HTML Table
Caption element (<caption>) specifies the caption
(or title) of a table,
and if used is always the first child of a <table>.
<table> …
</table>
The HTML <table> element represents tabular
data — that is, the information presented in a two-dimensional table comprised of rows and columns of cells containing data.
<tbody> … </tbody>
The HTML Table
Body element (<tbody>) encapsulates a set of table
rows (<tr> elements), indicating that they comprise the body of the table
(<table>).
<td> … </td>
The HTML <td> element defines a cell of a table
that contains data.
It participates in the table model.
<tfoot> … </tfoot>
The HTML <tfoot> element
defines a set of rows summarizing the columns of the table.
<th> …
</th>
The HTML <th> element defines a cell as the header of a group
of table cells.
The exact nature
of this group is defined
by the scope and header
attributes.
<thead> … </thead>
The
HTML <thead> element
defines a set of rows
defining the head
of the columns of the table.
<tr> … </tr>
The HTML <tr> element defines a row of cells in a table.
The row's cells
can then be established
using
a mix of <td> (data
cell) and <th> (header cell) elements.
Example:
Forms
<button> …
</button>
The HTML <button> element represents a clickable button,
which can be used in forms or anywhere in a document that
needs simple, standard
button functionality.
<datalist> … </datalist>
The HTML <datalist> element contains a set of <option> elements that represent the
values available for other controls.
<fieldset> … </fieldset>
The HTML <fieldset> element is used to group
several controls as well as labels (<label>) within a web form.
<form> …
</form>
The HTML <form> element represents a document
section that contains interactive controls for submitting information to a web server.
<input>
The HTML <input> element is used
to create interactive controls for web-based forms in order to accept data
from the user;
a wide variety
of types of input data
and control widgets
are available, depending on the device and user agent.
<label> … </label>
The HTML <label> element
represents a caption for an item in a user interface.
<legend> … </legend>
The
HTML <legend> element
represents a caption
for the content
of its parent <fieldset>.
<optgroup> … </optgroup>
The
HTML <optgroup> element
creates a grouping of options within an <select> element.
<option> … </option>
The HTML <option> element is used
to define an item contained in a <select>, an <optgroup>,
or an <datalist> element. As such, <option> can represent menu
items in popups
and other lists of items in an HTML document.
<progress> … </progress>
The HTML <progress> element displays an indicator showing
the completion progress
of a task, typically displayed as a progress
bar.
<select> …
</select>
The HTML
<select> element represents a control that provides a menu of options
<textarea> … </textarea>
The HTML <textarea> element represents a multi-line plain-text editing control, useful
when you want to allow users
to enter a sizeable amount
of free-form text,
for example, a comment
on a review or feedback
form.
Example:
Interactive elements
<details> …
</details>
The HTML Details
Element (<details>) creates
a disclosure widget
in which information is visible only when the widget is toggled into an "open" state.
<summary> … </summary>
The HTML Disclosure Summary element (<summary>) element specifies a summary, caption, or legend for an <details> element's disclosure box.
Example:
