HTML CLASS NOTES
What is HTML?
• (HyperText Markup Language)
• a markup language that tells web browsers how to
structure the web page.
• can be as complicated or as simple as the web
developer wants it to be.
• consists of a series of elements, used to enclose, wrap,
or mark up different parts of content to make it appear
or act in a certain way.
• Note:HTML tags are not case-sensitive. For
example, <title>, <TITLE>, <Title>, <TiTlE>, etc., will
work.
• Best practice - write all tags in lowercase for
consistency and readability.
Anatomy of an HTML element
• The opening tag: consists of the name of the element
(e.g., p for paragraph), wrapped in opening and closing
angle brackets. marks where the element begins or starts
to take effect.
• The content: This is the content of the element.
• The closing tag: same as the opening tag, except it
includes a forward slash before the element name. marks
where the element ends.
Nesting elements
• Example ;
<p>My cat is <strong>very</strong> grumpy.</p>
• The following is an example of the wrong way to
do nesting:
<p>My cat is <strong>very grumpy.</p></strong>
Block versus inline elements
• Block-level elements:
– form a visible block on a page.
– appears on a new line following the content that precedes it.
– content that follows a block-level element also appears on a new line.
– usually structural elements on the page. For example, headings,
paragraphs, lists, navigation menus, or footers.
– block-level element wouldn't be nested inside an inline element, but it
might be nested inside another block-level element.
• Inline elements:
– are contained within block-level elements, and surround only small
parts of the document's content (not entire paragraphs or groupings
of content).
– will not cause a new line to appear in the document.
– typically used with text, for example an <a> element creates a
hyperlink, and elements such as <em> or <strong> create emphasis.
Void elements
• elements consisting of a single tag.
• typically used to insert/embed something in the
document.
• For example, the <img> element embeds an image file
onto a page:
• Example:
<img src="images/icon.png" alt=“my icon" />
Note: In HTML, a / is not required at the end of a void
element's tag, e.g.: <img src="cat.jpg" alt="cat" />.
=> it is still a valid syntax, and necessary when HTML
needs to be valid XML.
Attributes
• Elements can have attributes.
• Attributes contain extra information about the element
that won't appear in the content.
• An attribute should have:
– A space between it and the element name. (For an element
with more than one attribute, they should be separated by
spaces too.)
– The attribute name, followed by an equal sign.
– An attribute value, wrapped with opening and closing
quote marks.
Anatomy of an HTML document
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
Anatomy of an HTML document
Here we have:
1. <!DOCTYPE html>:
– Early HTML (1991-1992), doctypes were meant to act as links to a set
of rules that the HTML page had to follow to be considered good
HTML.
– More recently, it is a historical artifact that needs to be included for
everything else to work right.
– <!DOCTYPE html> is the shortest string of characters that counts as a
valid doctype.
2. <html></html>:
– The <html> element. wraps all the content on the page.
– Sometimes known as the root element.
3. <head></head>: The <head> element.
– acts as a container for everything you want to include on the HTML
page, that isn't the content the page will show to viewers.
– including keywords and a page description that would appear in
search results, CSS to style content, character set declarations, and
more.
Anatomy of an HTML document
4. <meta charset="utf-8">: The <meta> element.
– represents metadata that cannot be represented by other HTML
meta-related elements,
like <base>, <link>, <script>, <style> or <title>.
– The charset attributes sets the character set for your document
to UTF-8, which includes most characters from the vast majority
of human written languages.
5. <title></title>: The <title> element.
– sets the title of the page, (title that appears in the browser tab
the page is loaded in).
– page title is also used to describe the page when it is
bookmarked.
6. <body></body>: The <body> element.
– contains all the content that displays on the page, including text,
images, videos, games, playable audio tracks, or whatever else.
Whitespace in HTML
• whitespace included in the code is optional.
• These two code snippets are equivalent:
<p>Dogs are silly.</p>
<p>Dogs are
silly.</p>
• whitespace in HTML element content can include one
or more space character, and also line breaks)
• the HTML parser reduces sequence of whitespace to a
single space when rendering the code.
• Whitespaces are used to improve readability.
(formatting e.g. by indenting)
Entity references: Including special
characters in HTML
• In HTML, the characters <, >,",' and & are special
characters. They are parts of the HTML syntax
• To include one of these special characters in text
(e.g., to use an ampersand or less-than sign, and
not have it interpreted as code):
– Make use of character references- special codes that
represent characters, to be used in these exact
circumstances.
– Each character reference starts with an ampersand
(&), and ends with a semicolon (;).
Entity references:
Literal character Character reference equivalent
< <
> >
" "
' '
& &
Example:
<p>In HTML, you define a paragraph using the <p>
element.</p>
HTML comments
• Browsers ignore comments, effectively making
comments invisible to the user.
• comments allow notes in the code to explain logic or
coding.
• To write an HTML comment, wrap it in <!-- and -->.
• For example:
<p>I'm not inside a comment</p> <!--
<p>I am!</p> -->
• only the first paragraph is displayed in the browser.
The head - Metadata in HTML
• The head - is the part that is not displayed in the
web browser when the page is loaded.
• It contains information such as:
– the page <title>,
– links to CSS (if CSS is used),
– links to custom favicons, and
– other metadata (data about the HTML, such as the
author, and important keywords that describe the
document).
• Web browsers use information contained in
the head to render the HTML document correctly.
What is the HTML head?
• The HTML head is the contents of the <head> element.
• The head's job is to contain metadata about the document.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
Adding a title
• The <title> element - can be used to add a
title to the document.
• It is a metadata that represents the title of the
overall HTML document (not the document's
content.)
Metadata: the <meta> element
• Metadata is data that describes data,
• HTML "official" way of adding metadata to a document is
by using the <meta> element.
• Some common types of <meta> elements
– Specifying your document's character encoding
<meta charset="utf-8" />
– It specifies the document's character encoding — the
character set that the document is permitted to use.
– utf-8 is a universal character set that includes most characters
from any human language. =>the page will be able to handle
displaying any language; For example, it could handle English
and Japanese just fine.
– Example <p>Japanese example: ご飯が熱い。</p> try
with ISO-8859-1
the <meta> element
Adding an author and description
• Many <meta> elements include name and
content attributes:
– name specifies the type of meta element it is; what
type of information it contains.
– content specifies the actual meta content.
• Two such meta elements that are useful to
include on your page define the author of the
page, and provide a concise description of the
page. Let's look at an example:
Author And description-example
<meta name="author" content="Chris Bongo" />
<meta
name="description" content="The web dev
Learning aims to provide complete beginners to
the Web with all they need to know to get
started with developing web sites and
applications." />
• Benefits of Specifying an author :
– it is useful to be able to understand who wrote the page, incase of
questions about the content and you would like to contact them.
– Some content management systems have facilities to automatically
extract page author information and make it available for such
purposes.
• Specifying a description
– includes keywords relating to the content of your page I
– use- has the potential to make your page appear higher in relevant
searches performed in search engines (such activities are
termed Search Engine Optimization, or SEO.)
HTML Favicon
• A favicon is a small image displayed next to the page title
in the browser tab
• favicon (short for "favorites icon", referring to its use in
the "favorites" or "bookmarks" lists in browsers).
• favicon has been around for many years. It is the first icon
of this type: a 16-pixel square icon used in multiple places.
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon“
href="/images/favicon.ico">
</head>
Tip: A favicon is a small image, so it should be a simple image
with high contrast.
- A common name for a favicon image is "favicon.ico".
Applying CSS and JavaScript to HTML
• the modern day website will employ CSS for styling,
and JavaScript to power interactive functionality, such
as video players, maps, games, and more.
• Commonly applied using the <link> element and
the <script> element, respectively.
– The <link> element should always go inside the head of
your document.
– This takes two attributes, rel="stylesheet", which indicates
that it is the document's stylesheet, and href, which
contains the path to the stylesheet file.
<link rel="stylesheet" href="my-css-file.css" />
• The <script> element
– should also go into the head,
– include a src attribute containing the path to the
JavaScript you want to load, and defer.
– instructs the browser to load the JavaScript after the
page has finished parsing the HTML-
– the HTML is all loaded before the JavaScript runs, to
avoid errors from JavaScript trying to access an HTML
element that doesn't exist on the page yet.
– There are actually a number of ways to handle loading
JavaScript on your page, but this is the most reliable
one to use for modern browsers
<script src="my-js-file.js" defer></script>
Setting the primary language of the
document
• done by adding the lang attribute to the opening HTML
tag
<html lang="en-US"> … </html>
• WHY? :
– The document will be indexed more effectively by search
engines (for example, it will appear correctly in language-
specific results)
– useful to people with visual impairments using screen
readers (for example, the word "six" exists in both French
and English, but is pronounced differently.)
• subsections of the document can be set to be
recognized as different languages. For example, :
<p>Japanese example: <span lang="ja">ご飯が熱い。
</span>.</p>
HTML text fundamentals
The basics: headings and paragraphs
• In HTML, each paragraph has to be wrapped in a <p>
element:
<p>I am a paragraph, oh yes I am.</p>
• Each heading has to be wrapped in a heading element:
<h1>I am the title of the story.</h1>
• There are six heading elements: <h1>, <h2>, <h3>, <h4>,
<h5>, <h6>
• Each represents a different level of content
• <h1> represents the main heading, <h2> represents
subheadings, <h3> represents sub-subheadings, and so on.
Implementing structural hierarchy
• best practices for creating such structures:
– use a single <h1> per page—this is the top level
heading, and all others sit below this in the hierarchy.
– Use the headings in the correct order in the hierarchy.
Don't use <h3> elements to represent subheadings,
followed by <h2> elements to represent sub-
subheadings—that doesn't make sense and will lead
to weird results.
– Of the six heading levels , aim to use no more than
three per page, unless you feel it is necessary.
Documents with many levels become unwieldy and
difficult to navigate. it is advisable to spread such
content over multiple pages if possible.
1. Unordered
Lists
• used to mark up lists of items for which the order of the items doesn't
matter.
• starts off with a <ul> element—this wraps around all the list items:
• each list item is wraped in a <li> (list item) element:
<ul>
<li>milk</li>
<li>eggs</li>
<li>bread</li>
</ul>
2. Ordered lists
• lists in which the order of the items does matter.
• wrap the list items in an <ol> element, rather than <ul>:
<ol>
<li>Drive to the end of the road</li>
<li>Turn right</li>
<li>Turn left at the third roundabout</li>
<li>The school is on your right</li>
</ol>
Emphasis and importance
• emphasize certain words to alter the meaning of a sentence, and
we often want to mark certain words as important or different in
some way. HTML provides various semantic elements to allow us to
mark up textual content with such effects,
Emphasis
• in written language we tend to stress words by putting them in
italics. For example, the following two sentences have different
meanings.
• I am glad you weren't late.
• I am glad you weren't late.
<em> (emphasis) element
• Make’s the document more interesting to read,
• recognized by screen readers, which can be configured to speak
them in a different tone of voice.
• Browsers style this as italic by default, but you shouldn't use this tag
purely to get italic styling.
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
Strong importance
• For example:
• This liquid is highly toxic.
• I am counting on you. Do not be late!
• <strong> (strong importance) element
– also recognized by screen readers
– Browsers style this as bold text by default, but you
shouldn't use this tag purely to get bold styling.
<p>This liquid is <strong>highly toxic</strong>.</p>
• You can nest strong and emphasis inside one another if
desired:
<p>This liquid is <strong>highly toxic</strong> — if you
drink it, <strong>you may <em>die</em></strong>.</p>
Italic, bold, underline…
• <b>, <i>, and <u>
– came about so people could write bold, italics, or
underlined text when CSS support was poor not at
all.
– Elements like this, which only affect presentation
and not semantics, are known as presentational
elements and should no longer be used because,
semantics is so important to accessibility, SEO, etc.
hyperlinks
• Really important- they are make the Web a web.
• allow us to link documents to other documents
or resources, link to specific parts of documents,
or make apps available at a web address.
• Almost any web content can be converted to a
link so that when clicked or otherwise activated
the web browser goes to another web address
(URL).
Anatomy of a link
• A basic link is created by wrapping the text or other content, inside
an <a> element and using the href attribute, also known as
a Hypertext Reference, or target, that contains the web address.
<p> I'm creating a link to <a
href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>
Adding supporting information with the title attribute
• The title- contains additional information about the link, such as
which kind of information the page contains, or things to be aware
of on the website.
<p> I'm creating a link to <a href="/" title="The best place to find more
information ">the Mozilla homepage</a>. </p>
• Note: A link title is only revealed on mouse hover, which means
that people relying on keyboard controls or touchscreens to
navigate web pages will have difficulty accessing title information.
Block level links
• almost any content can be made into a link,
even block-level elements. If you have an image you
want to make into a link, use the <a> element and
reference the image file with the <img> element.
<a href="https://www.mozilla.org/en-US/"> <img
src="mozilla-image.png" alt="Mozilla homepage" /> </a>
A quick primer on URLs and paths
• A URL, or Uniform Resource Locator is a string of text
that defines where something is located on the Web.
• URLs use paths to find files. Paths specify where the file
you're interested in is located in the filesystem.
E-mail links
• when clicked, open a new outgoing email message
• done using the <a> element and the mailto: URL scheme.
• For example:
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
• In fact, the email address is optional.
Specifying details
• any standard mail header fields can be added to the mailto URL you
provide.
• E.g. "subject", "cc", and "body" (which is not a true header field, but
allows you to specify a short content message for the new email).
Each field and its value is specified as a query term.
• Here's an example that includes a cc, bcc, subject and body:
<a
href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=
name3@rapidtables.com&subject=The%20subject%20of%20the%20e
mail&body=The%20body%20of%20the%20email"> Send mail with cc,
bcc, subject and body </a>
Document and website structure
• HTML also boasts a number of block level
elements.
• These are used to define areas of website
(such as "the header", "the navigation menu",
"the main content column").:
Basic sections of a document
Webpages tend to share similar standard components, unless
the page is displaying a fullscreen video or game, is part of
some kind of art project, or is just badly structured:
• header: Usually a big strip across the top with a big heading,
logo, and perhaps a tagline. This usually stays the same from
one webpage to another.
• navigation bar: Links to the site's main sections; usually
represented by menu buttons, links, or tabs. Also usually
remains consistent from one webpage to another. Can be
considered as part of the header, or separated for better
accessibility - screen readers can read the two features better
if they are separate.
• main content:A big area in the center that contains most of
the unique content of a given webpage, for example, the
video you want to watch, or the main story you're reading, or
the map you want to view, or the news headlines, etc.
More sections
• sidebar:Some peripheral info, links, quotes, ads, etc.
Usually, this is contextual to what is contained in the
main content (e.g. a news article page, sidebar can
have the author's bio, or links to related articles) in
some, recurring elements like a secondary navigation
system.
• footer:A strip across the bottom of the page that
generally contains fine print, copyright notices, or
contact info. put common information (like the header)
but usually, the information is not critical or secondary
to the website itself. sometimes used for SEO purposes,
by providing links for quick access to popular content.
HTML for structuring content
• With the right CSS, you could use any elements to
wrap around the different sections and get it
looking how you wanted, but to respect
semantics, use the right element for the right
job.
• This is because visuals don't tell the whole story.
We use color and font size to draw sighted users'
attention to the most useful parts of the content,
like the navigation menu and related links, but
what about visually impaired people for
example?
Using semantic mark up
• header: <header>.
• navigation bar: <nav>.
• main content: <main>, with various content
subsections represented
by <article>, <section>, and <div> elements.
• sidebar: <aside>; often placed inside <main>.
• footer: <footer>.
Layout elements definitions
• <main> is for content unique to this
page. Use <main> only once per page, and put it directly
inside <body>. Ideally this shouldn't be nested within other
elements.
• <header> represents a group of introductory content. If it is
a child of <body> it defines the global header of a webpage,
but if it's a child of an <article> or <section> it defines a
specific header for that section (try not to confuse this
with titles and headings).
• <nav> contains the main navigation functionality for the
page. Secondary links, etc., would not go in the navigation.
• <footer> represents a group of end content for a page.
• Each of the aforementioned elements can be clicked on to
read the corresponding article in the "HTML element
reference" section, providing more detail about each one.
More layout elements
• <article> encloses a block of related content that makes
sense on its own without the rest of the page (e.g., a single
blog post).
• <section> is similar to <article>, but it is more for grouping
together a single part of the page that constitutes one
single piece of functionality (e.g., a mini map, or a set of
article headlines and summaries), or a theme. It's
considered best practice to begin each section with
a heading; also note that you can break <article>s up into
different <section>s, or <section>s up into
different <article>s, depending on the context.
• <aside> contains content that is not directly related to the
main content but can provide additional information
indirectly related to it (glossary entries, author biography,
related links, etc.).
Non-semantic wrappers
• Some situations there is no ideal semantic element to
group some items together or wrap some content. To
group a set of elements together to affect them all as a
single entity with some CSS or JavaScript.
• For such cases like these, HTML provides :
– the <div> and <span> elements. should be used preferably
with a suitable class attribute, to provide some kind of
label for them so they can be easily targeted.
– <span> is an inline non-semantic element, which you
should only use if you can't think of a better semantic text
element to wrap your content, or don't want to add any
specific meaning.
Line breaks and horizontal rules
<br>: the line break element
• creates a line break in a paragraph. For example:
<p> There once was a man named O'Dell<br /> Who loved to write HTML<br /> But
his structure was bad, his semantics were sad<br /> and his markup didn't read very
well. </p> Copy to Clipboard
• Without the <br> elements, the paragraph would just be rendered in one long line
<hr>: the thematic break element
• create a horizontal rule in the document that denotes a thematic change in the
text (such as a change in topic or scene). Visually it just looks like a horizontal line.
As an example:
• <p> Kigen was backed into a corner by the marauding Hyenas. Scared, but
determined to protect his friends, he raised his spear and prepared to do battle,
hoping that his distress call had made it through. </p> <hr /> <p> Meanwhile, Sila
was sitting at home, staring at his royalty statement and pondering when the next
spin off series would come out, when an enchanted distress letter flew through his
window and landed in his lap. He read it hazily and sighed; "better get back to
work then", he mused. </p> Copy to Clipboard
DESCRIPTION LISTS
• Purpose – mark up a set of items and their associated
descriptions. E.g. terms and definitions.
<dl>
<dt>boy</dt>
<dd> human young male </dd>
<dt>puppy</dt>
<dd> young of dog. </dd>
</dl>
=> The browser default will display indented descriptions.
=>A term can have multiple descriptions.
Quotation
BLOCKQUOTE
• For block level content e.g.
paragraph/paragraphs, list, etc
• Browser renders as indented text
<p>Here is a blockquote:</p>
<blockquote cite="https://WWW.w3c/HTML/Element/blockquote">
<p>
The <strong>HTML <code><blockquote></code> Element</strong> (or
<em>HTML Block Quotation Element</em>) indicates that the enclosed text is an
extended quotation.
</p>
</blockquote>
Inline quotations
-Browser default styling render this as normal
text put in quotes to indicate a quotation,
<p>
The quote element — <code><q></code> — is
<q cite="https://www.w3c/Web/HTML/Element/q">
intended for short quotations that don't require paragraph breaks.
</q>
</p>
Additional topics
Information architecture
• as applied to web design and development, is
the practice of organizing the information /
content / functionality of a web site so that it
presents the best user experience it can, with
information and services being easily usable
and findable.
– It is to try to work out what content you want to
put on a whole website, what pages you need,
and how they should be arranged and link to one
another for the best possible user experience.
Planning a simple website
• a few elements are common to most (if not all) pages — such as the
navigation menu, and the footer content.
– Note down what you want to have common to every page.
• draw a rough sketch of what you might want the structure of each
page to look like.
– Note what each block is going to be.
• Now, brainstorm all the other (not common to every page) content
you want to have on your website — write a big list down.
• sort all these content items into groups, to give you an idea of what
parts might live together on different pages. This is very similar to a
technique called Card sorting.
• sketch a rough sitemap — have a bubble for each page on your
site, and draw lines to show the typical workflow between pages.
