Semantic Face-Off: Table vs. Definition List for a Résumé

HTML

<div id="orange">jkjjhkhgkoyuiyik</div>

CSS

#orange{
background-color:#ad59ad;
    width:300px;
    height:121px;
    position:relative;
    font-size:22px;
    box-shadow:2px 2px 2px rgba(0,0,0,0.15);
    margin-top:5px; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.33280831068627675, M12=0.33280831068627503, M21=-0.713709725469814, M22=0.7137097254698148, SizingMethod='auto expand')"
progid:DXImageTransform.Microsoft.Shadow(Strength=31, Direction=190, Color='#888888')
    progid:DXImageTransform.Microsoft.Blur(PixelRadius='11', MakeShadow='false')



}
#orange::after{
position:absolute;
    left:257px;
    top:18px;
    width:85px;
    height:85px;
    background-color:#ad59ad;
    content:"";
    box-shadow:4px 4px 2px rgba(0,0,0,0.15);  
    -moz-transform: rotate(-45deg) skew(-20deg,-20deg) scale(0.74) ;
    -moz-transform-origin: 50% 50%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.33280831068627675, M12=0.33280831068627503, M21=-0.713709725469814, M22=0.7137097254698148, SizingMethod='auto expand')";
}