Interneting is Easy!

First, we need some basic HTML. HTML should offer semantic info about your content, not presentational info -- define the structure of the document with HTML, and leave the appearance to CSS. Web pages are made of HTML elements, each element adds different meaning to the text it contains, and elements get nested inside each other. HTML defines what you want to say, then CSS defines how you say it.

Headings

Headings define the outline of your site. There are 6 levels of headings. They are the main way you mark up different sections of content and define the outline of the page as both humans and search engines see it.

Lists

This is how you make an unordered list:

• Add a "ul" element, which stands for an unordered list
• Add each item on the list in its own "li" element
• The things on the list don't need to be in any special order
• NOTE: "ul" elements should only contain "li" elements inside them, so you need to wrap any paragraphs in an "li" tag
• Good candidates for unordered lists are inventories, product features, pro/con lists, and navigational menus

This is what an ordered list looks like:

1. See the "ol" element wrapping everything?
2. But the list item elements, "li" are still the same
3. Also, see how the numbers of the list increase on their own?
4. You should be noticing this precise order, because this is an ordered list
5. Good candidates for ordered lists are recipes, instructions, and tables of contents

Inline Elements and How They Work

Sometimes, you need to draw attention to a certain word or phrase. The "em" tag makes stuff italic.

Other times, you need to strongly emphasize an important word or phrase. The "strong" tag makes things bold.

And sometimes, you need to shout! Nesting a "strong" tag inside an "em" tag makes type that's both italic and bold.

Empty Elements

Thanks for reading! Interneting should be getting easier now.

Regards, The Authors

The hard return after "Regards," in the code above will appear as a line break on the web page. Why? Because HTML condenses consecutive spaces, tabs, or newlines, all known as "whitespace," into a single space.Make a hard line break by inserting the self-closing "br/" tag into your paragraph.

Regards,
The Authors

More Empty Elements

Thanks again, and best wishes!

P.S. This page might look like crap, but that's what CSS is for. A horizontal rule, or thematic break (a long horizontal line between sections of content), is created via the self-closing "hr" tag. A horizontal line carries less significance than the separation created with a new heading element, but more significance than a new paragraph.

The trailing slash "/" seen in a closing tag is optional for all empty HTML elements.