Ваш вопрос был "самым семантическим способом". Нет ничего семантического в контейнерах / макетах div контейнера. Семантическая сеть означает помощь другим в понимании различного контента, например, таблица должна быть таблицей, список должен быть списком и т. Д.
В этой заметке вы не правильно разметили элементы, будьте осторожны с использованием тегов div вместо их истинного значения.
<div class="whatever_label">
<h2>Title</h2> <!-- or lower level heading: h3,h4 etc. -->
<span></span>
<p>Content</p>
</div>
/* Container of module */
.whatever_label{
}
/* Heading Tab */
.whatever_label h2{
}
/* Radius: Heading Tab */
.whatever_label span{
}
/* Content */
.whatever_label p{
}
Хороший совет для определения того, использует ли html-документ хорошую семантику, - отключите CSS-стилизацию в своем браузере, и, если она все еще логична, она будет иметь смысл.
Правка, кажется, это самый чистый способ, который я мог бы придумать, надеюсь, он поможет:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Box Demo</title>
<style type="text/css">
/* :: Reset default browser stylings.
-------------------------------------------------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, cite, dfn, ins, kbd, q, code, samp, del, em, var, strong, pre,/* sub, sup,*/
a, abbr, acronym, address, big, font, img, s,
small, strike, tt,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: normal; font-size: 100%; vertical-align: baseline;}
body {color: black; background: white;}
ol, ul {list-style: none;}
table{border-collapse: collapse;}
/* Container of module */
.box{
width:600px;
}
/* Heading Tab */
.box h2{
float:left;
font-size:1.0em;
color:white;
background: #333;
height:10px;
padding:15px 20px 25px 20px;
margin:0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.box div.radius{
background: #333;
float: left;
height: 25px;
margin: 25px 0px 0px 0px;
width: 20px;
}
/* Radius: Heading Tab */
.box span{
background-color: white;
-moz-border-radius:0 0 0 10px;
border-radius: 0 0 0 10px;
float: left;
height: 25px;
margin: 0;
width: 20px;
}
/* Content */
.box p{
display:block;
clear:both;
color:white;
background: #333;
width:560px;
padding:20px;
margin:0;
}
</style>
</head>
<body style="margin:20px;">
<div class="box">
<h2>Whatever title</h2> <!-- or lower level heading: h3,h4 etc. -->
<div class="radius"><span></span></div>
<p>Nullam fermentum nibh eget lectus cursus elementum. Vestibulum congue elementum erat,
at adipiscing libero blandit sed. Aliquam erat volutpat. Duis feugiat blandit sagittis.
Praesent interdum fringilla rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc dui nulla, sodales et posuere nec, varius quis nisl. Cras mauris ipsum, commodo sit amet
sollicitudin ut, rutrum eget erat. Nullam aliquam, massa et sagittis suscipit, massa erat
adipiscing turpis, et luctus metus velit quis ante. Maecenas elementum tristique euismod.
Phasellus iaculis arcu eget libero tempor accumsan. Vestibulum at turpis ac dui venenatis condimentum.
Duis tristique neque at nisi feugiat ac congue nibh luctus. Proin non elit et sapien feugiat dictum nec at diam.
Quisque quis feugiat velit. Mauris id tortor id ligula vulputate dictum ac vitae elit.
Maecenas congue tincidunt leo, ut lobortis mi tempor sit amet. Vestibulum condimentum euismod neque.
Vivamus ullamcorper odio ut lacus ullamcorper id pellentesque orci euismod. Ut vitae arcu nulla.
</p>
</div>
</body>
</html>