Coding the HTML

Welcome to the markup portion of the series where we’ll establish the HTML for our website.

To get started we’ll now want to pull up our mockup for reference throughout the tutorial, and you can see that we’ve amended our layers to the mockup to help guide us through the lesson.

With our mockup on hand, let’s fire up Sublime Text, and we’re going to create a new document that we’ll save right away. So hitting file >> Save as, we’ll create a new folder with the name of our project, and we’ll save our file as index.html.

With our file saved, we’ll now want to set a few parameters to ensure that our document is read as HTML, and having installed Emmet, we can already take advantage of this plugin to speed up the process.

Typing html:5 and hitting tab, will start us off with everything we need to get moving. So let’s take a minute to review what we’re given. Our doctype is declared as html5, our character set is defined, and we’re given an input for our title, where we can fill in the name of our project.

For this lesson, that about does it for the head portion of the document, and we’re now going to focus on the body. This is where all of the content for our page will be housed, and in drawing from the mockup, and wireframe lessons, we’re going to be able to use the terminology that we’re already familiar with to build our page.

So in recalling that we established a container to contain all of the contents of our site, we can now introduce our first element into our document. We’ll type out div class equals container, and making sure to close our tag, we’ll now be working within this element to fill out the rest of our page.

We’ll next want to build out the header portion of our page, and in reviewing our mockup, we grouped the navigation and banner into this section. So to define this area, we’ll introduce the header tag, and we can now work within this element to populate our navigation.

Introducing the nav element, we’ll do just that, and we’ll also apply a class of top-nav so that we can target this area in our stylesheet.

Now to fill in our links, we could take the time to enter all 4 manually, but let’s use Emmet to shortcut the process. Typing in a * 4 [TAB] will set us up with 4 hyperlinks ready to be filled in. And we’re also going to take this opportunity to demonstrate a great feature that Sublime Text provides, that of multiple cursors.

Holding down command, we’ll click inside each of these attributes, and we’re now provided a method to simultaneously fill in these destinations. Using a hashtag as a placeholder, we’ll move forward and name our links to finish the nav portion of our page.

Hitting escape to move back to one cursor, the next area to focus on is that of the banner, and as this is an area that we’ll probably further with our stylesheet, we’re going to introduce a div, and give it a class of banner so that we can target it at a later time. We’ll leave this div empty, and that about does it for the header portion of our document.

    <header>

        <nav class="top-nav">

            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>

        </nav>
        


<div class="banner"></div>



    </header>

The next section of our website to focus on is that of the main content area. So jumping outside of the header, we’re going to introduce a section that we’ll use to house both our primary and sidebar content.

Working within our section, we’ll first construct our primary content area by introducing a new div, and giving it a class of ‘content’.

Next we’ll publish the actual content that’s going to fill this area, so beginning with our page title, we’ll wrap this in h1, designating it as our primary heading, and in closing our tag, we also want to add in that horizontal line, and we’ll do that by introducing a horizontal rule tag.

Following our page title, we next have our post stream composed of article excerpts. So using the article tag, we’ll then work inside of this element and setup our article title with h2, our secondary heading.

Next is that of our excerpt, and for the purposes of this tutorial, we’re using lorem ipsum as our placeholder text. So taking advantage of another shortcut provided by Emmet, we can type in lorem [TAB] to serve us a block of text that we can then wrap in our paragraph tag. And before we move on, we also want to create our ‘read more’ link. So opening a hyperlink tag, we’ll use a hashtag as our placeholder, and can then type in ‘read more’. And we’ll also want to create our outbound arrow at this time, and to encode it properly, we’ll do ampersand right arrow and this will inject that arrow into our page.

With that in place, we can then copy our article and paste a duplicate to better the rendering of our website.

With our primary content area complete, we can now turn our attention to our sidebar. So let’s move outside of our content div, and create a new div, giving this tag a class of sidebar.

Working within our sidebar, we’ll now build our widget by using an aside element as this feature is going to complement our primary content.

Typing out our sidebar title, we’re going to wrap this in a heading level 3 tag, and we can then follow the heading with a horizontal rule.

With that in place, we’ll use the Emmet shortcut of lorem [tab] to produce some placeholder text, that we can then wrap in a paragraph tag to finish off our widget.

    <section>



<div class="content">



<h1>Page title</h1>






<hr>





		    <article>



<h2>Article title</h2>



			    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, nostrum, atque deserunt incidunt commodi iste distinctio rerum maiores a laborum nobis reprehenderit voluptates quia voluptate inventore odit aut magnam tenetur! <a href="#">Read more →</a>

		    </article>

		    <article>



<h2>Article title</h2>



			    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, nostrum, atque deserunt incidunt commodi iste distinctio rerum maiores a laborum nobis reprehenderit voluptates quia voluptate inventore odit aut magnam tenetur! <a href="#">Read more →</a>

		    </article>				

</div>





<div class="sidebar">

		    <aside>



<h3>Widget title</h3>






<hr>





			    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, officiis, ad magni earum vel aperiam dolorem. Vitae, qui debitis voluptatum dicta dolorum nisi id quia. Odio, minus error quas quos!

		    </aside>

</div>





<div class="clearfix"></div>



    </section>

So as the sidebar content wraps up the main section of our site, we can now move out of this area, and while still working within our container, we’ll introduce the footer element into our page.

Inside of the footer, we’ll open with a horizontal rule, and following this, we’ll place our copyright info by opening a paragraph tag and using ampersand copy to encode the copyright symbol, which we can then follow with the name of our project.

    <footer>





<hr>




	    
© Framework

    </footer>

Saving our page, we can review our code as we now have the markup for our website in place. So let’s take a step back and preview our site in the browser, and as we open up the page, we can see that we’re right where we want to be. We don’t have any styling in place, but rather have the structure, and framework, ready to go for the CSS portion of the series.