2. Overview
Today’s lesson will cover the following:
Introduction to HTML
HTML Syntax
HTML Standard
Minimal HTML
Testing for valid HTML
Testing for Accessibility
Publishing
3. Introduction to HTML
HTML, Hypertext Markup Language, is the language we use to create web
documents and applications
HTML is an application of something called SGML (Standard Generalized
Markup Language)
SGML says that a markup language has elements (tags) and attributes,
comments and character references/entities
4. Introduction to HTML
SGML uses a DTD (Document Type Definition) to define a markup language
Elements of HTML are defined as tags that have names, and those tags are
identified by the tag name inside pointy brackets
The DTD also states that any HTML element that can contain text or other
HTML elements denote the boundaries of the content with an opening tag and
a closing tag
5. HTML Syntax
HTML is made up of elements, attributes, and comments
Elements and attributes are always in all lower-case letters
Never use upper-case letters in elements or attributes. This is part of the
HTML5 standard.
6. Elements
HTML consists of a set of pre-defined elements or tags that represent the
structure of your web page
Many of these elements can contain text, which contains the content of your
web page
There are elements you will use for paragraphs, document headers and
footers, articles, sidebars, lists, tables, forms, and many other standard parts
of a document
7. Elements
There are elements you will use for paragraphs, document headers and
footers, articles, sidebars, lists, tables, forms, and many other standard parts
of a document
Elements don't contain styling properties such as colors, backgrounds,
borders, fonts, and layout. These things are configured with CSS (Cascading
Stylesheets), which you'll learn in a different set of tutorials
Most elements have an opening tag and a closing tag. For example, the
paragraph tag <p></p> encloses a paragraph of text and/or other HTML
content. A few elements only have an opening tag such as the line-break tag
<br> which adds a line break or new-line into a document
9. Attributes
Attributes appear inside an element's opening tag
Attributes add extra information to the element
Attributes are generally assigned a value. When using an attribute that has a
value, always place the value in single- or double-quotes
For example,
<a href="https://terminallearning.com">Visit TerminalLearning for more
tutorials</a>
Here the attribute is href
10. Comments
Comments are special bits of code that are ignored by compilors, parsers,
browsers, etc
If you have learned a programming language, you've likely learned how to add
comments to your program code. We do the same thing in HTML, although the
reasons for adding comments and documentation are different
The purpose of a comment in programming languages is to describe WHY
you're doing something, especially when you're commenting a complex piece
of program code or algorithm
We also use comments in HTML to label the different parts of our page
structure or and explain why we're using certain elements/attributes for
certain things
12. The HTML Living Standard
The HTML Living Standard can be found at WHATWG: HTML Living Standard
https://html.spec.whatwg.org/
This document outlines the standard structure of HTML documents, the syntax
for elements and attributes, and describes the intended use for all the HTML
elements and attributes
14. Minimal HTML Document Structure
In order to remain valid, an HTML document must contain a certain set of
elements. These elements are called minimal HTML
All documents must contain minimal HTML or they are not valid, well-formed
documents (more on what valid/well-formed means later)
16. Summary of Minimal HTML
<!doctype html> or <!DOCTYPE html>
The doctype element defines the version of HTML being used.
Doctype tells an HTML validator what version of HTML the page should be validated
against.
The value "html" is used to refer to the current standard version of HTML.
17. Summary of Minimal HTML
<html lang="en">
The html element contains the entire HTML document, the parent element of
all other document elements.
The lang="en" attribute inside the HTML element indicates that the
document's primary language is in English. This tells screen readers what kind
of pronunciation to use when reading the document
The lang attribute can be used in other elements, and helps screen readers
know what accent to apply to the content of the element
18. Summary of Minimal HTML
<head>
The <head> element contains data about the document
The contents of the document head are not visible to the user in the browser
viewport (the area inside the browser window that display's the page contents).
<title>
<title> defines the document's title. This appears in the bookmark list when the
page is bookmarked, in the browser window or browser tab when the page is being
viewed in the browser and a few other places
19. Summary of Minimal HTML
<meta>
The META element defines data about the document data. For example, it can
be used to define the author of the document, a summary description of the
document, and many other things
The META element's content attribute defines the value of the data item
defined with the name attribute
20. Summary of Minimal HTML
<meta charset="utf-8">
A special <meta> element with the charset attribute defines the character
encoding used for the document
<body>
The <body> element contains all the elements and text content that make up the
visible part of the document.
21. Some Common HTML Elements: <h1> tag
The H1 tag is the HTML tag used to create heading on a webpage (i.e., the H1
or heading one)
It contains an opening <h1> tag, the title text, and a closing </h1> tag.
The H1 is usually the most prominent text on a page, allowing visitors to
quickly learn what the page is about.
22. HTML: H1 to H6 Tags
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
24. Some Common HTML Elements: <p> tag
There are several ways to display blocks of text, but the most basic and
common way is to use the <p> or paragraph element. In fact, most of the
blocks of text in these tutorials are in paragraph elements
The <p> element is a block element, so it has a new-line above and below:
the block always starts on a new line and it ends with a newline
26. Some Common HTML Elements: <br> tag
we can use the line break element, which some coders call the "new-line"
element. The <br> element adds a line break or a new-line to the content.
Note that the <br> element does not have a closing tag! You simply type <br>
where you want the line break to go, there is no such thing as </br>
Do not use <br> to create margins between paragraphs; wrap them in <p>
elements and use the CSS margin property to control their size
28. Some Common HTML Elements: <strong>
tag
The <strong> HTML element indicates that its contents have strong
importance, seriousness, or urgency
Browsers typically render the contents in bold type
31. <b> Tag
The B or <b> element is not semantic, so it has no meaning, it simply displays
its content in bold:
32. Differences Between <strong> and <b>
Tags
When a user is using a screen reader to view your page, the screen reader
interprets semantic elements to the user in a different way than non-
semantic elements. In the case of the STRONG element, the screen reader
will add an audial tone of importance or an emphasis to the content, so that
the listening user understands that the content is important. If you use the B
element instead, the screen reader will read the content in the same tone as
all the rest of the text.
33. Some Common HTML Elements: <em>
Tag
The <em> HTML element marks text that has stress emphasis. The <em>
element can be nested, with each level of nesting indicating a greater degree
of emphasis
The <em> (emphasis) element is a semantic element
35. Some Common HTML Elements: <i> Tag
The <i> tag in HTML is used to display the content in italic style
This tag is generally used to display the technical term, phrase, the important
word in a different language
The <i> tag is a container tag that contains the opening tag, content & closing
tag
37. Some Common HTML Elements: <a> Tag
The <a> tag defines a hyperlink, which is used to link from one page to
another
The most important attribute of the <a> element is the href attribute, which
indicates the link's destination
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
39. Overview Of The Lesson
In this lesson, we learned about what is HTML, why it is used, and how to
define some popular HTML elements
In the next lesson, we will learn more about HTML elements and attributes
