Site Hierarchy

• Home Page
• Top-Level Pages:
  
  Navigation: Is in the main navigation or utility navigation
  Breadcrumbs: Has the home page as parent 
  Hero: Uses "Secondary" option 
   
• Second-Level Pages
  
  Navigation: Appears in dropdown navigation
  Breadcrumbs: Has the corresponding top-level page as parent 
  Hero: Uses "Secondary" option 
   
• Lower-Level Pages
  
  Navigation: Does not appear in the navigation. Is linked from other pages. 
  Breadcrumbs: Has one higher-level page as parent 
  Hero: Uses "Secondary" option 
   
• Orphan Landing Pages
  
  Navigation: Does not appear in main navigation or utility navigation
  Breadcrumbs: Has the home page as parent 
  Hero: Uses "Secondary" or "Tertiary" option, depending on prominence of the campaign. 
   
• Minor Orphan Pages
  
  Navigation: Does not appear in main navigation or utility navigation, but is associated with a parent page
  Breadcrumbs: References the parent page
  Hero: Uses "Secondary" option 
   
• Resource Wrappers
   
• Press Releases/Updates
   

Typical Page Hierarchy

• Title
• Description
• Featured Image
• Hero Block
• Main Content Area
• Last Updated Date

Title Hierarchy

• Main Title/Header (H1)
• Sub TItles (H2)
• Headers (H4)
• Sub Headers (H5)
• Short Titles (for Breadcrumbs and Featured Extracts)
• Slug: 

Page slugs

• Match to the page title as closely as possible. For example: 
  
  Page Title: Global Tobacco Control
  Slug: global-tobacco-control
   
• You may remove filler words. Separate the words with dashes. 
  
  Page Title: Tobacco Advertising, Promotion and Sponsorship
  Slug: tobacco-advertising-promotions-sponsorship
   
• For press releases, append the date (yyyy_mm_dd_) followed by the press release title. You may shorten the slug as needed for readability and scannability: 
  
  Page Title: Côte d’Ivoire Unveils Plain Packaging for Tobacco Products, Becoming Africa's Second Country to Implement Life-Saving Measure
  Slug: 2026_08_03_côte-divoire-unveils-plain-packaging-for-tobacco
   
• Notable exceptions to matching the TITLE to the slug: 
  
  Location pages: 
  
  Page Title: Toll of Tobacco in the United States
  Slug: United States
  
   

Navigation Items

• Match the navigation label to the page title. 
• When necessary, use a shorter, more descriptive version of the title as the navigation label, but do this sparingly. 
• Use title case for navigation items. 

Breadcrumbs

• Pages that are listed in the main navigation need a breadcrumb trail that's consistent with their position on the navigation schema. 
• Lower-level pages that are not part of the main navigation but are directly tied to parent pages on the navigation dropdown need breadcrumbs. (E.g., the Toll of Tobacco in Arizona page: Home > The Tobacco Problem > United States > Arkansas)
• Orphan pages that are regular features need a breadcrumb trail lnked to the Home page. (E.g., the State Report has "HOME > Broken Promises to Our Children")
• When possible, use the short version of the page title for the breadcrumbs (E.g., instead of "The Toll of Tobacco in the United States," use "United States")

Taxonomy (Categories and Related Pages)

• Policy Solutions
• Products/Problems
• Location
• Resource Types

Footnotes

Footnotes on web pages are generally considered good practice for dense, academic, or data-heavy content, but can disrupt readability for casual browsing. For better user-experience, structure the page to avoid superscripted footnotes. Consider: 

• General end-note at the bottom of the text with the sources. 
• Replace traditional bottom-of-the-page jumps with in-line references
• Develop interactive elements or hover tooltips or in-text expandable accordions. 

Source: Google Developer Documentation: Footnotes

Trademarks

