Semantic Webpage Structure as a Graph

569 graphs created.

The output of this Java applet has very limited accessibility. If you are using a screen reader or mobile device without Java support, you will not be able to make use of the information. If you are color blind, the value will be limited.

(required)

(optional, defaults to HTML)

Note: This will initiate a Java applet, which may take some time to load. Please be patient!

Element to Color Spectrum

Associations of Node Color to HTML Element. The root node, HTML, is black. Other nodes are grouped loosely according to content type.

Document Head

  • headGray
  • titleLight Gray
  • linkLight Gray
  • metaLight Gray
  • baseLight Gray
  • styleLight Gray

Core Block Elements

  • bodyBlue
  • divLight Blue
  • pLight Blue
  • blockquoteLight Blue

Supporting Inline Semantic Elements

Eight different shades of blue-gray are used to indicate these semantic elements. This allows you to distinguish the variety of elements used in a particular site.

  • aBlue-Gray
  • abbrBlue-Gray
  • acronymBlue-Gray
  • emBlue-Gray
  • strongBlue-Gray
  • h1Blue-Gray
  • h2Blue-Gray
  • h3Blue-Gray
  • h4Blue-Gray
  • h5Blue-Gray
  • h6Blue-Gray
  • addressBlue-Gray
  • citeBlue-Gray
  • codeBlue-Gray
  • dfnBlue-Gray
  • delBlue-Gray
  • sampBlue-Gray
  • spanBlue-Gray
  • insBlue-Gray
  • qBlue-Gray
  • kbdBlue-Gray
  • subBlue-Gray
  • supBlue-Gray
  • varBlue-Gray

List Elements

  • ulGreen
  • olGreen
  • dlGreen
  • ddLight Green
  • dtLight Green
  • liLight Green

Form Elements

  • formYellow
  • inputYellow
  • textareaYellow
  • selectYellow
  • optionYellow
  • optgroupYellow
  • buttonYellow
  • legendLight Yellow
  • labelLight Yellow
  • fieldsetLight Yellow

Table Elements

  • tableOrange
  • tbodyOrange
  • theadOrange
  • tfootOrange
  • captionLight Orange
  • trLighter Orange
  • thLightest Orange
  • tdLightest Orange

Media and Scripting Elements

  • imgViolet
  • areaDark Violet
  • objectDark Violet
  • paramDark Violet
  • mapDark Violet
  • scriptDark Violet
  • noscriptDark Violet

Deprecated Elements

  • appletRed
  • centerRed
  • fontRed
  • dirRed
  • isindexRed
  • menuRed
  • sRed
  • strikeRed
  • uRed

Discouraged (Presentational) Elements

These elements have not been deprecated; but should generally only be used after careful consideration.

  • bigLight Red
  • smallLight Red
  • bLight Red
  • iLight Red
  • ttLight Red
  • preLight Red

Frame Elements

  • framePink
  • framesetPink
  • iframePink
  • noframesPink

Separator and undefined Elements

  • brBrown
  • hrBrown

Credits: Marcel Salathé and everybody he credited.