HTML8 Formatting

HTML Formatting

In this chapter we will learn how to use formatting tags to alter our outputs.

Example Below:

<p><b>Here’s a bold paragraph</b></p>
<p><i>Here’s an italic paragraph</i></p>
<p>Here’s a <sub>subscript<sub><p>
<p>Here’s a <sup>superscript<sup><p>

We are using the following formatting tags <b> <i> <sub> and <sup> to alter the paragraphs above.

You’ll notice that the formatting tags are nested within the </p> tags; we discussed nested elements in Chapter 4: Elements

For a complete list of formatting tags, see HTML Reference: Tags

HTML7 Paragraphs

HTML Paragraphs

In the previous chapters, we’ve already encountered the paragraph tag so we know the <p> tag defines a paragraph.

Example Below:

<p>Here’s a paragraph</p>

<p>Another paragraph</p>

<p>Yet  another paragraph</p>

*Note* Browsers will automatically add an empty line before and after a paragraph.

*Tip* Always remember to use a close tag.  Even if you forget the close tag, some browsers will still display your html.  However, HTML 5 and XHTML will not stand for this.  Also, forgetting the close tag will sometimes generate weird results and errors…then you’ll have to scour your code and find out where that error is…who wants to go through that hassle?

HTML Line Breaks

In HTML you can’t just add extra lines and spaces and expect them to show up like that in a browser.

Example Below:

                Example 1:

<p>Super Duper COOPER!</p>

Example 2:

                <p>super    duper    COOPER!</p>

                Example 3:

<p>

Super

Duper

COOPER!

</p>

The three examples above will produce the same results:   Super Duper COOPER!

In order to add extra spaces we must use the &nbsp entity (we will discuss entities in a later chapter).  1 &nbsp= 1 space.

                Example 2 (rewritten with &nbsp):

                <p>Super &nbsp&nbsp&nbsp&nbsp Duper &nbsp&nbsp&nbsp&nbsp COOPER!</p>

In order to add extra lines we must use the <br/> tag.  1 <br/>= 1 line.

                Example 3 (rewritten with <br/> ):

<p>

Super<br/>Duper

               

<br/><br/>

COOPER!

</p>

*Note* As you can see from the example above I put the <br/> tag directly after the word “Super” and I also put 2 below the word “Duper”, either way is fine as long as it comes after the word(s) you want to break.

Quick quiz:

<br/> is an example of a(n) ________ element?

A)      Body

B)      Block

C)      Chemical

D)     Empty

Highlight the entire sentence below to find out the answer.

The correct answer is:  D) Empty

HTML6 Headings

HTML Headings

Headings are defined with the <h1> to <h6> tags.

The difference between heading tags is that <h1> is the largest heading, therefore, the most important heading, and <h6> is the smallest, therefore, the least important heading.  The other headings (<h2> <h3> <h4> <h5>) are somewhere in between.

Example below:

<h1>Here’s a heading</h1>

<h2>Here’s a heading</h2>

<h3>Here’s a heading</h3>

*Tip* Don’t use the heading tags to make your text font bigger or bold; there are tags for that specific purpose.  Search engines will analyze the structure and content of your site by the heading tags.

HTML Lines

The <hr /> tag creates a horizontal line.  This can become handy for separating content.

Example below:

<p>Here’s a paragraph</p>

<hr />

<p>Here’s a paragraph</p><hr />

HTML Comments

Comments are useful for describing what a particular block of code means/does (you may forget, especially if you run multiple sites).

 All comments are ignored by the browser and are not displayed; much like tags aren’t displayed.

Example below:

<!-- I’m just typing out a comment -->

HTML Source

A great way to learn is by viewing the source code of other people’s websites.  If you come across a particularly awesome website all you have to do is right click on it and select view page source, or click on the view source button on your browser’s menu, and you will be able to see the HTML code for that specific page.

When I was learning HTML I copied and pasted other websites into my own html file and edited bits and pieces to see what it would do.