17 Basit HTML Etiketi

Merhaba. Bu yazımızda web sitesi tasarımındaki en büyük aşama olan HTML (Hyper Text Markup Language) nedir anlatarak kullanabileceğiniz 17 basit HTML Etiketine yer vereceğiz.

İçerik Listesi Gizle ↑

HTML Nedir ?

17 basit HTML Etiketi

<!DOCTYPE html>

<html>

<head>

<title>

<meta>

<body>

<h1>

<p>

<br>

<em>

<a>

<img>

<ol>

<ul>

<table>

HTML Nedir ?

İşaretleme dili olan Html, web sayfalarının hazırlanmasında kullanılan sistemdir. Bir programlama dili olmayan Html bilgisayarlarımızda kullandığımız web sitelerinin oluşturulmasında kullanılır.

Bu dosyaları herhangi internet tarayıcısı (Google Chrome, Safari veya Mozilla Firefox) kullanarak görüntüleyebilirsiniz. Tarayıcı HTML dosyasını okur ve internet kullanıcılarının görebileceği içeriğe dönüştürür.

HTML ile çalışırken basit kod yapıları (etiketler ve nitelikler) kullanarak website sayfasını şekillendirebiliriz. Örneğin, <p> başlangıcı ve </p> kapanış etiketleri arasına metin ekleyerek bir paragraf oluşturabiliriz.

<p>HTML'de paragraf bu şekilde eklenir..</p>

<p>Birden fazla ekleyebilirsiniz!</p>

HTML dilindeki en önemli etiketler, başlıklar, paragraflar ve satır atlama etiketleridir.

<!DOCTYPE html>

Bu etikete her HTML belgesinin başında ihtiyaç duyacaksınız. Bu etiket, bir tarayıcının görüntülediği sayfanın HTML olduğunu ve en son sürüm olan HTML5’i bilmesini sağlar.

<html>

Bu, tarayıcıya sayfanın HTML içerdiğini söyleyen bir başka etikettir. <html> etiketi DOCTYPE etiketinden hemen sonra gelir. Dosyanızın sonunda bir </html> etiketi kullanarak önceden açtığınız <html> etiketini kapatmak zorundasınız.

<head>

<head> etiketi, dosyanın başlık bölümünü başlatmaya yarar. Bu etiket içine girilenler, sayfayı ziyaret eden kişiler tarafından görüntülenemez. Bu etikete girilen kodlar genellikle arama motorları için meta veriler ile sınırlıdır.

<title>

Bu etiket sayfanızın başlığını belirler. Sayfanın başlığını ayarlamanız için yapmanız gereken tek şey, koymak istediğiniz başlığı etiketin içine yazmak ve etiketi sonlandırmak.

<meta>

Title etiketi gibi, meta veriler de sayfanızın başlık alanına yerleştirilir. Meta veriler çoğunlukla arama motorları tarafından kullanılır ve sayfanızda neler olduğunu hakkında arama motorlarını bilgilendirmeyi amaçlar.

Meta etiketini kullanabileceğiniz çok fazla alan var, fakat bunlardan bazılarını şöyle sıralayabiliriz:

description: Sayfanın temel açıklaması.
keywords: Sayfada yer alanlarla ilgili anahtar kelimeler.
author: Sayfanın yazarı.
viewport: Sayfanın tüm cihazlarda iyi görünmesini sağlar.

<meta name="description" content="Basit HTML Dersleri">

<meta name="keywords" content="HTML, kod, etiket">

<meta name="author" content="Yazar Adı">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

“Viewport”, sayfanın mobil ve masaüstü cihazlarda iyi görüntülendiğinden emin olmak için her zaman “width = device-width, initial scale = 1.0” değerlerine sahip olmalıdır.

<body>

HTML dosyamız içindeki en geniş içerikli etiket budur. Ziyaretçiye görünen herşey bu etiketin yorum alanında tanımlanır. Ayrıca bu etiket içinde kullanılan bileşenlerle de sayfamızın bazı temel özelliklerini belirtebiliriz.

<h1>

<h1> etiketi, h1-h6 etiketleri arasında en büyük öneme sahip olan etikettir ve genellikle sayfanın başlığını belirtmek için kullanılır. İdeal kullanımı ise her sayfada sadece bir adet h1 etiketine yer verilmesidir.

<h2> etiketi ile sayfada yer alan yazıları bölüm bölüm ayırabilirsiniz. Herhangi konuyu daha fazla detaylandırmak için de <h3> <h4> <h5> ve <h6> etiketlerini kullanabilirsiniz.

<p>

<p> etiketi yeni bir paragrafa başlamak için kullanılır. Örnek kullanım şekli aşağıdaki gibidir.

<p>İlk paragraf burasıdır.</p>

<p>İkinci paragraf da burası.</p>

<br>

<br> etiketi ise bir alt satıra geçmenize yarar. Üç cümlenin sonunda bu etiketi kullanarak alt satıra geçebilir ve yeni bir cümle ya da bir fotoğraf ile yazmaya devam edebilirsiniz. Örnek kullanım şekli aşağıdaki gibidir.

Yazıyorum.<br>

Sadece yazıyorum.

<strong>

Bu etiket, önemli şeyleri vurgulamada kullanılır. Strong etiketini kullandığınız metinler kalın olarak görünür ve sayfayı ziyarete gelen kullanıcılara yahut arama motorlarına kalınlaştırılan bu metinlerin önemli olduğunu açıklar.

<em>

<b> ve <strong> etiketleri gibi, <em> ve <i> etiketleri de benzer özellikler taşır. <em> etiketi vurgulanan metni tanımlamaya yarar ve metnin italik görünmesini sağlar.

<em>Vurgulanan bir satır.</em>

<a>

<a> etiketi, bağlantılar oluşturmanıza olanak sağlar.

<img>

Sayfaya bir görsel eklemek istiyorsanız, <img> etiketini kullanmanız gerekmektedir.

<ol>

Bu etiket, sıralı bir liste oluşturmanızı sağlar. Listeye bir öğe eklemek için ise <li> etiketini kullanmanız gerekmektedir.

<ul>

<ul> etiketi, <ol> etiketinin aksine, sıralı bir liste oluşturmaktan çok uzaktır. Listede yer alan öğeleri numaralandırma olmadan listelemek için kullanılır. Örnek kullanımı aşağıdadır.

<ul>

<li>Deneme.</li>

<li>Deneme 2.</li>

</ul>