Getting more detailed Stack Exchange mails -- Part 1

I made the layout for a new project which will allow you to subscribe to periodic emails about your favorite Stack Exchange site (I'm not very happy with the SE-provided one). Since I'm horrible at design and in essence new to HTML/CSS/Javascript, I figured I'd get started with that so the hard part is over.

Below is the HTML and CSS that make up the first draft of the layout. Before I get started making everything dynamic by incorporating AngularJS and NodeJS, I want to make sure that the HTML as I've written here follows best practices.

Suggestions concerning layout are very welcome as well. Did I mention I'm horrible at design?

One aspect I'm rather uneasy with is the way I layout things to the right-side of the screen: direction: rtl.



`body {
background-color: #fff;
width: 100%;
margin: 0 auto;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
}

#header {
height: 5%;
width: 100%;
margin: 0 auto;
background-color: lightgray;
border-radius: 1em;
}

#header ul {
direction: rtl;
}

#header li {
padding-top: 1em;
margin-right: 2em;
list-style-type: none;
text-align: right;
display: inline-block;
font-weight: bold;
}

#header ul li:hover {
cursor: pointer;
}

/ don't make the separation markers clickable /
#header ul li:nth-child(2):hover {
cursor: none;
}

#content {
text-align: center;
margin-top: 2em;
}

#intro {
width: 75%;
margin: 0 auto;
text-align: center;
padding: 2em;
}

#settings {
width: 75%;
margin: 0 auto;
text-align: center;
}

#siteSelector > ul {
list-style-type: none;
}

#siteSelector > ul > li > p {
float: left;
padding: 0.5em;
}

.selectedSite {
border: 0.5em inset #ffc726;
}

#tagSelector {
clear: both;
}

.tags {
width: 60%;
margin: 0 auto;
}

/ Layout taken from SO.css /
.tags > li {
color: #566e76;
background: #f7fdff;
border: 1px solid #c0d4db;
padding: .4em .5em;
border-radius: 15px;
margin: 2px 2px 2px 0;
text-decoration: none;
tex

Semantic Markup

    
      
        Home
      
      
        |
      
      
        Login
      
    
  

I was going to suggest that you use a header element, but then I realized that this isn't a header, it's a nav element. You should use the semantically appropriate elements whenever possible. divs are supposed to be for formatting purposes, when there is not a more semantically correct element available.

I like the choice of an unordered list for the links themselves though.

Now, this is a `, but you didn't add the tag.

StackMailer

  StackMailer allows you to receive periodic emails with the most popular questions on your favorite Stack Exchange site.
   Get started with your own schedule by selecting one of the Stack Exchange sites below.

You may not use it for formatting now, but you may want to do so later. Create your markup correctly now, and you won't need to modify it later just to change the style (theoretically).

Again, this is HTML5, so use a semantic tag. In this case, this is a .

The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

I would put this in an outline, so I think the section element is appropriate.

  
    
      Stack Overflow
      
      
    
  
  
    
      Server Fault
      
      
    
  
  
    
      Super User
      
      
    
  

I would discourage the use of strong and br here and prefer css for formatting purposes. (I know, easier said than done, particularly when you compare it to using the HTML tags.)

      
        Frequency: 
        
          
            Daily
            Weekly
            Monthly
          
        
      
      
        Time: 
        
          
        
      
      
        Amount of posts to show:
        
          
        
      
    

This isn't data, so a table isn't appropriate. This is where divs are appropriate.

    Made by Jeroen Vannevel. Visit me at my blog.
  

Footer element...

You had asked how you would replace the strong and br tags with CSS. I haven't worked the links out, but given some markup like this.

    Pick a site
    

    
      
        
          Stack Overflow
          
        
      
          ...

You could format the list items for just this section with css (the part I haven't tested and you may need to tweak).

section.siteSelector ul {
    font-weight: bold;
    margin-bottom: 5px;
}

This should format just the lists within this particular list. The selector is read as element.class anyChildElement`. More information can be found in the manual.

StackExchange Code Review Q#102512, answer score: 5