CSS and Html question

Question

I just found a page of web developer interview questions, and I'm not sure what the answers are for two of them. For Q1, I pick answer e. For Q2, I pick answer b, but I'm not sure if there are better ways to do it.

1. Which markup structure is most semantic for a title within a document body, considering that the title may be horizontally centered using a large, bold, red font?

   a. <h1>This is a Title</h1>

   b. <p align="center"><font size="+3"><b>This is a Title</b></font></p>

   c. <h1 style="font-weight:bold; font-size:large; text-align:center; color:red;">This is a Title</h1>

   d. <title>This is a Title</title>

   e. <h1 class="LargeRedBoldCenterHeading">This is a Title</h1>

   f. <span class="title">This is a Title</span>

2. Are each of the following footer markup solutions acceptable? Why or why not? What alternate solution(s) would you propose?

   a. <div id="footer">
Copyright 2010 My Company | This text is arbitratry.
</div>

   b. <div id="footer">
<p>Copyright 2010 My Company | This text is arbitratry.</p>
</div>

Answer 1

The correct answer for 1. is a as you should only have one h1 tag on your page (so a class is probably unnecessary if it's only for the h1) and because the class used in e is not semantic (e.g. "Title") but instead describes a very particular styling so would be useless if you later changed the way you want to display the title.

In fact you can rule out the other options like this:

• b) Uses align attribute, uses a font tag, uses a b tag (this one is iffy but they would prefer you used em), uses a p tag for a heading.

• c) Uses inline styles

• d) Uses the title element in the body to try and render content. This belongs in the head and shouldn't display anything on the page anyway even if it was incorrectly and invalidly placed in the body.

• e) Uses a class which is poorly named. Classes should describe the meaning of the class (e.g. "EmphasisedHeader", "HelpButton" etc. ) and not how the class is rendered. Think of them as a tag - would you like a <LargeRedBoldCenterHeading> tag or an <EmphasisedHeader> tag?

• f) Invalid HTML

For question 2. the answer is trickier. The p tag is unnecessary as a div is already a block element by default.

In HTML 5 there is a footer element for this, and indeed one of the more attractive but abandoned proposals early on was to allow you to name any element you like (perhaps using your own "meta-doctype") and just have them render like a div (e.g. you could have an <adbox> tag instead of <div class="adbox">).

It could probably be argued that they should be in a <ul id="footer"> with each element in a <li>, but attempting to style that with a | divider would be painful to do in a compliant and cross-browser fashion.

I would be happy with a.

Answer 2

I would pick a for the first one. It is unlikely you will use more than one h1, plus that class name you chose ties presentation to the class name. You will have a problem, for example, if you want that changed to green at some time (the class name will be redundant).

For the footer, both look acceptable, depending on if you need that p as an extra hook for CSS.

I'd probably use the p anyway, as it is paragraph-ish.