• As of July 2026, we have not been applying registration marks®, trademarks (TM) or service marks(SM) after references to the organization's intellectual property. 
• This may change if the Web team receives updated legal guidance.
• Do not use the <sup> tag to superscript if needed . Use the following code to SUPERSCRIPT Registration marks, trademarks and service marks. [Note: We'll have to extend the CSS to include superscripting]

H1

• Used for the page Title. 
• The text should closely match the <TITLE>
• Only 1 per page

H2-H4

• Reserved in the templates for various visual/infographic elements (E.g., statistics tables, etc)

H5-H6

• Standard sub headers

Header Best Practices

• Avoid generic headers when possible (E.g., "Overview," "Introduction," etc.) SEO/IA crawlers prefer more context. Users probably do too. 
• Some standard generic headers are okay for use on the template level or for general collections of items that are repeated elsewhere on other pages (E.g., "Related Resources," "Related Fact Sheets") 
• Avoid skipping header levels
• Avoid bolding, italicizing or using ALL CAPS on text as a substitute for headers (It's confusing to SEO and AI crawlbots)
• Use Title Case 
• In some instances on the template level, the design may call for ALL CAPS. 

Length

• Keep paragraphs short (2-5 sentences, if possible) and work with stakeholders to break up huge chunks of gray text.
• Use headers to encourage scannability and to display information architecture of the page. 

Tables

• Use the standard TABLE style used in the Toll of Tobacco in the United States page

Pull quotes

• Keep them short

Unordered and Ordered Lists

A simple bullet list should be written in sentence case, with no punctuation 

• This is item 1
• This is item 2
• This is item 3

Alternatively, we can have bullets that behave like sentences:   

• Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
• Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, 
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris and
• Aliquip ex ea commodo consequat. 

Don't mix bullet styles. 

Use Descriptive Language

Instead of "Click here" or "Learn more" in body text. Consider hyperlinks that are packed with key-words:

• "The FDA's e-cigarette report is posted online."
• "The CDC reports that youth smoking rates have decreased."

Links should describe destination. 

Never use naked URLs unless describing a Web site or promoting a short-URL

• Visit TakeDownTobacco.org
• TobaccoFreeKids.org/StateReport

Punctuation 

Leave terminal punctuation, terminal commas, initial and terminal em-dashes outside of the hyperlink. E.g., 

• The quick brown fox jumped over the lazy dog. 
• The grocery list included apples, oranges and sodas, they said.
• What is the timing?
• There are no more bananas!
• Here's the grocery list: Bananas, apples, and pears. 
• Here is an example — a worthy one — of an emdash. 

If the entire sentence is hyperlinked, periods are not part of the hyperlink, but other terminal punctuation are: 

• This is the first hyperlink. 
• Greetings!
• What is the question? 

When possible, leave out quotation marks from the hyperlink:

• They said "Hello there!"
   

Link Behavior

• All links should stay in the same browser window or tab (current templates don't appear to allow us to spawn new browser windows or open new tabs)
• Downloadable files should trigger downloads use the DOWNLOAD attribute in the Anchor tag as appropriate: 
  
  <a href="/path/to/document.pdf" download>Download this PDF file </a>
  
   

Phone Numbers:

Phone numbers should be optimized for a global audience as much as possible

Format for North America-based phone numbers on Web pages targeted primarily and specifically to a U.S. audience, use this North American standard format: 

• +202‑555‑0100
• 202‑555‑0100, ext. 1234
• As appropriate, use the HTML anchor tag to make the phone number "clickable" for mobile users wanting to make a call: 
  
  <a href="tel:+12025550100">202-555‑0100</a>
  
  Note: Do not use spaces or dashes as separators in the phone number inside the HTML tag. 

For North American-based phone numbers on Web pages that is targeted to anyone in the world, use the universal format below: 

• +1‑800‑555‑0100
• +1-800‑555‑0100, ext. 1234

Source: Google for Web Developers: Format Phone Numbers

For non-North-American phone numbers on Web pages targeted to anyone from anywhere in the world, use the universal format below: 

• For public display on contact pages, make numbers readable using standard spaces to separate, not dashes. 
  
  +[country code] [area code] [number]. 
  
  +44 20 5555 0100
   
• For better user-experience and as appropriate, use the HTML anchor tag to make the phone number "clickable" for mobile users = to make the call.
  
  <a href="tel:+442055550100">+44 20 5555 0100</a>
  
  Note: Do not use spaces or dashes as separators in the phone number inside the HTML tag. 

Source: International Phone Number Format Guide With Examples 
 

Formatting CTFK/GHAI Internal Email Addresses

Hyperlink email addresses and spell them out (Note the use of capitalizations of Domain Names as specified in the brand style guide). 

• JSmith@TobacoFreeKids.org  (direct personal email)
• Advancement@TobaccoFreeKids.org (department email)
• RoadSafety@AdvocacyIncubator.org (program/department email)
• Info@AdvocacyIncubator.org (utility email)
• Webmaster@TobaccoFreeKids.org (utility email)
• ILC@TobaccoFreeKids.org (ALL CAP department email address)

Formatting External Email Addresses: 

• info@cnn.com
• administrator@usfda.gov 

Avoid embedding the email address hyperlink in the body text unless the Email address is user-unfriendly and not relevant to the task we're asking the user to perform: 

• Email address: FirstNameLastName@TobaccoFreeKids.org
• Send an email to the Advancement department. 

In cases where we're pre-filling a subject line in an email, try to expose the  portion of the email address that's relevant to the user. For example: 

• <a href="mailto:FirstNameLastName@TobaccoFreeKids.org.org?subject=Subject line is here">Email is linked here.</a>  

Can be rendered as: 

• Send an email to FirstNameLastName@TobaccoFreeKids.org. 
   

Trademarks

• As of July 2026, we have not been applying registration marks®, trademarks (TM) or service marks(SM) after references to the organization's intellectual property. 
• This may change if the Web team receives updated legal guidance.
• Do not use the <sup> tag to superscript if needed . Use the following code to SUPERSCRIPT Registration marks, trademarks and service marks. [Note: We'll have to extend the CSS to include superscripting]

Call to Action Election

Primary Button: 

When to Use? 

Secondary CTA

When to Use? 

Button labels

• Keep it short. 
• Need to decide: ALL CAPS/INITIAL CAPS/SENTENCE CASE

SEO/AI

Content Tab: ensure the following required elements are inspected: 

• <TITLE> aligns with display title and slug. 
• Description tab is populated with the most recent text
• "Last Updated" field is up to date. 
• Page-hierarchy uses semantic HTML and avoids using style formatting (e.g., using BOLD, ITALICS and ALL CAPS) to solely determine information architecture

Meta Tab: ensure the following required elements are inspected

• INDEX and NO CRAWL buttons are on/off based on requirements
• OG TItle, Descriptions and Images are correct and optimized for Google, X/Twitter and Facebook. 

For entries for RESOURCES: 

• Work with research to develop 2-3 sentence summaries as fact sheets get updated. (as reasonable)
• Ensure content types, linked pages and other policy-hub-related categories are entered.