News Categories List For HTML Drop Down, JavaScript, PHP

This page provides list of news categories that you can use in HTML dropdowns, JavaScript arrays, and PHP arrays. Use the News Categories Dropdown snippet to organize news topics into logical groups, making it easier for visitors to browse through your website or blog.

This dropdown menu sorts news into ten main areas like World News, Finance, and Tech. Each big area has its own smaller parts, giving us 35 choices to sort articles. This setup helps with finding and organizing information, great for websites, systems, or any place that deals with a lot of different content.

You can easily paste these code snippets into your projects and modify them as needed.

HTML Drop Down

Here is the section of the HTML code for an news categories selection drop-down. Users can now choose from a wider range of topics, and the grouping makes it easier to find related categories.

HTML

<select id="news-category" name="news-category">
    <optgroup label="Top Stories">
        <option value="breaking-news">Breaking News</option>
        <option value="local-news">Local News</option>
    </optgroup>
    <optgroup label="Global News">
        <option value="world">World</option>
        <option value="politics">Politics</option>
        <option value="diplomacy">Diplomacy</option>
    </optgroup>
    <optgroup label="Economy">
        <option value="business">Business</option>
        <option value="finance">Finance</option>
        <option value="markets">Markets</option>
        <option value="economy">Economy</option>
        <option value="startup-news">Startup News</option>
    </optgroup>
    <optgroup label="Science & Technology">
        <option value="technology">Technology</option>
        <option value="science">Science</option>
        <option value="innovation">Innovation</option>
        <option value="space">Space</option>
    </optgroup>
    <optgroup label="Health & Wellness">
        <option value="health">Health</option>
        <option value="medicine">Medicine</option>
        <option value="mental-health">Mental Health</option>
        <option value="fitness">Fitness</option>
    </optgroup>
    <optgroup label="Culture & Lifestyle">
        <option value="entertainment">Entertainment</option>
        <option value="lifestyle">Lifestyle</option>
        <option value="arts">Arts</option>
        <option value="fashion">Fashion</option>
        <option value="food">Food & Dining</option>
        <option value="celebrity-news">Celebrity News</option>
    </optgroup>
    <optgroup label="Sports & Recreation">
        <option value="sports">Sports</option>
        <option value="olympics">Olympics</option>
        <option value="esports">Esports</option>
    </optgroup>
    <optgroup label="Travel & Exploration">
        <option value="travel">Travel</option>
        <option value="tourism">Tourism</option>
        <option value="adventure">Adventure</option>
    </optgroup>
    <optgroup label="Education & Learning">
        <option value="education">Education</option>
        <option value="higher-education">Higher Education</option>
        <option value="skills-development">Skills Development</option>
        <option value="historical-events">Historical Events</option>
    </optgroup>
    <optgroup label="Environment & Sustainability">
        <option value="environment">Environment</option>
        <option value="climate-change">Climate Change</option>
        <option value="conservation">Conservation</option>
        <option value="renewable-energy">Renewable Energy</option>
        <option value="weather">Weather</option>
    </optgroup>
    <optgroup label="Opinion & Analysis">
        <option value="opinion">Opinion</option>
        <option value="editorial">Editorial</option>
        <option value="commentary">Commentary</option>
    </optgroup>
    <optgroup label="Law & Order">
        <option value="crime">Crime</option>
        <option value="legal">Legal</option>
        <option value="justice">Justice</option>
    </optgroup>
</select>

Run code Edit Code Download

JavaScript Array

Each object represents a group with a 'group' property for the group name and an 'options' array for the categories within that group.

JavaScript

