👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
- 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>
See the Pen RE:Creation No. 1: Google | HTML (Round 1) by Brian Dys (@briandys) on CodePen.