Connect with us

Hi, what are you looking for?

HTML

HTML Dersleri: Heading Yapısı

HTML Dersleri: HTML'e Giriş 101
HTML Dersleri: HTML'e Giriş 101

Bugün Siberdefter olarak HTML Dersleri serimize devam ediyoruz. Heading, sadece HTML’de değil bir çok veri işaretleme yapısında önemli bir yapıdır. Bu yapı bize sıralı bir başlık yapısı kurmamızı olanak sağlıyor.

Bir web sitesi oluştururken bazı şeylerin sırası olmak zorunda ki bunlardan ilki ise başlık yapısı. Sitemizi ilgili sayfasında mutlaka bir başlık olmalı:

Örneklemem gerekir ise bu yazıyı okuduğunuz sayfada bir H1 seviyesinde başlık var, bu makalenin başlığını belirtiyor.

<h1>HTML Dersleri: Heading Yapısı</h1>
<h1>Hakkımızda</h1>
<h1>İletişim</h1>

Makale sayfaları, kurumsal sayfalar kısaca her bir web sitesinin ilgili sayfasının başlığı dosya içerisinde H1 seviyesinde belirtilmelidir ve bir başlık asla H2 ya da H3 olmaz, yalnızca ve yalnızca alt başlıklar H2,H3,H4 olarak ilerlemelidir.

Örnek vermem gerekirse bir makale sayfasının HTML yapısı şöyle gözükür:

Advertisement. Scroll to continue reading.
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tesla'nın Hisse Senetleri Neden Yüksek? - Siberdefter</title>
</head>
<body>
    <h1>Tesla'nın Hisse Senetleri Neden Yüksek?</h1>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Assumenda quod perferendis quasi harum eius dolor optio ipsa eligendi, eos sint voluptates dicta et neque modi, obcaecati pariatur numquam, incidunt deserunt!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam ex cum nobis necessitatibus deleniti! Magnam exercitationem eius aliquam blanditiis laborum, explicabo beatae, itaque est nulla quae voluptatem quas. Veniam magni aperiam necessitatibus delectus provident aut molestiae commodi quidem earum excepturi fugit unde similique animi nulla quod, temporibus ad beatae vel quia cum obcaecati architecto illum ducimus. Rem, velit vel sint voluptate laborum soluta sed a ipsa reiciendis sapiente eius id ad dicta, mollitia ab odio?</p>
    <h2>Tesla'dan Hisse Senedi Nasıl Alınır?</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore placeat vel accusamus blanditiis similique id, itaque dolor expedita animi cumque ut repellendus vero, maxime, culpa quos necessitatibus quo inventore? Architecto et repudiandae suscipit minus dicta est quasi voluptatem maxime alias! In magni ut dolorem quae suscipit quas quo amet corporis.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum possimus consequatur non ad enim quibusdam assumenda? Exercitationem perspiciatis saepe ex est dignissimos consequuntur, voluptatem repudiandae! Aliquam nihil delectus dolore sequi facilis distinctio placeat, expedita quis eligendi commodi esse eum perferendis officiis quasi molestias tenetur dolorem aperiam laudantium cum rerum excepturi? Corrupti ipsum impedit officia vitae, expedita vero optio ad quisquam eligendi asperiores mollitia saepe dicta error aspernatur veritatis amet! Reprehenderit quisquam eos fuga qui, consectetur eum ratione!</p>
    <h3>Tesla'ya en çok yatırım kişi kim?</h3>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias doloribus officia accusantium molestiae! Impedit beatae magni ipsam quod quis hic voluptatibus provident, id deleniti aperiam nemo quibusdam, natus vel consequuntur!</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem nobis doloremque fugiat quos facilis harum possimus impedit natus ex! Sapiente voluptate nostrum accusantium fuga reprehenderit tempora repellat ipsum modi dicta.</p>
</body>
</html>
  • <head> etiketi sayfanın önemli bilgilerini taşır, burası arama motorları ve tarayıcı içindir. Kullanıcıya yansımaz.
  • <title> etiketi web sitesinin ana başlığıdır, bu başlık arama motorları ve tarayıcılar için hazırlanır. SEO için önemlidir.
  • <body> etiketi kullanıcıya yansıyan kısımdır, buradaki kodlar tarayıcı tarafından derlenir ve kullanıcıya düzgün çıktısı verilir.

Şimdi ise headinglerden bahsetelim:

  • <h1> Birincil başlık etikedir, yalnızca sayfanın başlığını içerir, genelde <title> etiketi ile aynı içeriğe sahiptir.
  • <h2> İkincil başlık etiktedir. Alt başlıklarda kullanılır.
  • <h3> Üçüncül başlık etiktedir. Alt başlıklarda kullanılır.
  • <h4> Dördüncül başlık etiktedir. Alt başlıklarda kullanılır.
  • <h5> Beşincil başlık etiktedir. Alt başlıklarda kullanılır.
  • <h6> Altıncıl başlık etiktedir. Alt başlıklarda kullanılır.

Written By

Siberdefter'de Chief Executive Officer

Click to comment

Leave a Reply

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Editörün Tavsiyeleri

Yazılım

Merhaba Siberdefter okurları, bugün yazılımcıların kod yazarken ortaya koyduğu yanlışları anlatacağız. Bildiğiniz üzere programalama dilleri ile bir çok kategoride hazır siBstem kurabiliriz; İçerik Yönetim...

HTML

Siberdefter’de sizlere eğitim verdiğimiz SiberKurs Programımıza hepiniz hoş geldiniz. Bugün HTML Derslerine başlangıç yapıyoruz ve HTML Derslerimizin ilk bölümünde HTML‘i tanıyacağız. HTML kelimesinin açılımı Hyper Text...

Advertisement