[an error occurred while processing this directive]
Go to Bottom Nav - April 21, 2018 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

Text is very important on web pages. While there is broad use of graphics and Flash on the web, text remains the champ for conveying information. Formatting the text on your web page can make your information easier and more pleasing to read. Some basic HTML tags are explained below with tags "exposed" for view*.

These basic formatting tags set the structure for your web page. The initial appearance when using these tags is determined by the browser's default cascading style sheet and/or any special style choices chosen by the user in the browser preferences. After you have created a logical page structure, you will be styling the page contents to suit your own taste.

* Note that many of the elements are effected by my CSS definitions. To more accurately see how these elements look by default, turn off styles either in the view menu of your browser or using the CSS menu of the Web Developer Toolbar installed on FIrefox.

Block Level Elements

Block elements as so called because they take up a block of space to themselves in the flow of the document. That is, unless otherwise instructed, the block level element is vertically separated from the element above and below, and the horizontal space the element uses stretches the width of its containing element.

Headings

Organize your information with headings, they form the basis of the outline of information on your web page. The level one heading (h1) is the most important heading on the page and its default visual rendering is the biggest. h2 headings are sub-headings of h1 headings, h3 headings are sub-headings of h2 headings, and so on. Remember creating an outline before writing an English composition? Headings are the main points of the outline.

Here is what they look like (with tags revealed).

<h1>heading1</h1>

<h2>heading2</h2>

<h3>heading3</h3>

<h4>heading4</h4>

<h5>heading5</h5>
<h6>heading6</h6>

Notice that they run 1-6, bigger to smaller and by default, the heading text aligns left. The heading text can be styled to align center and right as well.

Paragraphs

<p></p>

<p>Paragraphs can be used to hold information between the headings. A paragraph will "wrap" with the browser window width, just as text would in a page layout application. Depending on page language (some languages read from right to left), paragraphs usually align to the left side of their container. Also note that I've used some trickery to show where the paragraph tags are placed for illustration purposes in this section.</p>

<p>Notice that each paragraph is vertically separated from the other by an empty line, this is produced by the default browser styling.</p>

<p>What if I don't want this line of separation?<br>
The break tag (<br>) will give a line break with no separating empty line.<br>
You may have<br>
lines as<br>
short as<br>
you<br>
like<br>
!<br>
Very handy for addresses and the like.</p>

The break tag, while used with the paragraph tag, is not a block level element in that is does not demand its own block of space. Rather, it is an inline level element which only produces a line break. The break tag is also known as a void element since it has no closing version of the tag. xHTML requires void elements to be self closing, so the break tag would look like <br /> with a space-forward slash after the tag name to indicate the tag has closed.

Horizontal Rules

<hr>

Horizontal rules make nice separators between sections. Here is horizontal rule with no attributes (<hr>).


Horizontal rules are block level elements and they also qualify as void elements. Their width, positioning, thickness, and other visual styling is controlled with CSS.

Divs

<div></div>

Div (or logical division) tags are used as containers to group the other block level elements so they can be styled and formatted en masse. The opening div tag (<div>) starts before the group of elements you want to contain and ends (</div>) after. A div tag with local styling is used to give a differing background color for these paragraphs and heading on divs.

Divs themselves, have no innate styling or context assigned, unlike the other block level elements. With div tags revealed, this and the next paragraph are styled with white text and a black background.

Divs are usually differentiated by using a class or id attribute in the opening div tag to give your style sheet a "hook" to hang the style, you may also use the style attribute locally within the tag. You will find very handy the further we delve into styles and style sheets.

Divs are a the mainstay tag for xHTML page layout and will remain useful in to the future even with the introduction of more contextually rich tags in HTML5.

HTML5 Structural Semantic Elements

Previous versions of HTML had two general types of HTML elements, block and inline. HTML5 introduces more types of elements as well as new tags that are more semantically rich.

Past Formatting Practices

Formatting in the past was concerned with appearance with little concern about the context of the information. Tables were used for layout formatting in HTML which was not very satisfactory for visually disabled visitors. As the specification advanced, div tags became the method of choice for layout as the information could be grouped inside the div and then styled to taste using CSS.

HTML5 Introduces Structural Semantic Elements

Pre-HTML5 practice involved dividing your page info into separate div tags and identifying them with varying ids or classes. Commonly, there are header divs, footer divs, content divs, and so on. HTML5 introduces specific tags for these page elements so they have a richer semantical context. Div tags are still useful as all-around containers in HTML5; when practical, use these semantically rich tags instead.

<section></section>
Section tags are used to group together related information and represent a section of your document.
<article></article>
Article tags are used to group together related information that could stand alone. The article is similar to the section, the article is self contained enough to be pulled from your page for syndication.
<header></header>
Header tags hold (typically) masthead headings and header information for the body, section, article, and other "sectioning" elements. If a section or article do not have a header section, the the first h1 tag becomes the header. These headers and heading tags form the outline of your document which becomes important in HTML5.
<nav></nav>
Nav tags are used to contain the main navigation links on a page. Although a nav section could be inside of articles or sections, it is usually reserved for main navigation.
<aside></aside>
Aside tags surround information tangentially related to the section or article information in which it resides. Asides are good candidates for pull-quotes or advertising in an article or section. At the top level of a document, the aside is often used for a sidebar column.
<footer></footer>
Footer tags surround footer information for the document, sections, and/or articles in the page. The document footer typically contains copyright information and "housekeeping" links (about this site, contact, home, and so on). Within sections and articles, footers can also contain related links and pertinent metadata.

Related Links for HTML5 Structural Semantic Elements

Inline Formatting Elements

Inline formatting elements reside in the regular stream or flow of text without forcing a break like a block level element. Below are some examples of inline formatting elements.

Phrase Elements

Phrase element tags assign a structural meaning to the enclosed text. Your browser may or may not choose to render the text differently from the surrounding text; text readers and search engines can interpret the structural meaning. I've listed a few below, check your textbook or other resource for more.

  • Abbreviation: Add two <abbr title="ounces">oz.</abbr> of chocolate chips to the batter.
    Note that the "title" attribute is shown when the user's mouse hovers over the abbreviation. Text readers will also read the value of the title attribute aloud rather than stumble over the abbreviation
  • Acronym: Use <acronym title="Contrast Alignment Repetition Proximity">CARP</acronym> for better design.
  • Emphasis: The test was <em>very</em> hard!
    Your browser will most likely render "very" in italics; a text reader will change sonic inflection as it reads the page.
  • Strong Emphasis: The test was <strong>really</strong> hard!
    Most browsers render strong emphasis in bold; text readers speak it with vigor!

You may use your style sheet definitions to define the exact look you want from each of the phrase elements.

Font Styles

Font styles allow your to make text bold, italic, underlined, strike through, big, small, or teletype text.

Font styles, however, only affect the visual styling of the enclosed text and do not assign any contextual meaning. Text readers read through them like normal text. Font styles are deprecated in HTML 4.0.1 onwards, avoid their use. Phrase elements or a CSS definitions are used to replace font styles.

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu