DHS.gov Homepage — HTML Structure & Technical Analysis (Drupal + USWDS)

Reverse-engineered from the provided markup of https://www.dhs.gov/. Publish-ready summary for developers and site operators.

TL;DR

  • Platform: Drupal (11.x assets) themed with USWDS (U.S. Web Design System).
  • Front-end: USWDS header/megamenu, hero carousel via Paragraphs entities, card grids, and a USWDS footer + USA Identifier.
  • Search: Google CSE (cx=a8e90417aed6e7a75) desktop & mobile.
  • Tagging: Google Analytics (UA), Google Tag Manager (GTM), DAP (digitalgov.gov), Akamai mPulse (Boomerang), Siteimprove, and custom GA events.
  • A11y: Skip links, ARIA labels, strong alt text, focus styles; USWDS components used correctly.

Page identity & stack

  • Title: Home | Homeland Security
  • CMS: Drupal (see drupalSettings, core libraries, profiles/dhsd8_gov)
  • Design system: USWDS (usa-header, usa-nav, usa-banner, usa-card-group, usa-footer, identifier sections)
  • Language/dir: lang="en" dir="ltr" with og prefix

Analytics & tag management

  • GTM: GTM-5KJ3RF8 (head + <noscript> iframe)
  • Google Analytics (UA): UA-32318423-1 with IP anonymization, ad-signals disabled, and custom_map for dimension1 (set to “(DHS) Department of Homeland Security”).
  • Digital Analytics Program (DAP): Universal-Federated-Analytics-Min.js?agency=DHS&yt=true
  • Akamai mPulse (Boomerang): inline loader with AK variables and beacon key
  • Siteimprove: siteanalyze_6342107.js
  • Extlink modal: “You are now leaving DHS.gov” interstitial via extlink + extlink_extra modules.

Note: UA is legacy. If GA4 is also in use, ensure parallel tagging and server-side validation; otherwise plan a complete GA4 migration.

SEO & social

  • Canonical & shortlink: both https://www.dhs.gov/
  • Meta: description, robots, geotags, and Open Graph (title, description, 1200×630 image/alt, locale).
  • searchgov_custom1: “About DHS” hint for Search.gov integrations.

CSS pipeline

Core & contrib styles (selected):

  • jQuery UI base theme (/core/assets/vendor/jquery.ui/themes/base/...)
  • Stable/Classy/USWDS theme components
  • USWDS theme CSS (/themes/custom/dhs_uswds/assets/uswds/css/styles.css)
  • DHS subtheme styles + print stylesheet
  • Slick Carousel (/libraries/slick-carousel/slick/*.css)

All assets are cache-busted with a ?t1gnlb token.

JS pipeline

Key libraries loaded (order condensed):

  • Drupal core (drupalSettingsLoader, drupal.js, drupal.init.js)
  • jQuery + jQuery UI widgets (dialog/controlgroup/checkboxradio/etc.)
  • once, loadjs, ajax, dialog.*, progress, message, etc.
  • USWDS: uswds-init.js + uswds.min.js
  • Slick Carousel
  • Custom subtheme scripts: accordion/menus/general, OpenSearch tab logic
  • Modules: AblePlayer, emerald.ableplayer, extlink / extlink_extra, google_analytics, wcm_survey
  • 3rd-party: Siteimprove, js-cookie

Header, navigation & search

  • USWDS banner (“Official website… Here’s how you know”), expanding details with .gov and HTTPS lock explainer.
  • Header: USWDS basic header with DHS logo (link to /) and a desktop Google CSE searchbox (data-resultsurl="/search").
  • Megamenu: Primary nav items (Topics, News, In Focus, How Do I?, Get Involved, About DHS) render as USWDS accordion buttons with large, multi-column submenus.
  • Mobile: Responsive “Menu” button and mobile search form (/search).

Main content (hero & sections)

  • Hero carousel: Multiple USWDS hero slides driven by Paragraphs:
    • Background images via field--name-field-hero items
    • Each slide has a callout (h1, body optional, CTA button)
    • Inline focus outlines for accessibility on CTA buttons
  • Card grid (Know2Protect, VOICE, Making America Safe Again, CBP Home, Combating Fentanyl, If You See Something…)
    Implemented as usa-card-group with per-card header, image (media), body, and button footer.
  • News & Updates: Drupal Views block (view-news-updates-home) listing recent press releases with ISO timestamps, plus a “Show me more” button.
  • Carousel strip: A second usa-card-group configured as a carousel (Slick) with topical quick links.

Footer & USA Identifier

  • Primary footer nav: Topic hubs (Topics, News, In Focus…)
  • Intermediate: Wordmark logo + social links (Facebook, X, YouTube, Flickr, Instagram, LinkedIn, Email)
  • USA Identifier: Domain (DHS.gov) + “official website” disclosure, USA.gov prompt, and a right-side NTAS iframe widget.

Accessibility (A11y) & UX

  • Skip link: Skip to main content → #main-content
  • ARIA: Landmarks (role="banner", role="navigation", aria-labels), accordion semantics
  • Keyboard: Explicit focus styles on hero CTAs; USWDS components provide focus management
  • Media: Descriptive alt text across hero and cards (good practice)

Drupal specifics

  • drupalSettings includes:
    • path (isFront: true, current node id path), ajaxPageState.libraries, theme name, GA configuration, survey config
    • extlink exclusions (whitelists .gov/.mil and official social domains)
    • wcm_survey with SurveyMonkey integration (25% sampling, depth ≥ 2)
  • Paragraphs & Views power the hero/sections and news listing.
  • The subtheme (dhs_uswds_subtheme) holds most behavior scripts and styles.

Security & privacy touches

  • IP anonymization in GA; ad-signals disabled
  • Extlink warning modal for off-domain navigation
  • HTTPS everywhere with USA Banner messaging
  • Cookies: js-cookie present; survey uses cookie gating; extlink can add rel="noreferrer"

Recommendations (actionable)

  1. Analytics modernization
    • Ensure GA4 is deployed (parallel to or replacing UA). Map critical dimensions/events; validate with GTM server-side where feasible.
  2. Tag performance
    • Add preconnect/dns-prefetch for https://www.googletagmanager.com, https://www.google-analytics.com, https://dap.digitalgov.gov, Akamai mPulse, Siteimprove to reduce handshake latency.
    • Consider defer for non-critical third-party scripts that currently load async but block dependent inline code.
  3. Resource integrity & CSP
    • Add SRI hashes + crossorigin to third-party <script>/<link>.
    • Define/strengthen a CSP (script/style/img/connect) with nonces or hashes for inline.
  4. Images & media
    • Continue serving WebP; add width/height consistently and fetchpriority="high" on the first LCP image; consider preload for the first hero image.
    • For carousels, lazy-load off-screen slides and defer Slick init until idle.
  5. JS & CSS
    • Audit jQuery UI modules and remove unused widgets to shrink payload.
    • Consider code-splitting subtheme JS and loading section-specific code on demand.
  6. Accessibility
    • Ensure keyboard ops for hero/carousel controls (left/right, pause) and visible focus states throughout.
    • Keep alt text succinct; confirm color contrast in dark callouts meets WCAG 2.1 AA.
  7. Extlink UX
    • Respect target="_blank" expectations and announce new windows via aria-label or visible text for assistive technologies.

Useful selectors & components (quick refs)

  • USWDS banner: .usa-banner, .usa-accordion__button[aria-controls="gov-banner"]
  • Header/megamenu: .usa-header--megamenu, .usa-nav__primary .usa-accordion__button, .usa-nav__submenu
  • Hero: .usa-hero, .usa-hero__callout (slides from field--name-field-hero)
  • Cards: .usa-card-group > li .usa-card__container
  • News view: .view-news-updates-home .view-content .news-updates
  • Footer: .usa-footer, .usa-identifier__section

If you want, I can turn this into a site-internal runbook (checklist format) or output a component inventory (JSON) of heroes/cards/news based on the current DOM.