Scribd
Upload
11 views

Introduction To HTML

Introduction to HTML(Hyper Text Markup Language)

Uploaded by

nat yesu
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views

Introduction To HTML

Introduction to HTML(Hyper Text Markup Language)

Uploaded by

nat yesu
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 61

Introduction to HTML

Learning Outcomes
See how HTML describes the structure of a web page

Learn how tags or elements are added to your document

Explore the HTML elements specification


HTML
HTML stands for HyperText Markup Language
Newspaper Page components
Headlines,

Subheadings,

Paragraphs,

Text,

Image,
HTML describes structure of pages
<html>

<body>
<h1>This is the Main Heading</h1>
<p>This text might be an introduction to the rest of the page. And if the page is a long one it might
be split up into several sub-headings.</p>
<h2>This is a Subheading</h2>
<p>Many long articles have subheadings to help you follow the structure of what is being written.
There may even be sub-sub-headings (or lower-level headings).</p>
<h2>Another Subheading</h2>
<p>Here you can see another subheading.</p>
</body>

</html>
HTML
HTML code is made up of characters that live inside angled brackets
called HTML elements

HTML Elements are usually made up of two tags:

an opening tag and a closing tag

Each HTML element tells the browser something about the information
that sits between its opening and closing tags
HTML Tag
HTML Tag Attributes
Attributes provide additional information about the contents of an
element

They appear on the opening tag of the element and are made up of two
parts: a name and a value, separated by an equals sign
Basic HTML document structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body
</html>
Basic HTML document structure
<!DOCTYPE html> DOCTYPE identifies the
<html lang="en"> document as written in HTML5
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body
</html>
Basic HTML document structure
<!DOCTYPE html> The html element is called the
<html lang="en"> root element because it
<head> contains all the elements in the
<meta charset="UTF-8"> document
<title>Document</title>
</head>
<body>

</body
</html>
Basic HTML document structure
<!DOCTYPE html> The head element contains
<html lang="en"> elements that pertain to the
<head> document that are not rendered
<meta charset="UTF-8"> as part of the content, such as
its title, style sheets, scripts,
<title>Document</title>
and metadata
</head>
<body>

</body
</html>
Basic HTML document structure
<!DOCTYPE html> meta elements provide
<html lang="en"> document metadata,
<head> information about the
<meta charset="UTF-8"> document
<title>Document</title>
</head>
<body>

</body
</html>
Basic HTML document structure
<!DOCTYPE html> title mandatory element
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body
</html>
Basic HTML document structure
<!DOCTYPE html> body element contains
<html lang="en"> everything that we want to
<head> show up in the browser window
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body
</html>
HTML5 Specification
https://html.spec.whatwg.org/
Semantic Elements in HTML5
https://html.spec.whatwg.org/#semantics
Semantic Elements in HTML5
https://html.spec.whatwg.org/multipage/sections.html#sections
<main>
The main content area of a document includes content that is unique
to that document and excludes content that is repeated across a
set of documents such as

site navigation links, copyright information, site logos and banners,


and search forms (unless the document or application’s main function
is that of a search form)

A document must not have more than one main element that does
not have the hidden attribute specified

https://html.spec.whatwg.org/#the-main-element
<section>
The section element is used to define a generic section of a document
or application

A section, in this context, is a thematic grouping of content,


typically with a heading

https://html.spec.whatwg.org/#the-section-element
<section>
Examples of sections would be

chapters, the various tabbed pages in a tabbed dialog box, or the


numbered sections of a thesis

A web site's home page could be split into sections for an


introduction, news items, and contact information

It’s important to note that this element isn’t intended for styling
purposes
<nav>
The nav element is used to wrap major navigational links to other pages
or parts within the same page

https://html.spec.whatwg.org/multipage/sections.html#the-nav-element
<article>
The article element represents a complete, or self-contained,
composition in a document, page, application, or site and that is, in
principle, independently distributable or reusable, e.g. in
syndication

https://html.spec.whatwg.org/multipage/sections.html#the-article-
element
<article>
When article elements are nested, the inner article elements
represent articles that are in principle related to the contents of the
outer article

For instance,

a blog entry on a site that accepts user-submitted comments could


represent the comments as article elements nested within the
article element for the blog entry
<article>
Examples:

a forum post, a magazine or newspaper article, a blog entry, a user-


submitted comment, an interactive widget or gadget, or any other
independent item of content
<aside>
The aside element is used for content that is tangentially related to the
content around it

It can be used for side-bars, pull quotes, advertising, and groups of


navigation elements

https://html.spec.whatwg.org/multipage/sections.html#the-aside-
element
<header>
The header element represents a group of introductory or navigational
aids

A header element is intended to usually contain a heading (an h1–h6


element or an hgroup element), but this is not required

The header element can also be used to wrap a section's table of


contents, a search form, or any relevant logos

https://html.spec.whatwg.org/multipage/sections.html#the-header-element
<footer>
The footer element represents a footer for its nearest ancestor
sectioning content element, or for the body element if there is no
such ancestor

A footer typically contains information about its section such as

who wrote it, links to related documents, copyright data, and the
like

https://html.spec.whatwg.org/multipage/sections.html#the-footer-
element
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
These elements represent headings for their sections

https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-
h4,-h5,-and-h6-elements
<hgroup>
The hgroup element represents a heading and related content
The element may be used to group an h1–h6 element with one or more
p elements containing content representing a subheading,
alternative title, or tagline

https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-
element
<hgroup>
<hgroup>

