All required Head information is included in the Basic Templates. We require use of the templates as a starting point for any AAFP web page or application. The following information is provided for reference.

Meta Tags

The website has several required meta tags to help the site fuction best:

<meta name="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

CSS/JS links

There are two separate file locations that you can use: Testing and Production. For testing and development purposes, please use the Testing links. They allow you to preview the middle/device view without having to use a tablet. Our media queries are then switched in the production code so that only devices get this view. Please note that our JQuery files are running in No.Conflict mode. You need to change all of your jquery from $(...) to jQuery(...) in order for it to work successfully with our javascript.


    <link rel="stylesheet" href="http://css.aafp.net/style.css" type="text/css">
    <script type="text/javascript" src="http://js.aafp.org/JavaScriptFinal.js"></script>


    <link rel="stylesheet" href="http://css.aafp.net/test/style.css" type="text/css">
    <script type="text/javascript" src="http://js.aafp.org/test/JavaScriptFinal.js"></script>

Title Tag

The title tag of the page should be formated as follows: {PAGE NAME} -- {SECTION NAME} -- AAFP. Please use the appropriate aafp.org website section in your title tag, when possible. For example, if your product fits under the 'events' section, the title tag would read:

<title>Page Name -- Events -- AAFP</title>


You can link directly to our favicon on aafp.org.

<link rel="shortcut icon" type="image/x-icon" href="http://aafp.org/favicon.ico"/>