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> or <h3> or etc: Increasingly smaller sub-headings

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

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.

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.

Bold

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

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

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

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>Etc.</li>
• </ul> : Closes the bulleted list

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>Etc.</li>
• </ol> : Closes the bulleted list