Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
45 views

Lesson 2 HTML Elements 1

The document defines HTML elements and tags. It provides a reference of common HTML elements organized by category. Some key elements include <html> for the document root, <head> for metadata, <body> for content, <h1>-<h6> for headings, <p> for paragraphs, and <a> for links. It also covers other common elements for text formatting, forms, images, tables, semantics, and metadata.

Uploaded by

mularwarren
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
45 views

Lesson 2 HTML Elements 1

The document defines HTML elements and tags. It provides a reference of common HTML elements organized by category. Some key elements include <html> for the document root, <head> for metadata, <body> for content, <h1>-<h6> for headings, <p> for paragraphs, and <a> for links. It also covers other common elements for text formatting, forms, images, tables, semantics, and metadata.

Uploaded by

mularwarren
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 135

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>
a section in a document
<header>
a header for a document or section
<footer>
a footer for a document or section
<main>
the main content of a document
<section>
a section in a document
<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>
a container for an external application
<embed>
a container for an external application
<embed>
a container for an external application
WS 101 end of lesson

You might also like