Tag Design pattern

Problem summary

The user wants to find more data in the same category and/or contribute data in the same category




  • Use when the content on your website is possibly mapped into multiple categories and does not necessarily only fit into one hierarchical category.
  • Use when you want users to contribute data to your website and let them organize their contributed data themselves.


Let the contributers of information on your website add keywords (tags) to the content they submit. These keywords are then transformed into links that leads to tag pages; listing all other contributions for that tag (category).


Tags are relevant keywords associated with or assigned to a piece of information. Tags are often used on social websites, where users can upload their own content. Here, tags are used to let users organize and categorize their own data in the public sphere. In this way, tags can be seen as a bottom-up categorization of data rather than a top-down categorization of data, where the creators of the site define the hierarchy data is submitted to.

More example images of the 'Tag' pattern

  • Tag

    Tags added to a blog post.

  • Tag

    When adding tags at flickr, you can choose from tags you gave other pictures (grayed out) or type new. Upon submission, each tag is shown above the input field in a vertical list. They can each be easily removed separately.

  • Tag

    When adding tags to a video at Vimeo, tags are separated by commas, and each tag are upon submission added to a horizontal line below the input field. Each tag can easily be removed separately.

  • www.youtube.com

    Tags at youtube.com


Post a comment

Required. Real name or initials only.
Required. Will not be published.
Vote down Vote up
Out of 44 votes, 72.73% like this one.

Related links

See it in action