1. HTML
Formatting Text

2. Headers and Paragraphs
Block Level Elements

3. Word Document Headings
When creating a report you use headings to convey hierarchy in your document.
The title is Heading 1 and it is the largest to show importance
The successive headings decrease in size as you go down the hierarchy

4. Word Headings example
We can think of website headings just like word documents
Heading 1 (Document Title)
Heading 2 (Subtitle)
Heading 3 (Sub-Sub Title)
Heading 4 (Sub-Sub-Sub Title)
Heading 5 (Sub-Sub-Sub-Sub Title)
Heading 5 (Sub-Sub-Sub-Sub Title)
Heading 4 (Sub-Sub-Sub Title)

5. <h1>Website Title</h1>
Website Headings
In websites we use the same hierarchy as we do in word documents
There are six levels of headers, h1 through h6
The text size gets smaller as the headers increase in number
Header tags look as follows:
Typically the opening and closing tags are on the same line since the contents are relatively small
<h1>Website Title</h1>

6. Website Headings h1 (Website Title) h2 (Subtitle) h3 (Sub-Sub Title)
h4 (Sub-Sub-Sub Title)
h5 (Sub-Sub-Sub-Sub Title)
h5 (Sub-Sub-Sub-Sub Title)
h4 (Sub-Sub-Sub Title)

7. Website Headings in Code
Focusing on just the headings and not the text in-between

8. Paragraph Tag
Sections of text will be split up into paragraphs to make easy reading. This is the same as when you’re reading a newspaper or a novel.
paragraph
paragraph

9. Paragraph Tag Paragraphs are created using p tags
Put the paragraph text inside the opening <p> and closing </p> tags

10. Block Level Elements
Notice that the tags (elements) so far all create new lines when they are introduced in the page.
You don’t see a Header and a paragraph horizontally next to each other.
These are called block level elements because they are put on their own lines.
Block
new line before and after blocks

11. Break Lines and Horizontal Rules
New Lines
Break Lines and Horizontal Rules

12. Self Enclosing Tags
You will notice that both the break line and horizontal rules have one tag that comprises both the beginning and end tag.
e.g. <br> and <hr>

13. Break Line
To add a new line in your document use a break line <br>
In older versions of html you needed to make this a self enclosing tag by <br /> but this is no longer necessary with the new standards
New Line

14. Break Line
and it looks like…
Notice the Line Break

15. Horizontal Rules
Helps you break up sections of your document by adding a horizontal line
Will make a line between these sections

16. Horizontal Rule
And it looks like…
<hr>

17. White Space
Notice that even if we put new lines and spaces in our code it doesn’t appear in the website.
There will only be one space here
No new line

18. White Space Browsers ignore extra whitespace or new lines.
The reason we put them in is just for readability for the website developer

19. More text tags

20. The Strong Tag
Strong tags are used to indicate that a set of characters are important.
It could be just a letter or a few words that are important
Strong text could be styled in numerous ways, by default it is bold

21. The Emphasis Tag
You can think of the emphasis tag grammatically. If you were to speak this sentence, which word would you give emphasis too? Emphasizing certain words will change the meaning of a sentence.
Read this sentence giving emphasis accordingly:
I wonder how old Janet is.
I <em>wonder</em> how old Janet is.
I wonder how <em>old</em> Janet is.
I wonder how old <em>Janet</em> is.

22. The Emphasis Tag
By default the emphasis tag makes text italic, but it can be styled in any way.