Lesson 2 HTML Elements 1

WEB SYSTEMS
AND
TECHNOLOGIES 1
WS 101 (Laboratory)
Lesson 2 - HTML Elements
HTML Elements
An HTML element is defined by a start tag, some
content, and an end tag.
HTML Elements
<tagname> Content goes here… </tagname>
<h1>My First Heading</h1> <p>My first paragraph.</p>
Start tag Element Element

End tag Start tag End tag
content content
<h1> My First My first
</h1> <p> </p>
Heading paragraph.
Empty Elements
Have no content. Do not have end tag.
<br>
Start tag Element content End tag
<br> none none

Nested HTML Elements
elements can contain other elements
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Never Skip the End Tag
Have no content. Do not have end tag.
HTML is Not Case Sensitive
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
Tag Description
Defines the root of an HTML

<html>
Document
<body> Defines the document’s body
<h1> to <h6> Defines the HTML headings

HTML Tags
Basic HTML
<!DOCTYPE>
the document type
<html>
the root of an HTML document
<head>
metadata/information for the document
<title>
a title for the document
<body>
the document's body
<h1> to <h6>
HTML headings
<p>
a paragraph
<br>
a single line break
<hr>
a thematic change in the content

a comment
Formatting
<abbr>
an abbreviation or an acronym
<address>
contact information for the author/owner of a document
<b>
bold text
<bdi>
isolates a part of text that might be formatted in a different
direction from other text outside it
<bdo>
overrides the current text direction
<blockquote>
a section that is quoted from another source
<cite>
the title of a work
<del>
text that has been deleted from a document
<dfn>
a term that is going to be defined within
the content
<em>
emphasized text
<i>
a part of text in an alternate voice or mood
<ins>
a text that has been inserted into a document
<kbd>
keyboard input
<mark>
marked/highlighted text
<meter>
a scalar measurement within a known range
<pre>
preformatted text
<progress>
represents the progress of a task
<q>
a short quotation
<rp>
what to show in browsers that do not support
ruby annotations
<rt>
an explanation/pronunciation of
characters (for East Asian typography)
<ruby>
a ruby annotation (for East Asian typography)
<s>
text that is no longer correct
<samp>
sample output from a computer program
<small>
smaller text
<strong>
important text
<sub>
subscripted text
<sup>
superscripted text
<template>
a container for content that should be hidden when the page loads
<time>
a specific time (or datetime)
<u>
some text that is unarticulated and
styled differently from normal text
<var>
a variable
<wbr>
a possible line-break
Forms and Input
<form>
an HTML form for user input
<input>
an input control
<textarea>
a multiline input control (text area)
<button>
a clickable button
<select>
a drop-down list
<optgroup>
a group of related options in a drop-down list
<option>
an option in a drop-down list
<label>
a label for an <input> element
<fieldset>
groups related elements in a form
<legend>
a caption for a <fieldset> element
<datalist>
a list of pre-defined options for input controls
<output>
the result of a calculation
Frames
<iframe>
an inline frame
Images
<img>
an image
<map>
an image map
<area>
an area inside an image map
<canvas>
used to draw graphics, on the fly, via scripting
(usually JavaScript)
<figcaption>
a caption for a <figure> element
<figure>
self-contained content
<picture>
a container for multiple image resources
<picture>
a container for multiple image resources
<picture>
a container for
multiple image
resources
<svg>
a container for SVG graphics
Audio/Video
<audio>
embedded sound content
<source>
multiple media resources for media elements
(<video> and <audio>)
<track>
text tracks for media elements
(<video> and <audio>)
<video>
embedded video content
Links
<a>
a hyperlink
<link>
the relationship between a document and an
external resource (most used to link to style sheets)
<nav>
navigation links
Lists
<ul>
an unordered list
<ol>
an ordered list
<li>
a list item
<dl>
a description list
<dt>
a term/name in a description list
<dd>
a description/value of a term in a description list
Tables
<table>
a table
<caption>
a table
caption
<th>
a header cell in a
table
<tr>
a row in a table
<td>
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
<col>
column
properties for
each column
within a
<colgroup>
element
<colgroup>
a group of one or
more columns in a
table for
formatting
Styles and Semantics
<style>
style information for a document
<div>
a section in a document
<span>
<header>
a header for a document or section
<footer>
a footer for a document or section
<main>
the main content of a document
<section>
<article>
an article
<aside>
content aside from the page content
<details>
additional details that the user can view or hide
<dialog>
a dialog box or window
<summary>
a visible heading for a <details> element
Meta Info
<meta>
metadata about an HTML document
Programming
<script>
a client-side script
<noscript>
an alternate content for users that do not
support client-side scripts
<object>
a container for an external application
<param>
a parameter for an object
Miscellaneous
<data>
adds a machine-readable
translation of a given content
<embed>
<embed>
<embed>
WS 101 end of lesson

Lesson 2 HTML Elements 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lesson 2 HTML Elements 1

Uploaded by

Copyright:

Available Formats

WEB SYSTEMS

<h1>My First Heading</h1> <p>My first paragraph.</p>

Start tag Element Element

Start tag Element content End tag

<br> none none

<h1>My First Heading</h1>

The HTML standard does not

Defines the root of an HTML

<body> Defines the document’s body

<h1> to <h6> Defines the HTML headings

You might also like