This is part 2 in the series of articles covering the basics of HTML. Today we will cover paragraphs and line breaks, simple text alignment, and headings. Let’s get started.
HTML Element Attributes
In Part 1, we learned that HTML markup tags tell the browser how to display the text that is enclosed inside the tag. These markup tags are also called HTML elements. The only reason I mention this is because I don’t want you to be confused by the language when we start talking about element attributes.
An HTML element attribute is simply a setting that’s applied to the element to modify its default behavior. Attributes are always used in name/value pairs and the value should be enclosed within double quotes. You should always use lower case attribute names in your HTML elements.
If you need to modify more than one attribute on an element, you separate each attribute with a single space, like this:
<img src="image.gif" alt="My Image" />
Paragraphs and Line Breaks
Paragraphs help authors divide their thoughts and ideas into sections which highlight a particular point or topic. Each paragraph is separated by a single line of white space.
Unlike a paragraph, a line break does not leave any white space between lines. They allow you to break your text to the next line without leaving a gap between each line of text. Personally, I like using the line break when I make a list of links or want to group things together. You can see the difference in the examples below.
Paragraph
The paragraph tag does not require a closing tag, but it’s a good idea to get in the habit of closing this tag, especially if you are going to use it for aligning text.
Tag: <P>
End Tag Required: No
Examples:
<p>This is paragraph 1...</p>
<p>This is paragraph 2...</p>
Results:
This is paragraph 1…
This is paragraph 2…
Line Break
The line break tag is one of the in-line tags in the HTML specification, which means it does not need a closing tag and does not surround any text. You simply place the <br> tag anywhere you want the text to break to the next line. Although, you should get in the habit of closing this tag to maintain compatibility with XHTML.
Tag: <BR>
End Tag Required: No, but it should be closed like this: <br />
Examples:
This is Line 1...<br />
This is Line 2...<br />
Results:
This is Line 1…
This is Line 2…
Text Alignment
Since we are just getting started with HTML, I’m going to show you a quick and dirty way to align text. This method has been deprecated in favor of CSS stylesheets, but I think it is useful nonetheless. We will revisit text positioning when we discuss the basics of CSS.
Using the Paragraph Tag to Align Text
By default, the paragraph tag aligns text to the left, just as you would expect in any word processor. To modify the default alignment of a body of text, you simply change value of the “align” attribute. Here are the acceptable values for the “align” attribute:
- left - aligns text to the left. (default)
- right - aligns text to the right.
- center - aligns text in the center.
- justify - text is justified to both margins. (think of a newspaper column)
Examples:
<p> or <p align="left">
This text is aligned left
<p align="right">
This text is aligned right
<p align="center">
This text is aligned in the center
<p align="justify">
This text is justified to both margins. You really need a few sentences to properly illustrate the effect of justified text, so I’ll just continue to ramble for a little while so you can see it in action. You’ll notice that the words are spaced so that the text consumes both the right and left margins.
Heading Tags
Heading tags allow you to quickly define the structure and organization of your page. Most browsers display these tags using large bold folds which gradually get smaller to indicate the importance of each respective section. You should use these tags to outline your posts something like this:
- <h1>Page Title or Primary Topic</h1>
- <h2>Main Section 1</h2>
- <h2>Main Section 2</h2>
- <h3>Subsection 1</h3>
- <h3>Subsection 2</h3>
- <h4>Sub-Subsection 1</h4>
- <h4>Sub-Subsection 2</h4>
- <h3>Subsection 3</h3>
- <h2>Main Section 3</h2>
The Heading 1 tag should contain the page title or primary topic and should only be used once per page. Search engines place considerable importance on keywords found in the Heading 1 tag, so make sure you write effective post titles.
At a minimum, you should also use Heading 2 and Heading 3 tags to separate your content into digestible chunks. These tags make your posts scannable and much easier to read. The remaining tags are used much less, but are still valuable if you are writing a large article or a page with lots of content.
Headings
Tags: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>
End Tag Required: Yes
Examples:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Results:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
If you are reading this post on my blog instead of in an RSS reader, you might notice the styles of these heading tags do not necessarily represent an outline format. The reason for this is due to the CSS formatting applied to the heading tags by my WordPress theme. Here are the same heading examples in raw HTML format.
The next part in this series will cover hyperlinks and bookmarks.
Part 1 - Intro and Basic HTML Text Formatting
Part 2 - Paragraphs and Line Breaks, Text Alignment, and Headings
If you enjoyed this post, make sure you subscribe to my RSS feed!