HTML 5
HTML 5
Headings Quotations
Paragraphs Comments
Styles Colors
Formatting CSS
Headings Are Important
HTML Headings Search engines use the headings
to index the structure and content
of your web pages.
Users skim your pages by its
headings. It is important to use
headings to show the document
structure.
<h1> headings should be used for
main headings, followed by <h2>
headings, then the less important
<h3>, and so on.
Each HTML heading has a default size. However, you can
specify the size for any heading with the style attribute,
using the CSS font-size property:
HTML Horizontal Rules
The <hr> tag defines a thematic
break in an HTML page, and is
most often displayed as a
horizontal rule.
The <hr> element is used to
separate content (or define a
change) in an HTML page:
The HTML <head> Element
The HTML <head> element has nothing
to do with HTML headings.
The <head> element is a container for
metadata. HTML metadata is data
about the HTML document. Metadata
is not displayed.
The <head> element is placed
between the <html> tag and the
<body> tag:
View HTML Source Code:
Right-click in an HTML page
and select "View Page Source"
(in Chrome) or "View Source"
(in IE), or similar in other
browsers. This will open a
window containing the HTML
source code of the page.
Inspect an HTML Element:
Right-click on an element (or a blank area),
and choose "Inspect" or "Inspect Element" to
see what elements are made up of (you will
see both the HTML and the CSS). You can
also edit the HTML or CSS on-the-fly in the
Elements or Styles panel that opens.
HTML Tag Reference
https://www.w3schools.com/tags/default.asp
HTML Paragraphs
The HTML <p> element defines a paragraph:
HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will
create different results.
With HTML, you cannot change the output by
adding extra spaces or extra lines in your HTML
code.
The browser will remove any extra spaces and
extra lines when the page is displayed:
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without
starting a new paragraph:
The <br> tag is an empty tag, which means that it
has no end tag.
The HTML <pre> Element
The HTML <pre> element
defines preformatted text.
The text inside a <pre>
element is displayed in a
fixed-width font (usually
Courier), and it preserves
both spaces and line breaks:
HTML Styles
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The property is a CSS property. The value is a CSS value.
HTML Background Color
The background-color property defines the background color for an HTML element.
HTML Text Color
The color property defines the text color for an HTML element:
HTML Fonts
The font-family property defines the font to be used for an
HTML element:
HTML Text
Alignment
The text-align property defines the
horizontal text alignment for an
HTML Text Size HTML element:
The font-size property defines the text size for an HTML element:
HTML Text Formatting
HTML Formatting Elements
HTML also defines special elements for
defining text with a special meaning.
HTML uses elements like <b> and <i>
for formatting output, like bold or italic
text.
Formatting elements were designed
to display special types of text:
HTML Quotation and Citation Elements
HTML <q> & <blockquote> for Quotations
HTML Quotation and Citation Elements
HTML Comment Tags
HTML Colors
HTML colors are specified using predefined color names,
or RGB, HEX, HSL, RGBA, HSLA values.
https://www.w3schools.com/colors/colors_names.asp
Background Color
Text Color
Border Color
Color Values
In HTML, colors can also be specified using RGB values,
HEX values, HSL values, RGBA values, and HSLA values:
Color Names Supported by All Browsers
https://www.w3schools.com/colors/colors_hex.asp
Chapter Summary
• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment
