Container Bootstrap a umiejscowienie "<section>".

0

Witam, chcę poprosić o poradę. Stworzyłem carousel w bootstrapie oraz napis w elemencie <section>, który mieści się nad carousel. Mam pytanie odnośnie umiejscowienia tego elementu semantycznego w kodzie. Podaje 2 przykłady i prosiłbym o wyjaśnienie dlaczego akurat tak a nie inaczej.
Pozdrawiam!

<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">

<section class="par">
Technologies that I using
</section>

<div id="tech-el" class="carousel slide" data-ride="carousel" data-interval="2200">

<ol class="carousel-indicators">
<!-- OPTIONAL
			<li data-target="#tech-el" data-slide-to="0" class="active"></li>
			<li data-target="#tech-el" data-slide-to="1"></li>
			<li data-target="#tech-el" data-slide-to="2"></li>
-->
</ol>

<div class="carousel-inner" role="listbox">

<div class="item active">
	<img src="images/bootstrap-solid.png" />
</div>

<div class="item">
	<img src="images/css3-logo.png" />
</div>

<div class="item">
	<img src="images/html-logo.png" />
</div>

<div class="item">
	<img src="images/gitlogo.png" />
</div>

<a class="left carousel-control" href="#tech-el" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>

Czy może tak?

<section class="par">
Technologies that I using
</section>


<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">



<div id="tech-el" class="carousel slide" data-ride="carousel" data-interval="2200">

<ol class="carousel-indicators">
<!-- OPTIONAL
			<li data-target="#tech-el" data-slide-to="0" class="active"></li>
			<li data-target="#tech-el" data-slide-to="1"></li>
			<li data-target="#tech-el" data-slide-to="2"></li>
-->
</ol>

<div class="carousel-inner" role="listbox">

<div class="item active">
	<img src="images/bootstrap-solid.png" />
</div>

<div class="item">
	<img src="images/css3-logo.png" />
</div>

<div class="item">
	<img src="images/html-logo.png" />
</div>

<div class="item">
	<img src="images/gitlogo.png" />
</div>

<a class="left carousel-control" href="#tech-el" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
0

Pierwszy wydaje się ok, tylko nie wiem po co section, a nie normalny div

0

@czysteskarpety A dlaczego nie section?
"The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document."
Wydaje mi się, że section będzie dobrym semantycznym rozwiązaniem.

0

offtop: masz błąd gramatyczny

<section class="par">
	Technologies that I using
</section> 

Albo "technologies that I am using" albo "technologies I use"

<section> jest do grupowania tematycznie contentu. Czyli ja bym zamknął sekcję za karuzelą.
jest to ostateczność, jak już nie masz wyboru.
jest to najbardziej ogólny tag z możliwych. Polecam te dwa linki: http://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div

http://www.w3schools.com/html/html5_new_elements.asp

Jeśli chcesz mieć dobre pozycjonowanie, to używaj odpowiednich tagów z ich przeznaczeniem.

0

Ok, dzięki!

1 użytkowników online, w tym zalogowanych: 0, gości: 1