const newsCategories = [
    {
        group: "Top Stories",
        options: ["Breaking News", "Local News"]
    },
    {
        group: "Global News",
        options: ["World", "Politics", "Diplomacy"]
    },
    {
        group: "Economy",
        options: ["Business", "Finance", "Markets", "Economy", "Startup News"]
    },
    {
        group: "Science & Technology",
        options: ["Technology", "Science", "Innovation", "Space"]
    },
    {
        group: "Health & Wellness",
        options: ["Health", "Medicine", "Mental Health", "Fitness"]
    },
    {
        group: "Culture & Lifestyle",
        options: ["Entertainment", "Lifestyle", "Arts", "Fashion", "Food & Dining", "Celebrity News"]
    },
    {
        group: "Sports & Recreation",
        options: ["Sports", "Olympics", "Esports"]
    },
    {
        group: "Travel & Exploration",
        options: ["Travel", "Tourism", "Adventure"]
    },
    {
        group: "Education & Learning",
        options: ["Education", "Higher Education", "Skills Development", "Historical Events"]
    },
    {
        group: "Environment & Sustainability",
        options: ["Environment", "Climate Change", "Conservation", "Renewable Energy", "Weather"]
    },
    {
        group: "Opinion & Analysis",
        options: ["Opinion", "Editorial", "Commentary"]
    },
    {
        group: "Law & Order",
        options: ["Crime", "Legal", "Justice"]
    }
];

Usage Example

Use this array to create a dropdown menu category selection

HTML

<select id="news-category"></select>

javaScripr

const newsSelect = document.getElementById("news-category");

newsCategories.forEach(group => {
    const optgroup = document.createElement('optgroup');
    optgroup.label = group.group;

    group.options.forEach(option => {
        const optionElement = document.createElement('option');
        optionElement.value = option.toLowerCase().replace(/ /g, '-');
        optionElement.textContent = option;
        optgroup.appendChild(optionElement);
    });

    newsSelect.appendChild(optgroup);
});

Try it your self Real Time Preview

Download Edit Code

PHP Array

Array of news categories

PHP

<?php
$newsCategories = [
    [
        "group" => "Top Stories",
        "options" => ["Breaking News", "Local News"]
    ],
    [
        "group" => "Global News",
        "options" => ["World", "Politics", "Diplomacy"]
    ],
    [
        "group" => "Economy",
        "options" => ["Business", "Finance", "Markets", "Economy", "Startup News"]
    ],
    [
        "group" => "Science & Technology",
        "options" => ["Technology", "Science", "Innovation", "Space"]
    ],
    [
        "group" => "Health & Wellness",
        "options" => ["Health", "Medicine", "Mental Health", "Fitness"]
    ],
    [
        "group" => "Culture & Lifestyle",
        "options" => ["Entertainment", "Lifestyle", "Arts", "Fashion", "Food & Dining", "Celebrity News"]
    ],
    [
        "group" => "Sports & Recreation",
        "options" => ["Sports", "Olympics", "Esports"]
    ],
    [
        "group" => "Travel & Exploration",
        "options" => ["Travel", "Tourism", "Adventure"]
    ],
    [
        "group" => "Education & Learning",
        "options" => ["Education", "Higher Education", "Skills Development", "Historical Events"]
    ],
    [
        "group" => "Environment & Sustainability",
        "options" => ["Environment", "Climate Change", "Conservation", "Renewable Energy", "Weather"]
    ],
    [
        "group" => "Opinion & Analysis",
        "options" => ["Opinion", "Editorial", "Commentary"]
    ],
    [
        "group" => "Law & Order",
        "options" => ["Crime", "Legal", "Justice"]
    ]
];
?>

Usage Example PHP Array

Use this PHP array to create news categories dropdown selection

PHP

<?php
$html = '';
foreach ($newsCategories as $group) {
	$html .= '<optgroup label="' . htmlspecialchars($group['group']) . '">';

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

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

<select id="news-category">
	<?php echo $html ?>
</select>

Download

JavaScript and PHP Both arrays maintain the grouping structure from the HTML version, allowing for organized access to the categories. These arrays can be used for various purposes such as

Dynamically generating HTML select options
Filtering or searching news categories
Creating navigation menus
Backend processing of news category data

Report Problem