ITS Help Desk

ITS Help Desk | ITS Home

Simple Web Page Markup

The purpose of this page is to provide a few simple formatting rules for placing information on a web page. The focus is on actual html, what one sees in "source view" or if looking at an html page in a simple text editor like Notepad. First, a bit of background.

Linfield's web site utilizes style sheets to format content. Most web pages connect to three style sheets, external text files that establish rules for how information is displayed. One style sheet is global, covering rules the whole site uses, one is local, covering rules unique to a department, one is print, which covers how the page looks when it is printed out. It is possible to locally "mark up" a web page to change text color, size, page backgrounds, etc but we discourage doing this. For people using Dreamweaver or web based page editors, the focus should be on what is called "semantic markup". What this means is paragraphs are indented paragraphs, headings top sections of content, lists of items are marked up as lists. Here's how to do this:

Look at the source code. Put away the wysiwyg editor. When working in raw html, text is marked up with "tags". The tags are contained within "<>" symbols like "<p> or <li>. Most tags have an opening and a closing tag, the closing tag defined by a backslash and appearing at the end of the marked up section. A paragraph would open with "<p>" and right at the end of the paragraph, you would place a "</p>". Here's a short table of the most commonly used tags and their purposes.

Tag Name Purpose Example

Block level tags

These define blocks of content that begin and end with line breaks. They cannot "nest". That is, you cannot have a paragraph inside a heading and vice versa.

Headings 1-6 (1 being largest) Title of page or page section. They should always appear in descending size so an <h4> would appear below an <h3> to title a subsection of content. <h1>Your heading content</h1>
Paragraphs Mark up a paragraph of text. Should not be used for creating space on a page <p>Paragraph of content.</p>
Lists (unordered) Creates a bulleted list of items <ul>
<li>First list item</li>
<li>Second list item</li>
</ul>

Inline tags

These tags occur inside blocks of content and are generally used to highlight words or sentences.

Line Breaks Force a line break in page content. This does not have a closing tag. End of line. <br />
New line.
Italics Emphasizes text <em>Italics here</em>
Bold Text Makes text bold <strong>Bold text here</strong> or <b>Bold text here</b>

Common Display Problems

"They're More Like Guidelines"