How do I tackle this?

[flipandtwist]

I am a beginning web designer attempting to tackle coding one of my sites. Here is a link to a mockup of the home page of the site: Mockup

My question is, I don’t want to start off on the wrong foot; how would I approach marking up/ styling this website? I don’t want someone to do it for me, I’m looking for an overview of how a professional would organize the divs on the page in the markup and then how they would go about styling it… any quick tips would be helpful!

[jamygolden]

It’s pretty simple, as far as HTML goes I would do something like this:

[Paulie_D]

I wouldn’t be using the a section tag there…I’d be using a div but I wouldn’t be a complete semantic-nazi about it.

http://html5doctor.com/the-section-element/

[joshuanhibbert]

Yeah agreed @Paulie_D, otherwise there would be a content element.

[jamygolden]

I’m guessing the content will go in there for the other pages and those pages would probably start with a heading ( h1 ). But yes, in the case of the home page it should be a div, however assuming includes are used, if the home page was the only page where a section element wouldn’t be semantic, I’d still use it.

[joshuanhibbert]

@jamy_za I still respectfully disagree. For instance, if you have an about page, that contains a brief summary, contact details, and a site colophon, I would mark it up like so:

<div id="content">

<section>

<h1>About</h1>

...

</section>

<section>

<h1>Contact</h1>

...

</section>

<section>

<h1>Colophon</h1>

...

</section>

</div>

I personally find it very rare that my content element would simply contain a heading and a few paragraphs.

[jamygolden]

I think you may have misunderstood me – I would mark that up exactly like you have.

I’m saying, for templating reasons, if every page had a section and a title but one page doesn’t for some or other reason ( like the OPs example. I think it’s only his home page that won’t have a title ), I’m not going to create a new template just for that.

[joshuanhibbert]

@jamy_za I 100% misunderstood you. My apologies. Your above clarification makes perfect sense.

[Author]

Posts