The VERY Basic HTML Structure – The Body Section – CONTENT & Basic HTML Tags!!
February 24, 2011
Now that we’ve taken a look at the boring, but very necessary, basic structural parts, we’re getting to some basic HTML tags that actually help define and display our content. I’ve mentioned (cascading) stylesheets (CSS) earlier – those are used to position and format our page. The HTML presents the content in a logical manner. Let’s ignore CSS and all it can do for now, while we’re looking at some of the basic, frequently used HTML tags.
The Header Tags
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> |
Header tags are used to format headers. They are numbered, with the h1 tag for the most important header (or title) on your page (often the site name), the h2 tag the second most important header/title, and so on. Think header(s) and sub-header(s).
This page shows header tags 1 to 6, as they appear without any formatting applied: HTML Header Tags.
The Paragraph Tag
<p></p> |
The paragraph tag is for just what it says: paragraphs. They belong around individual paragraphs of text and define those and the space around/ between them. Here are a couple properly coded paragraphs as they appear, only formatted and styled by the browser defaults. The Paragraph Tag
List Tags
Lists are often misunderstood, but the list tag – and html has an ordered and an unordered one – is useful for all kinds of stuff. Aside from your basic numbered (ordered list = ol), bullet (unordered list = ul) there is your navigation which is actually an unordered list, that can be displayed horizontally or vertically – but that is part of what CSS can do, and that is a different lesson.
The Ordered List
<ol> <li></li> <li></li> </ol> |
The Unordered List
<ul> <li></li> <li></li> </ul> |
And this is what this looks like: Ordered and Unordered Lists.
There is one more aspect to lists, and they can be used by either ordered or unordered ones, and those are lists with subcategories. The code to an unordered list with 2 levels looks like this:
<ul> <li> <ul> <li></li> </ul> </li> </ul> |
And on a website, this presents itself Like This
These are probably the most useful and most frequently used html tags to get you started – more later. But next, we’ll do some linking!!
