HTML5 and CSS - custom tags?

Question

I am working on a direct HTML 5 website for training.

Before my CSS might look:

div.BoxHouse {
  margin-left: 72px;
  margin-right: 20px;
}

#content {
  width: 90%;
  background: url(transwhite.png);
  border: 1px solid #3F4933;
  margin-left: 72px;
  margin-right: 20px;
  margin-top: 20px;
  padding: 5px;
  z-index: 1;
  margin-bottom: 40px;
  overflow:auto;
  top: 10em;
  padding-top: 10px;
  }

I thought that with HTML5 I could just do this in code:

<header>  
<hgroup>
    <content>
    <BoxHouse>
        <h1>HTML 5</h1>  
        <h2>The mark-up language for fun and profit</h2>
    </BoxHouse>
    </content>
</hgroup>  

Given this as new CSS:

BoxHouse {
  margin-left: 72px;
  margin-right: 20px;
}

content {
  width: 90%;
  background-image: url('../transwhite.png');
  border: 1px solid #3F4933;
  margin-left: 72px;
  margin-right: 20px;
  margin-top: 20px;
  padding: 5px;
  z-index: 1;
  margin-bottom: 40px;
  overflow:auto;
  top: 10em;
  padding-top: 10px;
  }

But this clearly does not work. What am I doing wrong?

Answer 1

You cannot use custom tags in HTML5. You must either choose h1, h2, etc. Directly in your CSS, or use classes on them.

<header class="content">  
<hgroup class="BoxHouse">
    <h1>HTML 5</h1>  
    <h2>The mark-up language for fun and profit</h2>
</hgroup>

, background-image: url(transwhite.png); ? , RGBA CSS3. . , background-color: rgba(255,255,255,0.5); 50%. - , .

Answer 2

, , . , CSS.

<em> <strong> , html , . < span class= "myclass" > ...