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.

Answer 3

Depending on how you feel about Is it alright to use multiple h1 tags on the same page, but style them differently?, you would pick answer a instead of answer e for Q1.

Answer 4

Question 1: I would choose A. It gives semantic meaning to the fact that it is a title. An extra class is unnecessary because it's very specific to the current layout and/or design of the page.

Question 2: Go with A. A paragraph tag is inappropriate because the text contained in the footer is not actually a paragraph of text. Real paragraphs contain at least one sentence and have a single idea or topic; what the example uses is just a short snippet of information, and isn't presented to the user as a paragraph.

Answer 5

Q1 has been answered quite well above. The answer is (a), NOT (e).

For Q2, I'd personally do neither. Since the text is arbitrary, there's no way to mark-it-up semantically as we have no idea what the markup is trying to represent. However, assuming it is not directly related to the accompanying copyright notice, I would separate it in markup, as it IS separate. Something like:

<div id="footer">
  <small class="copyright">Copyright 2010 My Company</small> |
  <tagOfArbitraryMeaning>This text is arbitrary.</tagOfArbitraryMeaning>
</div>

(small might seem presentational, but "small-print" definitely has semantic meaning in my mind)

Or better yet:

<div id="footer">
  <a href="http://mycompany.website/copyrightinfo.html" rel="licence">Copyright 2010 My Company</a> |
  <tagOfArbitraryMeaning>This text is arbitrary.</tagOfArbitraryMeaning>
</div>

However, neither of those options are provided, so if I HAD to choose between the two, I'd probably go with (b), purely because it "feels" wrong to me to put text directly inside a <div/>, which is really designed to group other elements rather than to hold text directly.

<div/>s are intended purely for grouping other elements, as are other block-tags like <blockquote/> and <fieldset/>... Well - according to HTML4/XHTML1, this is how <div/>s should be used anyway - HTML5 has different ideas and has invented the <section/> element which does precisely the same thing <div/> used to do, while use of <div/> seems to be discouraged altogether... very odd.