Step Two: Markup text with HTML tags

A. Add content

B. Markup your content structure using HTML.

If you want a challenge or you know some HTML, try to now markup our content with the HTML structure below. These containers will help us divide our content into modules that can each be styled in order. Follow the cues in the content for where these might be placed, or see the completed version at the bottom of this page.

NOTE: The three dots represent content and are not part of the code. Use the comments (betwen <!-- -->) to guide where to place these tags.

<div id="container">

    <!-- Header : chicago-logo.png -->
    <header>
        ...
    </header>

    <main>
        <!-- Article : Intro -->
        <article id="intro">
            ...
        </article>

        <!-- Figure : Chicago_hot_dog.jpg -->    
        <figure>
            ...
        </figure>

        <!-- Article : Lingo -->
        <article id="lingo">
            ...
        </article>

        <!-- Aside : No Ketchup -->
        <aside id="no-ketchup">
            ...
        </aside>

        <!-- Figure : hot-dougs.jpg -->
        <figure>
            ... 
        </figure>

        <!-- Aside : Hot Doug's : gene-ha-hot-dougs.jpg -->
        <aside id="hot-dougs">
            ...
        </aside>

        <!-- Aside : Sources -->
        <aside id="sources">
            ...
        </aside>
    </main>

    <!-- Footer -->
    <footer></footer>

</div>

About HTML tags:

The content at this point is not styled, but because of the browser default styles for each element, it should seem much more readable. If the structure and hierarchy of your content does not make sense when you view it in the browser, this is the time to fix that before styling the page.

Work your way through the content adding in basic HTML tags. No content should be left untagged when you are finished.

C. Markup text content

Putting all of your content into HTML tags will help you and the browser to identify each piece's role.

Add in images using <figure>, <img> and <figcaption> tags. Add in links using <a href="">i am a link</a>.

Basic tags (reference)

<p> paragraph
<h1>-<h6> headlines

<ul> or <ol> unordered/bulleted list or ordered/numbered list
    <li>List item</li>
    <li>List item</li>
    ...
</ul> or </ol>

<dl> description list
    <dt> terms
    <dd> definition
</dl>

<blockquote> blockquote

<figure> figure
    <img src="" alt=""> image (no close tag)
    <figcaption></figcaption> caption
</figure>

<a href="URL">makes a link</a>

<strong> or <b> bold
<em> or <i> italic

Reminder: you can [download the files in zip format] and catch up at any time

When you're done, your HTML for the body should look like this:

<div id="container">

    <!-- Header : chicago-logo.png -->
    <header>
        <img src="images/chicago-logo.png" alt="The Chicago-Style Hot Dog">
    </header>

    <main>
        <!-- Article : Intro -->
        <article id="intro">

            <h1>The 'Classic' Chicago Dog</h1>
            <!-- Image : hot-dog-stamp.png --> 
            <img src="images/hot-dog-stamp.png" alt="authentic Chicago hot dog">
            <p>Close your eyes and picture a Chicago dog, and this is probably what you'll see. Tomato slices, dill pickle spears, and celery salt have joined the fray, along with that poppy seed-encrusted bun. This is the fully-loaded, dragged-through-the-garden hot dog most often seen on sausage paraphernalia, and it's easy to see why. When properly constructed, this version of the Chicago dog, with all seven-toppings accounted for, is a true feast for the eyes. It is beautiful.</p>

            <h2>Make your own</h2>

            <h3>Ingredients:</h3>
            <ul>
                <li>1 Vienna beef hot dog</li>
                <li>onions (chopped)</li>
                <li>1 poppy seed bun</li>
                <li>tomatoes (sliced)</li>
                <li>¼ dill pickle</li>
                <li>hot peppers (2 whole)</li>
                <li>cucumber slices (optional)</li>
                <li>mustard</li>
                <li>relish</li>
                <li>celery salt</li>
            </ul>
            <h3>Directions:</h3>
            <p>Boil the hot dog, steam the poppy-seed bun and top with mustard, relish, onions, tomato slices, pickle, hot peppers and a dash of celery salt.</p>
        </article>

        <!-- Figure : Chicago_hot_dog.jpg -->    
        <figure>
            <img src="images/Chicago_hot_dog.jpg" alt="Hot dog, source Joe Campagna">
            <figcaption>
                <dl>
                    <dt>Toppings</dt> 
                    <dd>yellow mustard, chopped white onion, neon green relish, tomato slices, kosher dill pickle spear, "sport peppers", celery salt</dd>
                    <dt>Bun</dt> 
                    <dd>poppy seed bun</dd>
                    <dt>Dog</dt> 
                    <dd>Steamed, natural casing Vienna Beef hot dog</dd>
                 </dl>
            </figcaption>
        </figure>

        <!-- Article : Lingo -->
        <article id="lingo">
            <h2>Learn the Lingo</h2>
            <p><b>&ldquo;The Works&rdquo;</b> - When ordering a Chicago Style Hot Dog it is important to understand the terminology. Probably the most important words are "works" and "everything". For example, the proper way to order your Dog is to say, "I'll take a Chicago Dog with the works" or "I'll take a dog with everything". First of all, it is important to say "Chicago Dog" when placing your order. This sends a clear message that you want an all beef Hot Dog served on a steamed poppy seed bun. When you say " with the works" or "with everything" you are saying that you want yellow mustard, bright green relish, onions, tomato wedges, pickle spear, sport peppers and a dash of celery salt on your Dog.</p>
            <p><i>Tip: When it is your turn to order you better have an idea of what you want.  Hot Dog establishments are usually very crowded and very fast paced. The person behind the counter expects you to know what you want. If you are not ready, let the person behind you place their order first.</i></p>
            <p><b>&ldquo;Snap&rdquo;</b> - When biting into an all beef Hot Dog, there should be slight resistance from the casing. The resistance is referred to as the "snap". For example, "it has the nice 'snap'.". Next time you have a Chicago Dog, impress your friends and family by taking a bite and commenting on the "snap".</p>
            <p><b>&ldquo;Dragged Through the Garden&rdquo;</b> - Chicago Dogs are sometimes described this way because of all the vegetables. You definitely would not say this while ordering.</p>
            <p><b>&ldquo;Depression Dog&rdquo;</b> - Some hot dog places serve a version of the Chicago Style hot dog which is known as a "depression dog". This minimalist variation is a natural casing all-beef hot dog served on a steamed plain bun (no poppy seeds) and usually only includes mustard, onion, sport peppers and sometimes relish. This is how Chicago Style hot dogs were originally served by street vendors during the Great Depression. The depression dog is often served with hand-cut french fries that get wrapped up with the dog. Along the way, other ingredients were added to create the classic Chicago Style hot dog we are familiar with today. There are many theories circulating as to how the Chicago dog evolved over the years to include poppy seeds, neon green relish, tomatoes, a pickle spear and celety salt.</p>
        </article>

        <!-- Aside : No Ketchup -->
        <aside id="no-ketchup">
            <h3>No Ketchup</h3>
            <p>The canonical recipe does not include ketchup, and there is a widely shared, strong opinion among many Chicagoans and aficionados that ketchup is unacceptable.</p>

            <!-- Quote -->
            <blockquote>&ldquo;No, I won’t condemn anyone for putting ketchup on a hot dog. This is the land of the free. And if someone wants to put ketchup on a hot dog and actually eat the awful thing, that is their right.</blockquote>
            <blockquote>&ldquo;It is also their right to put mayo or chocolate syrup or toenail clippings or cat hair on a hot dog.</blockquote>
            <blockquote>&ldquo;Sure, it would be disgusting and perverted, and they would be shaming themselves and their loved ones. But under our system of government, it is their right to be barbarians.&rdquo;</blockquote>
            <blockquote>&mdash; Chicago columnist Mike Royko</blockquote>
        </aside>

        <!-- Figure : hot-dougs.jpg -->
        <figure>
            <img src="images/hot-dougs.jpg" alt="Hot Doug's">
            <figcaption>
                Hot Doug's version of the Chicago Dog.
                &nbsp;<b>PHOTO: Nick-Kindelsperger</b> 
            </figcaption> 
        </figure>

        <!-- Aside : Hot Doug's : gene-ha-hot-dougs.jpg -->
        <aside id="hot-dougs">
            <figure>
                <img src="images/gene-ha-hot-dougs.jpg" alt="Gene Ha waiting for hot dogs">
                <figcaption>Chicago-based <a href="http://www.geneha.com/">Comic Book Artist Gene Ha</a> recently waiting in the Hot Doug's line.</figcaption>
            </figure>

            <h3>Hot Doug's</h3>
            <p>It may be Chicago's most famous hot dog stand, but Hot Doug's actually serves a modified version of the Chicago dog, as it differs in one important detail: instead of chopped white onion, caramelized onions are used. You can also get the hot dog steamed or grilled.</p>
            <p><a href="#">Visit Hot Doug's Website</a></p>
            <p>Hot Doug's will be closing forever on October 3, 2014. While you are in Chicago for ONA, if you can, sneak away and try this special Chicago Dog.</p>

            <h4>The Dog</h4>
            <p>chicago-style hot dog with all the trimmings : 'nuff said.</p>
            <h4>The Elvis</h4>
            <p>polish sausage : smoked and savory - just like the king.</p>
            <h4>The Paul Kelly</h4>
            <p>bratwurst : soaked in beer - sort of like paul.</p>
            <h4>The Sal Tessio</h4>
            <p>italian sausage : it's not personal, it's strictly sausage.</p>
            <h4>The Anna Kendrick</h4>
            <p>(formerly the keira knightley, the jennifer garner and the britney spears). fire dog: mighty hot!</p>
            <h4>The Brigitte Bardot</h4>
            <p>(formerly the salma hayek, the madonna, the raquel welch and the ann-margret). andouille sausage: mighty, mighty, mighty hot!</p>
            <h4>The Norm Crosby</h4>
            <p>(formerly the marty allen and the don rickles). thuringer: i represent that beef, pork and garlic.</p>
            <h4>The Joe Strummer</h4>
            <p>(formerly the pete shelley, the steve diggle and the howard devoto). vegetarian dog: meatless and delicious!</p>
            <h4>The Steve Swisher</h4>
            <p>(formerly the dave kingman, the shawon dunston and the rick reuschel). chicken sausage: classic italian-style or zesty sante fe-style.</p>
            <h4>The Dave Pound</h4>
            <p>(formerly the sally vega, the ace patrick and the psycho ronnie raines). corn dog: deep fried to a golden splendor its corntacular!</p>
        </aside>

        <!-- Aside : Sources -->
        <aside id="sources">
            <small>Sources for images and content: 
                <a href="http://commons.wikimedia.org/wiki/File:Chicago_hot_dog.jpg">Wikimedia</a>,
                <a href="http://www.diningchicago.com/blog/2010/07/22/ketchup-on-hot-dogs/">Dining Chicago</a>,
                <a href="http://chicago.seriouseats.com/2012/03/the-serious-eats-chicago-dog-style-guide.html">Chicago Serious Eats</a>,
                <a href="http://www.hotdougs.com/default.htm">Hot Doug's</a>,
                <a href="http://checkplease.wttw.com/restaurants/wieners-circle">Check Please</a>,
                <a href="http://www.hotdogchicagostyle.com/chicagodog.php">Hot Dog Chicago Style</a>
            </small> 
        </aside>
    </main>

    <!-- Footer -->
    <footer></footer>

</div>

Save index.html and refresh your browser.



Step 2A | Step 2B | Step 2C | Step 2D


Step Three: Link in the style sheet   ➳

0 | 1 | 2 | 3 | 4 | 5-6 | 7-8