<h1>The reality dysfunction</h1>

<p>Space is not the only void</p>

</hgroup>
Grouping Contents
https://html.spec.whatwg.org/multipage/grouping-content.html
<P>
The p element represents a paragraph

https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-
element
<hr>
The hr element represents a paragraph-level thematic break, e.g. a
scene change in a story, or a transition to another topic within a section
of a reference book

https://html.spec.whatwg.org/multipage/grouping-content.html#the-hr-
element
<blockquote>
The blockquote element represents a section that is quoted from
another source

https://html.spec.whatwg.org/multipage/grouping-content.html#the-
blockquote-element
<ol>
The ol element represents a list of items, where the items have
been intentionally ordered, such that changing the order would
change the meaning of the document

https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-
element
<ul>
The ul element represents a list of items, where the order of the
items is not important — that is, where changing the order would not
materially change the meaning of the document

https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-
element
<menu>
The menu element represents a toolbar consisting of its contents, in
the form of an unordered list of items (represented by li elements), each
of which represents a command that the user can perform or activate

https://html.spec.whatwg.org/multipage/grouping-content.html#the-
menu-element
<figure>
The figure element represents some flow content, optionally with a
caption, that is self-contained (like a complete sentence) and is typically
referenced as a single unit from the main flow of the document

The element can be used to annotate illustrations, diagrams,


photos, code listings, etc.

https://html.spec.whatwg.org/multipage/grouping-content.html#the-
menu-element
<div>
The div element has no special meaning at all

It represents its children

It can be used with the class, lang, and title attributes to mark up
semantics common to a group of consecutive elements.
Text-Level Semantics
https://html.spec.whatwg.org/multipage/text-level-
semantics.html#usage-summary
<a>
If the a element has an href attribute, then it represents a hyperlink
(a hypertext anchor) labeled by its contents

The target, download, ping, rel, hreflang, type, and referrerpolicy


attributes must be omitted if the href attribute is not present

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-
a-element
<em>
The em element represents stress emphasis of its contents

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-
em-element
<strong>
The strong element represents strong importance, seriousness, or
urgency for its contents

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-
strong-element
<data>
The data element represents its contents, along with a machine-
readable form of those contents in the value attribute

The value attribute must be present. Its value must be a representation


of the element's contents in a machine-readable format

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-
data-element
<sup>, <sub>
The sup element represents a superscript and the sub element
represents a subscript

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-
sub-and-sup-elements
<i>
The i element represents a span of text in an alternate voice or
mood, or otherwise offset from the normal prose in a manner
indicating a different quality of text, such as a taxonomic
designation, a technical term, an idiomatic phrase from another
language, transliteration, a thought

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-
i-element
<b>
The b element represents a span of text to which attention is being
drawn for utilitarian purposes without conveying any extra importance
and with no implication of an alternate voice or mood, such as

keywords in a document abstract, product names in a review,


actionable words in interactive text-driven software, or an article
lede

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-
b-element
<span>
The span element doesn't mean anything on its own, but can be useful
when used together with the global attributes, e.g. class, lang, or dir

It represents its children


<br>
The br element represents a line break.

br elements must be used only for line breaks that are actually part of
the content, as in poems or addresses.

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-
br-element
Embedded content
https://html.spec.whatwg.org/multipage/embedded-content.html
<picture>
The picture element is a container which provides multiple sources
to its contained img element to allow authors to declaratively
control or give hints to the user agent about which image
resource to use, based on the screen pixel density, viewport size,
image format, and other factors

It represents its children

https://html.spec.whatwg.org/multipage/embedded-content.html#the-
picture-element
<img>
An img element represents an image

The image given by the src and srcset attributes is the embedded
content

The value of the alt attribute provides equivalent content for those who
cannot process images or who have image loading disabled

https://html.spec.whatwg.org/multipage/embedded-content.html#the-
img-element

https://html.spec.whatwg.org/multipage/images.html
<img>
The src attribute must be present, and must contain a valid non-
empty URL potentially surrounded by spaces referencing a non-
interactive, optionally animated, image resource that is neither paged
nor scripted
<iframe>
The iframe element represents its nested navigable

The src attribute gives the URL of a page that the element's nested
navigable is to contain. The attribute, if present, must be a valid non-
empty URL potentially surrounded by spaces

https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-
iframe-element
<video>
A video element is used for playing videos or movies, and audio files
with captions

The src, crossorigin, preload, autoplay, loop, muted, and controls


attributes are the attributes common to all media elements

The poster attribute gives the URL of an image file that the user agent
can show while no video data is available

https://html.spec.whatwg.org/multipage/media.html#the-video-element
<audio>
An audio element represents a sound or audio stream

The src, crossorigin, preload, autoplay, loop, muted, and controls


attributes are the attributes common to all media elements

https://html.spec.whatwg.org/multipage/media.html#the-audio-element
Forms
https://html.spec.whatwg.org/multipage/forms.html#forms
<form>
The form element represents a hyperlink that can be manipulated
through a collection of form-associated elements, some of which can
represent editable values that can be submitted to a server for
processing

https://html.spec.whatwg.org/multipage/forms.html#forms
Tabular Data
https://html.spec.whatwg.org/multipage/tables.html#tables
<table>
The table element represents data with more than one dimension, in
the form of a table

Tables have rows, columns, and cells given by their descendants

The rows and columns form a grid; a table's cells must completely
cover that grid without overlap

https://html.spec.whatwg.org/multipage/tables.html#tables

You might also like