Best Practices


Keeping these general interface tips in mind will help make your site more accessible.

Horizontal navigation menus
Keep horizontally oriented menus around 4-5 navigation items. Visitors tend to quickly scan left to right, and if there are too many items, they will skip the middle and jump to the end of the list.
Vertical navigation menus
Keep vertically oriented navigation menus limited to 5-7 items, otherwise, the middle items will be missed. The only exception to this is when the navigation items have a clearly stated sequential relationship (e.g., 1, 2, 3, or alphabetical); sequential vertical menus can effectively be as long as needed.

Managing Content

WordPress is a great website manager, but there are better tools for hosting media files. The exception are image files.

Only upload image files
Keep your website light by only uploading images, and use better tools for other file formats.
Use CyBox to host PDFs
CyBox allows you to share PDFs publicly, upload new versions, track revisions, set permissions, and never have to change a link to the file.

When creating links to files in CyBox, it is best to use the Direct Link for the href attribute and to use the exact filename as hosted in CyBox for the title attribute, e.g., <a href='' title='NROTC-APPLICANT-FITNESS-ASSESSMENT'>NROTC Applicant Fitness Assessment</a>

If needed, this should make locating the original document in CyBox much easier.


Markdown makes it easier to create HTML by writing in plaintext. Markdown Cheatsheet

# for Headings
1 hash (#) = Heading 1, 2 hash (##) = Heading 2, etc.
* for Emphasis and Strong
1 * = Emphasis, 2 ** = Strong
- and new lines for Lists
Just add a - at the beginning of each line you want in the list
[Link Text](link-url) for Links
Put the text [you want to link] inside of brackets, and immediately follow it with the URL in parentheses.


These rules will keep the page portable, maintainable, and flexible to a variety of browsing interfaces and devices.

Avoid inline style code, e.g., <p style='color:#c00'>
Inline style code decreases the portability of your code, and makes it very difficult to view on different devices and browsers
Use <section> and <h1>
And nest <section> and <h1> instead of <h2> and <h3>
Use <figure>
If you want to link to the same "thing" using both text and an image, use the <figure> element to contain the <a> that contains the <img> and a <figcaption> for the text.
Avoid <br /> and &nbsp;
Avoiding hard-coded line-breaks and non-breaking spaces will make your code more portable.
Avoid <div>
HTML5 has semantic elements for pretty much everything now, so there are few good uses for a generic container element.