Helpful Basic HTML

This article details basic HTML that may help you use your CivicPlus products.

Headings

Headings and subheadings are useful for sectioning off parts of your page and text.

• <h1>: Primary header
• <h2>, <h3>, <h4>, <h5>, or <h6>: Increasingly smaller sub-headings

Ensure that you include the closing </h1> (or </h2>, </h3>, </h4>, </h5>, or </h6>) tag to mark the end of the header/subheader text.

Go to Article Navigation

Paragraph Tags

<p> is a paragraph tag. Use this tag to mark text that should be within one paragraph. Ensure that you include the closing </p> tag to mark the end of the paragraph.

Go to Article Navigation

Break Tags

<br> marks a break in text and starts the text after that tag as being on another line. You do not need to include a closing tag.

Go to Article Navigation

Bold

If you want to bold text, use the <strong> and </strong> opening and closing tags.

Go to Article Navigation

Hyperlink

Example: <a class="Hyperlink" title="Google website" href="http://google.com">Google website</a>

Here are the parts:

• <a: Opening tag
• class="Hyperlink": Tells the system to use the default hyperlink style on the site styles for the link
• title="Google website": Alt-tag for the hyperlink
• href="http://www.google.com": Link address
• >: Make sure you have this after the address, before the displayed text
• Google website: Text you want to display
• </a>: Closes the hyperlink

Go to Article Navigation

Email

Example: <a class="Hyperlink" title="Email Homeland Security" href="mailto:abc@civicplus.com">Homeland Security</a>

Here are the parts you would use, similar to the hyperlink:

• <a: Opening tag
• class="Hyperlink": Tells the system to use the default style from your site styles
• title="Email Homeland Security": Alt-tag for the hyperlink; important for ADA
• href="mailto:abc.civicplus.com": The email address you want to direct to
• >: Make sure you have this after the address, before the displayed text
• Homeland Security: Text you want to display
• </a>: Closes the hyperlink

Go to Article Navigation

Bulleted Lists

If you want to create a bulleted list in any module, use this code around your list.

• <ul>: Opens an unordered (bulleted) list
• <li>First list item</li>: Identifies an item that needs a bullet
• <li>Second list item</li>
• <li>Third list item</li>
• </ul>: Closes the bulleted list

Go to Article Navigation

Numbered/Alphanumeric Lists

If you want to create a numbered or alphanumeric (alphabetical) list in any module, use this code around your list:

• <ol>: Opens a numbered list
  
  Note: The type attribute of the <ol> tag, defines the type of the list item marker.

  • Example: <ol type="1">
  • Types:
    • type="1": Numbers (default)
    • type="A": Uppercase letters
    • type="a": Lowercase letters
    • type="I": Uppercase roman numbers
    • type="i": Lowercase roman numbers
• <li>First list item</li>: Identifies an item that needs a bullet
• <li>Second list item</li>
• <li>Third list item</li>
• </ol>: Closes the bulleted list

Go to Article Navigation