Website Category Selection For HTML, JavaScript, PHP Array

Website category list. Here, we showcase a comprehensive list of categories that can be used in dropdown menus on your website. This page provides a detailed categorization system for websites, available in three formats: HTML dropdown, JavaScript array, and PHP array.

How to integrate categories using HTML for the dropdown, and JavaScript and PHP arrays to manage and display these categories dynamically.

Create Custom Category for Your Needs

Customize your preferred website category list by selecting options from the provided table. You can then include these selected category in the dropdown menu, JavaScript array, or PHP array. The codes for the selected category will be displayed below.

Multilingual Options. Translated versions of the category selection list are available in various languages

Language

#	Category	Group	Select
1	Arts & Entertainment
2	Movies
3	Music & Audio
4	TV & Video
5	Visual Art & Design
6	Autos & Vehicles
7	Beauty & Fitness
8	Books & Literature
9	Business & Industrial
10	Computers & Electronics

HTML Drop Down

The following HTML code includes a dropdown menu to select categories.

HTML

<select id="categories" name="categories" aria-label="Select a website category">
    <option value="">Please select a category</option>
    <optgroup label="Arts & Entertainment">
        <option value="arts-entertainment">Arts & Entertainment (General)</option>
        <option value="movies">Movies</option>
        <option value="music-audio">Music & Audio</option>
        <option value="tv-video">TV & Video</option>
        <option value="visual-art-design">Visual Art & Design</option>
        <option value="performing-arts">Performing Arts</option>
    </optgroup>
    <optgroup label="Business & Finance">
        <option value="business-industrial">Business & Industrial</option>
        <option value="finance">Finance</option>
        <option value="insurance">Insurance</option>
        <option value="real-estate">Real Estate</option>
        <option value="jobs-career">Jobs & Career</option>
        <option value="marketing">Marketing & Advertising</option>
    </optgroup>
    <optgroup label="Computers & Technology">
        <option value="computers-electronics">Computers & Electronics</option>
        <option value="internet-telecom">Internet & Telecom</option>
        <option value="software">Software</option>
        <option value="technology">Technology</option>
        <option value="cybersecurity">Cybersecurity</option>
    </optgroup>
    <optgroup label="Education & Reference">
        <option value="education">Education</option>
        <option value="books-literature">Books & Literature</option>
        <option value="science">Science</option>
        <option value="history">History</option>
        <option value="language-learning">Language Learning</option>
    </optgroup>
    <optgroup label="Food & Lifestyle">
        <option value="food-drink">Food & Drink</option>
        <option value="health-fitness">Health & Fitness</option>
        <option value="beauty">Beauty</option>
        <option value="home-garden">Home & Garden</option>
        <option value="fashion">Fashion</option>
    </optgroup>
    <optgroup label="Hobbies & Interests">
        <option value="hobbies-leisure">Hobbies & Leisure</option>
        <option value="games">Games</option>
        <option value="sports">Sports</option>
        <option value="travel">Travel</option>
        <option value="outdoors">Outdoors & Nature</option>
    </optgroup>
    <optgroup label="News & Society">
        <option value="news">News</option>
        <option value="politics">Politics</option>
        <option value="law-government">Law & Government</option>
        <option value="environment">Environment</option>
        <option value="weather">Weather</option>
    </optgroup>
    <optgroup label="People & Community">
        <option value="people-society">People & Society</option>
        <option value="online-communities">Online Communities</option>
        <option value="social-media">Social Media</option>
        <option value="dating">Dating & Relationships</option>
        <option value="family-parenting">Family & Parenting</option>
    </optgroup>
    <optgroup label="Shopping & Consumer Services">
        <option value="shopping">Shopping</option>
        <option value="consumer-services">Consumer Services</option>
        <option value="cryptocurrencies">Cryptocurrencies</option>
    </optgroup>
    <optgroup label="Vehicles & Transportation">
        <option value="autos-vehicles">Autos & Vehicles</option>
        <option value="transportation">Transportation</option>
    </optgroup>
    <optgroup label="Other">
        <option value="pets-animals">Pets & Animals</option>
        <option value="nonprofits">Nonprofits & Charity</option>
        <option value="adult">Adult</option>
        <option value="gambling">Gambling</option>
        <option value="agriculture">Agriculture</option>
        <option value="energy">Energy & Utilities</option>
    </optgroup>
</select>

Run code Edit Code Download

JavaScript Array

JavaScript Array of categories.

The JavaScript code section demonstrates how to create a list of categories on the client side. Using a JavaScript array, we populate the dropdown menu with categories dynamically. This approach allows for additional client-side manipulations or updates to the category list without needing to reload the page.

JavaScript

