Introduction to HTML [Part 4]
In today’s lesson, you will learn some of the most common HTML elements used for textual markup. This includes paragraphs, headings, and the like.
If you have not already, please read the previous lessons in my Introduction to HTML.
Block and Inline Elements
Block-level elements are those that default to being on their own line, such as paragraphs and headings. Inline elements are those that default to being inline and not affecting page flow, such as tags that denote links and emphasis.
Headings
The first elements we’ll cover today are the six heading elements. Much like different headings in a term paper, these headings often act as titles for different sections in a web page. The tags for the six headings are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. <h1> is the largest, most important heading on the page, and <h6> is the smallest, least important heading on a page. All headings are block-level elements. Here is an example heading:
<h1>My Nifty Website</h1>Paragraphs
Paragraph tags, which are simply written as <p>, are used to mark up paragraphs. Each paragraph gets wrapped in a set of <p> tags, and the browser (or later, CSS) will insert the proper line breaks, because they are block-level elements. Here is an example paragraph:
<p>Now that you’ve got yourself a full-fledged HTML document with information in the head, all you have to do now is fill the body with content! In my next few lessons, we’ll be going over the HTML elements that you’ll need to do that.</p>Emphasis
Two tags in HTML define emphasis. The <em> tag denotes emphasis on its contents. The <strong> tag denotes strong emphasis on its contests. Both <strong> and <em> are inline elements. Here is an example of their use inside a paragraph:
<p>Even though you may <em>think</em> you know everything about HTML, you still have a <strong>long</strong> way to go.</p>Specific Types of Text
Specific types of text can be marked up with their appropriate HTML elements. Below you’ll find a short bit of information about each of them, followed by an example of their use. Unless otherwise noted, they are all inline elements.
<code> tags can be used for computer code. On my site, for example, all the HTML elements that have the monospaced font, grey background, and dashed border are wrapped in <code> tags.
<p>The <code>title</code> attribute is very useful!</p><ins> is for inserted text and <del> is for deleted text. These are especially useful if you need to show document revisions, such as comparing old and new versions of a page.
<p>My favorite kind of ice cream is <del>strawberry</del><ins>rocky road</ins>.</p><sup> and <sub> are for superscript and subscript text. You’ll often find these tags used in technical, mathematical, or scientific web pages.
<p>H<sub>2</sub>O is water. π r<sup>2</sup> is the equation to find the area of a circle.</p><abbr> and <acronym> are used for abbreviations and acronyms. The title attribute should hold the full version of the abbreviation or acronym in its value.
<p>I know that <abbr title="Doctor">Dr.</abbr> Monroe is a member of the <acronym title="American Heart Association">AHA</acronym>.</p><address> is a block level element used for addresses. This is one of the few places is HTML where the <br /> tag will be used to insert a line break. Because addresses must be written on envelopes with line breaks in specific places, it is semantically correct to insert <br /> tags in an address.
<address>Southeast Missouri State University<br />One University Plaza<br />Cape Girardeau, MO 63701</address>Quotations and Citations
If you are in a situation where you would like to quote another source, you’ll find these next few tags handy. It is good karma (and usually the law) to give credit where credit is due, so you may want to pay attention.
If you are quoting a large amount of text, the <blockquote> tag should be used. It is a block-level element that shows you did not originally write the text – it is a direct quote from somewhere else. If you can link to its source, use the cite attribute, with the URL of the source as its value. Here is an example:
<blockquote cite="http://articles.sitepoint.com/article/html-5-snapshot-2009">The reason that opinion is so divided is that HTML 5 is more than just a markup syntax for documents, like HTML 4 is. One clue is in the working group’s original name, before it was brought into the W3C camp: Web Hypertext Application Technology Working Group. The original goal for HTML 5 was to make it easier to develop Web applications. There’s evidence of this in the rash of new JavaScript APIs and support for offline development, some of which are already available in a browser near you.</blockquote>If, instead, you are quoting a small amount of text, you should use the inline <q> tag. It, too, can hold the cite attribute to link to its source. Here is an example:
<p>Even though HTML 5 is not yet a finalized specification, <q cite="http://articles.sitepoint.com/article/html-5-snapshot-2009">we can use HTML 5 elements right now, even though the main browsers are yet to support HTML 5, because CSS allows you to style anything.</q></p>When you are citing a source in your document, you can use the <cite> tag. Its content should be who you are citing, and its title attribute should be where you got the information from. Here is an example:
<p>According to <cite title="The Hitchhiker's Guide to the Galaxy">Douglas Adams</cite>, humans cannot imagine interstellar distances.</p>Conclusion
Now that you know the main text formatting tags, you can finally begin to mark up HTML pages that actually mean something! Content is the meat and potatoes of HTML, so knowing these tags is essential to successful HTML markup.