Formatting Content With HTML

Remember HTML is a markup language. And that means that it uses tags to identify content on the page. Well once you're comfortable with the syntax behind how formatting content works. Then it really just becomes a matter of learning which tags are available to you and the options that you have when you're using them.

Using Headings

Headings are used to structure pages and determine content hierarchy. So, to add a heading, your going to use a heading tag. And you'll start by using the first heading, which is the h1 heading. You're going to need both an opening and a closing tag. Now there are six heading tags (h1, h2, h3, h4, h5, and h6.)

Formatting Paragraphs

Paragraphs are perhaps the most basic formatting tag that you'll use in HTML. In fact, if you don't wrap text in an element, most browsers are going to default the formatting like a paragraph. HTML has to be backwards compatible, that means they have to support earlier versions of HTML. And they also support really loose syntax rules, for example having unformatted content would cause some languages to simply fail and the whole page to fail. HTML is much more forgiving. It basically says well, you forgot to format it, probably wanted to format it like a paragraph so that's what I am going to do.

Controlling Line Breaks

There will be times when you need to force a hard return in your copy, but you don't necessarily want to start a brand new paragraph, or in the other new element. In those instances, you're going to want to use a line break.

Displaying Special Characters

There are going to be times that you're going to want to use a character or a symbol that's not readily available on your keyboard. What's more, you might want to use a symbol that's actually reserved for use by HTML that you're really not supposed to use. For example, using the left or right angle brackets in your content could actually cause rendering errors. So if you want to use those special characters, you're going to have to use something, that's called a named character entity.

Controlling Whitespace

As you first start authoring HTML you're probably going to notice what seems to be a really curious behavior among browsers regarding your use of whitespace. You see, no matter how much whitespace you put in your content, your browser is going to, for the most part, ignore everything after that first space of character. To add additional whitespace you must use the nonbreaking space entities.

Displaying Images

Now images are considered what we call replaced content. And that means that when they're encountered, the browser or user agent will use the information within that tag to replace its contents with the resource that you've asked for. With that in mind, the attributes of the image tag become incredibly important. The src or source attribute is used to tell the browser where to actually go out and find that image. The alt attribute allows you to pass along descriptive text which is representative of the image, and is very useful for screen readers or other assistive devices. You also have the width and the height attributes. Now these are optional, but they can be used to pass the dimensions of the image to the browser. If you omit them, the browser will still display the image at its native width and height, but there might be some rendering issues. So it's always a good idea to put them in there, unless there's a compelling reason to leave them off.

Heading Example Code

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

Paragraph Example Code

            <p>This is some text in a paragraph.</p>
        

Line Break Example Code

            <p>This text contains<br>a line break.</p>
        

Special Characters Example Code

            <p>I will display € ("And"euro;) </p>
        

Image Example Code

        <img src="images/Example.png" alt="Example Name">