How can I trace the source of HTML from a div while using a tool such as FireBug so that I can alter it in the backend?

I recognize this may be a very fundamental question to ask. I'm very new to this.

...but for example. I inspect the 'questions' button here on stackoverflow. It shows me:

<html>
    <head>
    <body class="ask-page">
        <noscript><div id="noscript-padding"></div></noscript>
        <div id="notify-container"></div>
        <div id="overlay-header"></div>
        <div id="custom-header"></div>
        <div class="container">
         <div id="header">
         <div id="portalLink">
         <div id="topbar">
         <br class="cbt">
         <div id="hlogo">
         <div id="hmenus">
             <div class="nav mainnavs">
              <ul>
               <li>
                <a id="nav-questions" href="/questions">Questions</a>
               </li>

How do i figure out where this is being applied to the site in the backend? What template or file would I be looking for? I'm working with BuddyPress specifically. They use .php templates. But I have no clue of the source just by looking at a div's css/html via FireBug.

Thanks for bearing with me!

Solution

You can't tell which template generated the HTML by looking only at the HTML.

If a page has some unique text on it, you might be able to tell which php file generated that text by using grep. But a lot of templating software stores almost all the text for a web page in a database. Text in database isn't exposed to grep.

Since WordPress stores almost all a site's text in a database, you'll have to work a little harder. I suggest starting with WordPress fundamentals. Since you're essentially a user in this scenario, look hard at themes first. In the WordPress architecture of core, plugins, and themes, themes "sit" closer to the user than core and plugins.

Don't miss StackExchange's Wordpress site.