HTML Formatting Text

Headers and Paragraphs Block Level Elements

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

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)

<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>

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)

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

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

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

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

Break Lines and Horizontal Rules New Lines Break Lines and Horizontal Rules

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>

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

Break Line and it looks like… Notice the Line Break

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

Horizontal Rule And it looks like… <hr>

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

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

More text tags

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

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.

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