Skip Navigation

Style Guide

Conventions

Because of Search Engines, it is very important that we make our website as accessible and readable as possible to people and computers alike. The following rules will help us make that possible.

Files & Folders

File & Folder Names

File and folder names are made to be read by computers, therefore they must follow certain rules more strictly.

Files & Folder Titles

 File and folder titles are made to be read primarily by people and they can be more flexible.

Browser Titles

The browser title uses the same conventions as the regular titles but in addition we must include the folder path listed by titles and separated by dashes.

Examples of titles, browser titles and a full URL

Title: Tuition & Fees
Browser Title: Tuition & Fees - Admissions - Johns Hopkins Bloomberg School of Public Health
URL: http://www.jhsph.edu/admissions/tuition-and-fees/index.html

Title: Research and Centers
Browser Title: Research and Centers - Epidemiology - Departments - Johns Hopkins Bloomberg School of Public Health
URL: http://www.jhsph.edu/departments/epidemiology/research-and-centers/index.html

Folders and file Names are meant to be read by computers and cannot contain spaces or symbols. Folders and file Titles, in the other hand, are meant to be read by people and they can contain spaces and symbols, however, the content of both must be the same.

Creating and Editing pages

When Creating a New Page...

When Editing a Page...

Always Turn on the Show Blocks feature

This will create boxes around each element which will give you information about them and help you visualize how the page is structured. Moreover, it will help you identify problems with line breaks, paragraph breaks and other issues.

Line Breaks vs Paragraph Break

Although they are visually similar it is important to understand a very essential difference. Paragraph breaks separate entire paragraphs and therefore different thoughts; line breaks, in the other hand, do not separate the paragraph but it simply shifts the text to the next line, therefore, semantically speaking, it is all part of the same thought. Paragraph breaks add extra padding whereas line breaks do not.

The examples below will help you better understand when to use them.

Paragraph break

If you are in the process of applying, keep in mind that your online application also serves as your scholarship application.

All of the materials you submit with your online application are important for the scholarship review process.

Line break

Johns Hopkins
Office of Line Breaks
0000 E. Monument Street
Baltimore, Maryland 21205-2179
Phone: 000-111-2345

 

To create a paragraph break you simply have to hit the Enter (return) key, if you want to create a line break you need to hold the Shift and then press the Enter key.

All links should be created as hyperlinked contextual text and not a linked URL. For example, this is how you would link to the Center for a Livable Future.

Other notes:

Warning!

Do not include any "Title" text, it can be detrimental to visitors using assistive technologies like screen readers.

 Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

Uploading Files

In order to keep our site organized, you must always upload files to the correct folders. In most sections of the site you will find folders named _images, _documents, _pdf; these are used exclusively to host these types of files, e.g. jhsph.edu/admissions contains an _images folder that hosts the images used in the Admissions site.

These folders will be set up within different sections of the site and not every folder, e.g. General Preventive Medicine Residency Program's About folder does not need an _images folder because there is one in the root level (http://www.jhsph.edu/academics/residency-programs/general-preventive-medicine-residency/_images).

Uploading Images While Editing a Page

The best way to make sure your files are added to the correct location is to upload them through the folder and not when editing a page. If, however, you have to upload images while working on the content of a page, be sure to always select the folder where the image will live by using the Save to feature.

Uploading Images

Take a look at our Standard Image Sizes page for a quick reference of what size your images should be.