7.1 <figure> elementi
HTML-də <figure> və <figcaption> taglarının istifadəsi, şəkillər və digər multimedia elementləri ilə izahatlar əlavə etmək üçün semantik bir yol təqdim edir. Bu taglar məzmun strukturunu yaxşılaşdırmağa, həm istifadəçilər, həm də axtarış sistemləri üçün daha əlçatan və başa düşülən etməyə kömək edir. Gəlin bu elementləri daha ətraflı nəzərdən keçirək.
<figure> elementi, sənədin qalan hissəsini ilustrasiya edən və ya izah edən müstəqil məzmunu ifadə etmək üçün istifadə olunur. Burada şəkil, diaqram, video, audio, cədvəl və ya hətta kod bloku ola bilər. Adətən <figure> elementi <figcaption> elementi ilə birlikdə istifadə olunur, hansı ki, <figure> məzmununa izahat əlavə edir.
Sintaksis
<figure>
<!-- Burada istənilən multimedia elementi ola bilər, məsələn, şəkil -->
</figure>
İstifadə nümunələri:
Nümunə 1: Yazılı izah olan şəkil
<figure>
<img src="example.jpg" alt="Şəkil nümunəsi">
<figcaption>Şəklin məzmununu izah edən yazı</figcaption>
</figure>
Nümunə 2: Yazılı izah olan cədvəl
<figure>
<table>
<tr>
<th>Başlıq 1</th>
<th>Başlıq 2</th>
</tr>
<tr>
<td>Məlumat 1</td>
<td>Məlumat 2</td>
</tr>
</table>
<figcaption>Cədvələ aid izahat yazısı</figcaption>
</figure>
7.2 <figcaption> elementi
<figcaption> elementi <figure> elementinin məzmununa başlıq əlavə etmək üçün istifadə olunur. O, həm <figure> elementinin məzmunundan əvvəl, həm də sonra, developerin seçimlərinə və ya dizayn tələblərinə əsasən yerləşdirilə bilər.
Sintaksis
<figure>
<!-- figure elementinin məzmunu -->
<figcaption>Məzmun üçün başlıq</figcaption>
</figure>
İstifadə nümunələri:
Nümunə 1: Şəkildən sonra başlıq
<figure>
<img src="landscape.jpg" alt="Mənzərə">
<figcaption>Dağlar və göllə gözəl mənzərə</figcaption>
</figure>
Nümunə 2: Şəkildən əvvəl başlıq
<figure>
<figcaption>Dağlar və göllə gözəl mənzərə</figcaption>
<img src="landscape.jpg" alt="Mənzərə">
</figure>
7.3 Əlçatanlıq və SEO
<figure> və <figcaption> elementlərindən istifadə saytınızın əlçatanlığını və SEO-nu yaxşılaşdırır. Əlilliyi olan insanlar tərəfindən istifadə edilən ekran oxuma proqramları, <figcaption> semantik təkstinə görə şəkilin kontekstini daha yaxşı anlayır. Axtarış sistemləri də HTML sənəd strukturasını nəzərə alır, bu da səhifənin indeksləşdirilməsini və reytinqini yaxşılaşdırmağa kömək edir.
Müxtəlif kontekstlərdə istifadə nümunələri:
Nümunə 1: Diaqram yerləşdirmək
<figure>
<img src="chart.png" alt="Satış artımını göstərən diaqram">
<figcaption>Son rüb ərzində satış artımını göstərən diaqram</figcaption>
</figure>
Nümunə 2: Başlıqla videoməzmun
<figure>
<video controls>
<source src="example.mp4" type="video/mp4">
Sizin brauzeriniz video dəstəkləmir.
</video>
<figcaption>Məhsulun işini göstərən video nümunəsi</figcaption>
</figure>
Nümunə 3: Şərhli kod
<figure>
<pre>
<code>
function helloWorld() {
console.log('Salam, dünya!');
}
</code>
</pre>
<figcaption>JavaScript-də "Salam, dünya!" konsolda göstərən funksiyanın nümunəsi</figcaption>
</figure>
7.4 CSS ilə Stil və Tərtibat
<figure> və <figcaption> elementlərinin CSS ilə stili, vizual olaraq cəlbedici tərtibat yaratmağa və kontentin qavranmasını təkmilləşdirməyə kömək edir.
Stil nümunəsi:
figure {
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
text-align: center;
}
figcaption {
font-style: italic;
color: #555;
margin-top: 10px;
}
<figure>
<img data-max-width="800" data-id="ef101655-fef4-40b9-8b6c-f0c02494a747" src="https://cdn.javarush.com/images/article/ef101655-fef4-40b9-8b6c-f0c02494a747/800.jpeg" alt="nature">
<figcaption>Təbiətin gözəl mənzərəsi</figcaption>
</figure>
<figure>
<img src="nature.jpg" alt="Təbiət">
<figcaption>Təbiətin gözəl mənzərəsi</figcaption>
</figure>
<figure> və <figcaption> elementlərinin istifadəsi, veb-səhifələrə başlıqlı multimedia kontenti əlavə etmək üçün semantik və strukturlaşdırılmış bir yol təqdim edir. Bu elementlər yalnız əlçatanlığı və SEO-nu təkmilləşdirmir, həm də istifadəçilər üçün kontenti daha aydın və strukturlaşdırılmış edir.
GO TO FULL VERSION