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.

• Do n​ot use strange abbreviations.
  e.g. Sections such as External Affairs should not be named "extaff". Instead you should use the full title of your page or section.
• Do n​ot use acronyms.
  In most cases, a full name will have more value than an acronym when it comes to search engines.
  e.g. student-outreach-resource-center is better than source.
• Do not use spaces or underscores ( _ ).
  Spaces within URLs are replaced with %20; and result in difficult to read strings (e.g. johns%20hopkins%20bloomberg%20school%20of%20public%20health). Instead of using spaces or underscores to separate words, use a hyphen ( - ).
  e.g. johns-hopkins-bloomberg-school-of-public-health
• Do n​ot use Uppercase characters.
  Use only lowercase characters, even if you are writing an acronym or name.
• Alw​ays add the file extension to pages.
  It is very important that pages end in .html as this can cause trouble with certain older systems.
• The name of the file must be the sam​e as the title of the page.
  This will help visitors find your site more easily when searching on Google or any other search engine.
• Landing pages must be named index.html.
  If the page you are creating is meant to be the landing page of a folder, then it must be named index.html.
• Every section represented as a folder must have an index page.
  If your folder contains accessible HTML pages, then it must also contain an index.html page. This will help us avoid broken paths. The only exception are very special cases and folders that contain only images or documents for download.

Files & Folder Titles

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

• Do not use strange abbreviations. Sections such as External Affairs should not be named "extaff". Instead you should use the full title of your page.
• Do not use acronyms. In most cases, a full name will have more value than an acronym when it comes to search engines. If needed, you can add an Acronym at the end of the title in Parenthesis
• Unlike the file names, you can use spaces and capital letters.
• Use only the title of the page.

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.

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...

• Is the page meant to be the primary page (landing page) of that folder? If so it must be named index.html.
• Be sure to follow the naming convetions listed above and to always include a Title and Browser Title.
• Always have a Heading 1. This will not only keep our site consistent but it is essential for SEO as it is the most important elements in the 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.

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.

Adding Links

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:

• Do not use generic text like "click here" or link a URL
• Do not link any <h1> or <h2> level headlines, avoid linking <h3> headers not found in callouts.
• Only check the "Open link in a new window" option when linking outside of www.jhsph.edu, and when you do, be sure to check "Display Toolbar" and leave the "Width" and "Height" options blank.

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.

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