RE:Creation No. 1: Google | HTML (Round 1)

Summary

Mark up the structure in HTML
Mark up the groups in HTML
Mark up the individuals in HTML

After structuring the groups in our Content Inventory, it’s time to mark up every thing in HTML. HTML stands for Hypertext Markup Language. A markup language is used to mark up (designate or practically put in enclosing tags) existing content such as the content that we converted into plain text.

Marking Up the Structure

We mark up the HMF structure by enclosing all its contents in the structures’ corresponding HTML tags. Use the HTML start tag: <header> for Header; <main> for Main; and <footer> for Footer. Remember to close the markup by adding the HTML end tag. Here’s an example for Header:

<header>
    # Website Name
    * Google

    ---

    # Account Action
    * Sign In

    ---

    # Google Apps
    [...]
</header>

Marking Up the Groups

After enclosing all the contents of the HMF structure, it’s time to mark up the groups themselves. To make it straightforward, we could “invent” our own HTML tags—that is because HTML, being a language, has already its existing vocabulary. Meaning, HTML tags are already existing and predefined. We’ll tackle about them later. For now, let’s use the name of the groups as the enclosing tags. For the syntax, let’s use lowercase letters and substitute underscore for space.

<header>
    <website_name>
        * Google
    </website_name>

    <account_action>
        * Sign In
    </account_action>

    <google_apps>
        [...]
    </google_apps>
</header>

Marking Up the Individuals

Now is the time to use the existing vocabulary of HTML. We will mark up the individual content using the closest HTML tag that matches the individual’s role in the website. Let’s take “Google” for example. Its role, as stated by its label is “Entity Name”.

This part is tricky because there is no right or wrong answer—it is up to us to discern and designate its role. Now, matching it up with an HTML tag, we could interpret it as the “Heading” of the website.

In HTML, there exists HTML tags for headings and they come in six levels: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. We’ll use <h1> for the heading of the website (the other heading levels function like sub–headings).

Marking up the individuals require us to know more about the other HTML tags to be able to match the optimum HTML tag with the individual content.

<header>
    <website_name>
        <h1>Google</h1>
    </website_name>

    <account_action>
        <a href="#">Sign In</a>
    </account_action>

    <google_apps>
        <app_shortcuts>
            <ul>
                <li><a href="#">Gmail</a></li>
                <li><a href="#">Images</a></li>
            </ul>
        </app_shortcuts>
        [...]
    </google_apps>
</header>

Demo

See the Pen RE:Creation No. 1: Google | HTML (Round 1) by Brian Dys (@briandys) on CodePen.

Next Round