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.
File and folder names are made to be read by computers, therefore they must follow certain rules more strictly.
- Do not 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 not 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 ( - ).
- Do not use Uppercase characters.
Use only lowercase characters, even if you are writing an acronym or name.
- Always 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 same 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.
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.
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
Title: Research and Centers
Browser Title: Research and Centers - Epidemiology - Departments - Johns Hopkins Bloomberg School of Public Health
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.
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.
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.
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.
Office of Line Breaks
0000 E. Monument Street
Baltimore, Maryland 21205-2179
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.
- 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.
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).
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.