HTML ve CSS yazım kuralları, kodun düzenli, okunabilir ve standartlara uygun olmasını sağlamak için önemlidir. Aşağıda temel HTML ve CSS yazım kurallarını bulabilirsiniz:
HTML Yazım Kuralları:
-
Doctype Belgesi:
- HTML belgesinin başında, belge türünü ve sürümünü belirten bir doctype belgesi kullanılmalıdır.
<!DOCTYPE html> -
HTML Kök Elementi:
- HTML belgesi,
<html>elementi ile başlamalıdır velangözelliği ile dil belirtilmelidir.
<html lang="tr"> - HTML belgesi,
-
Meta Karakter Seti:
- Karakter seti tanımlaması, HTML belgesinin
<head>bölümünde kullanılmalıdır.
<meta charset="UTF-8"> - Karakter seti tanımlaması, HTML belgesinin
-
Mobil Cihaz Uyumlu Görünüm:
- Mobil cihazlara uyumlu görünüm için
<meta>etiketi eklenmelidir.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - Mobil cihazlara uyumlu görünüm için
-
Başlık Elementi:
- Sayfanın başlığını tanımlamak için
<title>elementi kullanılmalıdır.
<title>Web Sayfam</title> - Sayfanın başlığını tanımlamak için
-
CSS Bağlantısı:
- CSS dosyası, HTML belgesine bağlanmalıdır. Bu genellikle
<head>bölümünde yapılır.
<link rel="stylesheet" href="style.css"> - CSS dosyası, HTML belgesine bağlanmalıdır. Bu genellikle
-
JavaScript Bağlantısı:
- JavaScript dosyası kullanılıyorsa, bu dosya da HTML belgesine bağlanmalıdır.
<script src="script.js"></script> -
Doğru Etiket Kullanımı:
- HTML etiketleri doğru ve uygun şekilde kullanılmalıdır. Açılış ve kapanış etiketleri düzgün bir şekilde eşleşmelidir.
<p>Paragraf içeriği</p>
CSS Yazım Kuralları:
-
CSS Seçiciler:
- Doğru elementleri seçmek için CSS seçicileri kullanılmalıdır.
body { font-family: 'Arial', sans-serif; } -
Stil Kuralları:
- CSS kuralları, bir özellik ve değeri içermelidir.
h1 { color: #0066cc; } -
Stil Gruplama:
- İlgili stiller gruplanabilir.
h1, h2, h3 { font-family: 'Helvetica', sans-serif; } -
CSS Önem Sırası:
- Stil tanımlamaları belirli bir öncelik sırasına göre uygulanır. Özel durumlar haricinde en spesifik seçici daha yüksek önceliklidir.
.container h1 { color: #ff0000; /* Daha spesifik bir seçici */ } -
Kenar Boşlukları ve Ayıraçlar:
- Kodun okunabilirliği artırmak için kenar boşlukları ve girintiler kullanılmalıdır.
body { margin: 0; padding: 20px; } -
CSS Vendor Önekleri:
- Tarayıcı uyumluluğu için bazı özelliklerde vendor önekleri kullanılmalıdır.
.box { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
Bu yazım kuralları, HTML ve CSS kodlarınızı düzenli ve standart bir şekilde yazmanıza yardımcı olacaktır. Bu kurallara uymak, kodunuzu daha sürdürülebilir ve bakımı daha kolay hale getirecektir