const websiteCategories = [
  {
    group: "Arts & Entertainment",
    options: [
      { value: "arts-entertainment", text: "Arts & Entertainment (General)" },
      { value: "movies", text: "Movies" },
      { value: "music-audio", text: "Music & Audio" },
      { value: "tv-video", text: "TV & Video" },
      { value: "visual-art-design", text: "Visual Art & Design" },
      { value: "performing-arts", text: "Performing Arts" }
    ]
  },
  {
    group: "Business & Finance",
    options: [
      { value: "business-industrial", text: "Business & Industrial" },
      { value: "finance", text: "Finance" },
      { value: "insurance", text: "Insurance" },
      { value: "real-estate", text: "Real Estate" },
      { value: "jobs-career", text: "Jobs & Career" },
      { value: "marketing", text: "Marketing & Advertising" }
    ]
  },
  {
    group: "Computers & Technology",
    options: [
      { value: "computers-electronics", text: "Computers & Electronics" },
      { value: "internet-telecom", text: "Internet & Telecom" },
      { value: "software", text: "Software" },
      { value: "technology", text: "Technology" },
      { value: "cybersecurity", text: "Cybersecurity" }
    ]
  },
  {
    group: "Education & Reference",
    options: [
      { value: "education", text: "Education" },
      { value: "books-literature", text: "Books & Literature" },
      { value: "science", text: "Science" },
      { value: "history", text: "History" },
      { value: "language-learning", text: "Language Learning" }
    ]
  },
  {
    group: "Food & Lifestyle",
    options: [
      { value: "food-drink", text: "Food & Drink" },
      { value: "health-fitness", text: "Health & Fitness" },
      { value: "beauty", text: "Beauty" },
      { value: "home-garden", text: "Home & Garden" },
      { value: "fashion", text: "Fashion" }
    ]
  },
  {
    group: "Hobbies & Interests",
    options: [
      { value: "hobbies-leisure", text: "Hobbies & Leisure" },
      { value: "games", text: "Games" },
      { value: "sports", text: "Sports" },
      { value: "travel", text: "Travel" },
      { value: "outdoors", text: "Outdoors & Nature" }
    ]
  },
  {
    group: "News & Society",
    options: [
      { value: "news", text: "News" },
      { value: "politics", text: "Politics" },
      { value: "law-government", text: "Law & Government" },
      { value: "environment", text: "Environment" },
      { value: "weather", text: "Weather" }
    ]
  },
  {
    group: "People & Community",
    options: [
      { value: "people-society", text: "People & Society" },
      { value: "online-communities", text: "Online Communities" },
      { value: "social-media", text: "Social Media" },
      { value: "dating", text: "Dating & Relationships" },
      { value: "family-parenting", text: "Family & Parenting" }
    ]
  },
  {
    group: "Shopping & Consumer Services",
    options: [
      { value: "shopping", text: "Shopping" },
      { value: "consumer-services", text: "Consumer Services" },
      { value: "cryptocurrencies", text: "Cryptocurrencies" }
    ]
  },
  {
    group: "Vehicles & Transportation",
    options: [
      { value: "autos-vehicles", text: "Autos & Vehicles" },
      { value: "transportation", text: "Transportation" }
    ]
  },
  {
    group: "Other",
    options: [
      { value: "pets-animals", text: "Pets & Animals" },
      { value: "nonprofits", text: "Nonprofits & Charity" },
      { value: "adult", text: "Adult" },
      { value: "gambling", text: "Gambling" },
      { value: "agriculture", text: "Agriculture" },
      { value: "energy", text: "Energy & Utilities" }
    ]
  }
];

Usage Example

Use this array to create dynamic dropdown menu

HTML

<select id="categories">
  <option value="">Select category</option>
</select>

javaScripr

const categorySelect = document.getElementById("categories");
// Populate dropdown
websiteCategories.forEach(category => {
    const optgroup = document.createElement("optgroup");
    optgroup.label = category.group;

    category.options.forEach(option => {
        const optionElement = document.createElement("option");
        optionElement.value = option.value;
        optionElement.textContent = option.text;
        optgroup.appendChild(optionElement);
    });

    categorySelect.appendChild(optgroup);
});

Try it your self Real Time Preview

Download Edit Code

PHP Array

PHP Array of categories.

In the PHP code section, we define an array of categories. This array includes various categories with corresponding values and texts. This array is used to generate the 'option' elements within the dropdown menu dynamically, ensuring that the categories are rendered on the server side.

PHP

