Web Geliştirme İçin Temel HTML Etiketleri

Web Geliştirme İçin Temel HTML Etiketleri

Web sayfaları için en temel HTML etiketlerinin başlık, paragraf, liste ve resim etiketleri olduğunu söyleyebiliriz Bu etiketler, sayfa içeriğini düzenlemek için kullanılır Başlık etiketleri, sayfanın konusunu özetlerken, paragraf etiketi sayfa içeriğini oluşturan metinleri düzenler Liste etiketleri ise, sayfada sıralı veya sırasız liste oluşturmak için kullanılır ve resim etiketi de sayfadaki görsel materyalleri düzenlemek için kullanılan önemli bir etikettir
Başlık etiketleri, web sayfalarında hem okuyucular hem de arama motorları için önemli bir rol oynar Sayfada kullanılan başlık etiketleri, sayfanın içeriği hakkında bir özet sunar ve sayfayı okuyucular için daha anlaşılır hale getirir Ayrıca, SEO açısından da büyük bir öneme sahiptirler Arama motorları, sayfanın konusunu anlamak için başlık etiketlerine çok önem vermektedir Bu

Web Geliştirme İçin Temel HTML Etiketleri

Web sayfalarında kullanılan en temel etiketler başlık, paragraf, liste ve resim etiketleridir. Bu etiketler sayfa içeriğini düzenlemek için kullanılır. Başlık etiketleri sayfanın konusu hakkında genel bilgi verirken, paragraf etiketi sayfa içeriğini oluşturan metinleri düzenlemek için kullanılır. Liste etiketleri ise, sayfada sıralı veya sırasız liste oluşturma amacıyla kullanılır. Resim etiketi de sayfadaki görsel materyalleri düzenlemek için kullanılan önemli bir etikettir.


Temel Etiketler

Bir web sayfasının oluşturulması için en temel HTML etiketleri başlık, paragraf, liste ve resim etiketleridir. Bu etiketler sayfada görüntülenen içeriğin düzenlenmesine ve anlaşılır hale gelmesine yardımcı olur. Başlık etiketleri, web sayfasının hiyerarşik düzeni için önemlidir. H1 etiketi, sayfanın ana başlığıdır ve sayfanın konusunu özetlerken, H2 etiketi diğer önemli başlıklar için kullanılır. Paragraf etiketi ise sayfa içeriğindeki metinlerin düzenli bir şekilde gösterilmesini sağlar. Sıralı ve sırasız liste etiketleri sayfadaki bilgilerin önceliklerini belirlemek için kullanılırken, resim etiketleri sayfa içeriğine estetik bir görünüm kazandırır.


Başlık Etiketleri

Başlık etiketleri, web sayfalarında hem okuyucular hem de arama motorları için önemli bir rol oynar. Sayfada kullanılan başlık etiketleri, sayfanın içeriği hakkında bir özet sunar ve sayfayı okuyucular için daha anlaşılır hale getirir. Ayrıca, SEO açısından da büyük bir öneme sahiptirler.

HTML'de, altı farklı başlık etiketi kullanılır, bunlar H1, H2, H3, H4, H5 ve H6'dır. H1 etiketi, sayfanın en önemli başlığıdır ve sayfanın konusunu özetler. Genellikle bir sayfada sadece bir kez kullanılır. Diğer başlık etiketleri ise sayfada farklı konulara ayrılmak için kullanılır ve sayfa hiyerarşisini belirlemeye yardımcı olur.

Özellikle arama motorları, sayfanın konusunu anlamak için başlık etiketlerine çok önem verirler. Bu nedenle, sayfanızın SEO'sunu iyileştirmek için uygun başlık etiketlerini kullanmanız önemlidir. Ayrıca, okuyuculara doğru ve anlaşılır bir şekilde bilgi iletmek için başlık etiketlerinin doğru bir şekilde kullanılması da önemlidir.


H1 Etiketi

H1 etiketi, web sayfanızın en önemli başlığıdır ve sayfanın konusunu özetler. H1 etiketi, tüm web sayfalarının olmazsa olmaz başlığıdır ve anahtar kelimelerinizi burada kullanmanız, sayfanızın SEO açısından yüksek bir performans elde etmesini sağlayabilir. Özellikle Google kaynaklı arama motorları, H1 etiketlerinde kullanılan anahtar kelimelerin önemli olduğunu vurgulamaktadır.


H2 Etiketi

H2 etiketi, web sayfalarında daha küçük bir başlık olarak kullanılır ve sayfada H1 etiketiyle aynı seviyede yer alır. H1 etiketi sayfanın ana başlığı iken, H2 etiketi sayfa içeriğindeki alt başlıkları tanımlamak için kullanılır. Bu etiket tipik olarak içerik bölümlerine ayrılmış sayfalarda sıkça kullanılır ve sayfanın okunabilirliğini arttırır.

H2 etiketi ayrıca web sayfalarında SEO açısından önemlidir. Başlık etiketleri arama motoru optimizasyonunda çok önemlidir ve H2 etiketi sayfada kullanılan anahtar kelimelerin ön plana çıkmasını sağlar. Bu nedenle, web geliştiricilerin H2 etiketini doğru şekilde kullanmaları önemlidir.


Paragraf Etiketi

Paragraf etiketi, web sayfalarında içerik oluşturmanın en temel yoludur. Bu etiket ile sayfa içeriği yazılarak, sayfanın düzgün görünmesi sağlanır. Paragraf etiketi genellikle <p> ve </p> etiketleri arasında yazılan metinlerle oluşturulur. Bu etiket sayfa içeriğinde kullanıcıların okumak istedikleri bilgileri, fikirleri ve düşünceleri paylaşabilmenizi sağlar. Bunun yanı sıra, sayfalar arası gezinti yaparken, arama motorlarında sıralamada yükselme ve SEO optimizasyonu açısından da önemlidir.

Bir paragraf etiketi, web sayfasında yer alan tek bir cümleden, birkaç cümleye kadar değişebilir. Bu etiket aynı zamanda sayfa içeriğindeki farklı bölümlerin de ayrılmasına yardımcı olur. Ayrıca, paragraf etiketi sayfa içeriğinde kullanılan diğer etiketlerle de birlikte kullanılabilir. Örneğin, resim veya video etiketleri ile birlikte, ses, renk ve değişiklikler gibi diğer özelliklerle birleştirilebilir.


Liste Etiketleri

Liste etiketleri, web sayfalarında sıralı veya sırasız listeler oluşturmak için kullanılır. Sıralı liste etiketi

    kullanılırken, sırasız liste etiketi
      kullanılır. Bu etiketler sayfada okuyucunun hangi bilgiye öncelik vermesine yardımcı olur ve sayfada düzenli bir görünüm sunar.

      Sıralı liste etiketi

        kullanılarak oluşturulur. Bu etiketin içinde
      1. etiketi ile liste öğeleri belirtilir. Örneğin:

        1. İlk öğe
        2. İkinci öğe
        3. Üçüncü öğe

        Sırasız liste etiketi

          kullanılarak oluşturulur. Bu etiketin içinde de
        • etiketi ile liste öğeleri belirtilir. Örneğin:

          • İlk öğe
          • İkinci öğe
          • Üçüncü öğe

          Bu etiketler sayfada bilgiyi düzenlemek ve okuyucunun öncelik vermesine yardımcı olmak için önemlidir. Sıralı ve sırasız liste etiketlerini kullanarak sayfalarınızı daha düzenli hale getirebilirsiniz.


          Sıralı Liste Etiketi

          Sıralı liste etiketi (

            ) kullanımı, sayfalarda bilgilerin sıralı olarak gösterilmesine yardımcı olur. Bu etiket ile liste içindeki veriler belirli bir sıralama ile gösterilir ve sayfadaki düzen daha düzenli hale gelir. Sıralı liste etiketleri genellikle numaralandırılmış bir liste şeklinde görüntülenir. Bu etiket ile oluşturulan liste örneği aşağıdaki gibidir:

            1. Birinci madde
            2. İkinci madde
            3. Üçüncü madde

            Bu örnekte, liste numaralandırılmıştır ve her bir maddesi numaralandırılmış şekilde gösterilmektedir. Sıralı liste etiketi kullanarak, sayfalarınızda listelenmesi gereken herhangi bir bilgi için numaralandırılmış bir liste oluşturabilirsiniz. Örneğin, bir yemek tarifi sayfası için, malzemeleri sırasıyla göstermek için sıralı liste etiketi kullanılabilir. Sıralı liste etiketi kullanımı, web sayfasının daha profesyonel görünmesine ve okunabilirliğinin artmasına yardımcı olur.


            Sırasız Liste Etiketi

            Sırasız Liste Etiketi genellikle konu başlıklarında ve maddeleme yapılması gereken yerlerde kullanılır. Bu etiketin kullanımı sayesinde liste içindeki veriler sıralama yapmadan gösterilmektedir. Sırasız liste etiketi

              ile başlar ve listeye ait her bir öğe
            • etiketi ile tanımlanır. Örneğin, bir restoran menüsü listesi için sırasız bir liste kullanılabilir. Bu menü listesi, sırasız liste etiketi kullanılarak doğru şekilde oluşturulabilir.

              • Çorba
              • Salata
              • Ana Yemek
              • Tatlı

              Bu şekilde oluşturulan menü listesi, sayfanın okunabilirliğini artırır ve müşterilerin seçim yapması için daha kolay hale getirir. Sırasız liste etiketi, sıralı liste etiketine göre daha esnek bir kullanım sağlar. Ayrıca, sırasız liste etiketi kullanarak maddeleme yapmak sayfadaki görsel düzeni de olumlu yönde etkiler.


              Resim Etiketi

              Resim etiketi, HTML kodu kullanılarak web sayfasında görsel öğelerin gösterilmesi için kullanılır. Sayfalarınızda görüntülemek istediğiniz resimler için <img> etiketi kullanılır. Bu etiket, sayfanızda görsel olarak zenginleştirilmiş bir içerik sunmanın yanı sıra, okuyucularınızın dikkatini çekmek için de kullanışlıdır.

              <img> etiketi, kaynak dosyasının URL adresi ve alternatif bir metin içerebilir. Bu alternatif metin, sayfa yüklenirken resim için tasarlanmış bir yer tutucu gösterilirken, özellikle görme engelli kullanıcıların resmin ne hakkında olduğunu anlamalarına yardımcı olur. Ayrıca, resmin boyutu ve hizalaması da etiketle belirlenebilir.

              • <img> etiketinin temel özellikleri şöyledir:
                • src: Resmin URL adresi
                • alt: Alternatif metin
                • width: Resmin genişliği
                • height: Resmin yüksekliği
                • align: Resmin hizalaması

              Bu özellikler, resim etiketinin kullanımı sırasında belirtilerek resmin daha doğru bir şekilde gösterilmesine yardımcı olur. Örneğin;

              <img src="resim/adam.jpg" alt="Adam Resmi" width="200" height="200" align="middle">

              Yukarıdaki kodda, "src" özelliği resmin URL adresi için kullanılırken, "alt" özelliği alternatif metni belirtir. "Width" ve "height" özellikleri sayesinde resmin boyutları, "align" özelliği ile ise resmin hizalaması belirlenir.