Visit our FaceBook Page

Headings & Paragraphs

Assuming by this point you have read "Creating your first web page (Basics of HTML documents)", or otherwise understand the basics of HTML documents, we will now talk a bit about web semantics.

Before, we talked about how HTML is a "tag based" form of programming. The rest your HTML content will follow suit. There is a fair handful to know regarding this, but for now we will keep it simple and start with headings, paragraphs and some basic text formatting.

Headings

Headings are used to assign a document hierarchy of sorts within your web page. There are six levels of heading tags and should be used in order of importance. For example, if your page is about say "Money" than something in the order of "This page is about money" should be your top level header or Heading 1. If you went on to talk about things like denominations or types, a second level header maybe something like "Paper denominations" and/or "Coin denominations". Correct formatting for Heading Tags is done by encapsulating your header in tags as shown in the code example below and should always include their rank.

Paragraphs

In most cases, paragraph tags located below heading tags indicate that the content within are connected to their preceding headers. Paragraph tags may include more than one sentance, images and some other tags as well.

Code Example:

%3CHTML%3E%0D%0A++++%3Chead%3E%0D%0A++++%3C%2Fhead%3E%0D%0A++++%3Cbody%3E%0D%0A++++++++%3Ch1%3EThis+page+is+about+money%3C%2Fh1%3E%0D%0A++++++++%3Ch2%3EPaper+denominations%3C%2Fh2%3E%0D%0A++++++++%3Cp%3EInformation+about+paper+denominations+would+go+here.%3C%2Fp%3E%0D%0A++++++++%3Ch2%3ECoin+denominations%3C%2Fh2%3E%0D%0A++++++++%3Cp%3EInformation+about+coin+denominations+would+go+here.%3C%2Fp%3E%0D%0A++++%3C%2Fbody%3E%0D%0A%3C%2FHTML%3E

Now go ahead and type the above code into an HTML file using your code editor and save it. Then open it up using your favorite web browser and take note of the output.  You should notice that there are differences in the way the text is rendered.  You Heading 1 content should be the largest, and the Heading 2 slightly smaller, both in bold.  This continues right down the line all the way to Heading 6. Your Paragraph content should have a normal looking font size and should not be bold.  The styling of these elements lends itself to the general order of hierarchy of your web pages content and should be used as search engines pay a fair amount of attention to it as do accessibility programs.

The reason for this visual styling is in the way browsers render HTML. It determines some basic rules for how each tag is displayed.  This can be changed and over written using font styling techniques such as CSS (Cascading Style Sheets) or with in-line styling but that is for a later time. There are a few other things regarding basic HTML that I want to explain first.

next - understanding HMTL lists

Reader Comments


loading...