<?php
$websiteCategories = [
    [
        'group' => 'Arts & Entertainment',
        'options' => [
            ['value' => 'arts-entertainment', 'text' => 'Arts & Entertainment (General)'],
            ['value' => 'movies', 'text' => 'Movies'],
            ['value' => 'music-audio', 'text' => 'Music & Audio'],
            ['value' => 'tv-video', 'text' => 'TV & Video'],
            ['value' => 'visual-art-design', 'text' => 'Visual Art & Design'],
            ['value' => 'performing-arts', 'text' => 'Performing Arts']
        ]
    ],
    [
        'group' => 'Business & Finance',
        'options' => [
            ['value' => 'business-industrial', 'text' => 'Business & Industrial'],
            ['value' => 'finance', 'text' => 'Finance'],
            ['value' => 'insurance', 'text' => 'Insurance'],
            ['value' => 'real-estate', 'text' => 'Real Estate'],
            ['value' => 'jobs-career', 'text' => 'Jobs & Career'],
            ['value' => 'marketing', 'text' => 'Marketing & Advertising']
        ]
    ],
    [
        'group' => 'Computers & Technology',
        'options' => [
            ['value' => 'computers-electronics', 'text' => 'Computers & Electronics'],
            ['value' => 'internet-telecom', 'text' => 'Internet & Telecom'],
            ['value' => 'software', 'text' => 'Software'],
            ['value' => 'technology', 'text' => 'Technology'],
            ['value' => 'cybersecurity', 'text' => 'Cybersecurity']
        ]
    ],
    [
        'group' => 'Education & Reference',
        'options' => [
            ['value' => 'education', 'text' => 'Education'],
            ['value' => 'books-literature', 'text' => 'Books & Literature'],
            ['value' => 'science', 'text' => 'Science'],
            ['value' => 'history', 'text' => 'History'],
            ['value' => 'language-learning', 'text' => 'Language Learning']
        ]
    ],
    [
        'group' => 'Food & Lifestyle',
        'options' => [
            ['value' => 'food-drink', 'text' => 'Food & Drink'],
            ['value' => 'health-fitness', 'text' => 'Health & Fitness'],
            ['value' => 'beauty', 'text' => 'Beauty'],
            ['value' => 'home-garden', 'text' => 'Home & Garden'],
            ['value' => 'fashion', 'text' => 'Fashion']
        ]
    ],
    [
        'group' => 'Hobbies & Interests',
        'options' => [
            ['value' => 'hobbies-leisure', 'text' => 'Hobbies & Leisure'],
            ['value' => 'games', 'text' => 'Games'],
            ['value' => 'sports', 'text' => 'Sports'],
            ['value' => 'travel', 'text' => 'Travel'],
            ['value' => 'outdoors', 'text' => 'Outdoors & Nature']
        ]
    ],
    [
        'group' => 'News & Society',
        'options' => [
            ['value' => 'news', 'text' => 'News'],
            ['value' => 'politics', 'text' => 'Politics'],
            ['value' => 'law-government', 'text' => 'Law & Government'],
            ['value' => 'environment', 'text' => 'Environment'],
            ['value' => 'weather', 'text' => 'Weather']
        ]
    ],
    [
        'group' => 'People & Community',
        'options' => [
            ['value' => 'people-society', 'text' => 'People & Society'],
            ['value' => 'online-communities', 'text' => 'Online Communities'],
            ['value' => 'social-media', 'text' => 'Social Media'],
            ['value' => 'dating', 'text' => 'Dating & Relationships'],
            ['value' => 'family-parenting', 'text' => 'Family & Parenting']
        ]
    ],
    [
        'group' => 'Shopping & Consumer Services',
        'options' => [
            ['value' => 'shopping', 'text' => 'Shopping'],
            ['value' => 'consumer-services', 'text' => 'Consumer Services'],
            ['value' => 'cryptocurrencies', 'text' => 'Cryptocurrencies']
        ]
    ],
    [
        'group' => 'Vehicles & Transportation',
        'options' => [
            ['value' => 'autos-vehicles', 'text' => 'Autos & Vehicles'],
            ['value' => 'transportation', 'text' => 'Transportation']
        ]
    ],
    [
        'group' => 'Other',
        'options' => [
            ['value' => 'pets-animals', 'text' => 'Pets & Animals'],
            ['value' => 'nonprofits', 'text' => 'Nonprofits & Charity'],
            ['value' => 'adult', 'text' => 'Adult'],
            ['value' => 'gambling', 'text' => 'Gambling'],
            ['value' => 'agriculture', 'text' => 'Agriculture'],
            ['value' => 'energy', 'text' => 'Energy & Utilities']
        ]
    ]
];

Usage Example PHP Array

Here is a quick example of how you might use this array to generate an HTML select option

PHP

<?php
$selectOption = '';
// create dropdown
foreach ($websiteCategories as $group) {
    $selectOption .= '<optgroup label="' . htmlspecialchars($group['group']) . '">'.PHP_EOL;

    foreach ($group['options'] as $option) {
        $value = strtolower($option['value']);
        $text = htmlspecialchars($option['text']);
        $selectOption .= '<option value="' . $value . '">' . $text . '</option>'.PHP_EOL;
    }

    $selectOption .= '</optgroup>'.PHP_EOL;
}
?>

<select id="categories">
  <?php echo $selectOption ?>
</select>

Download

Feel free to use and adapt this category list for your projects. The structured format makes it easy to implement in various programming languages and frameworks. If you need to modify the list, you can easily add, remove, or edit categories to suit your specific needs.

Report Problem