{"id":10227,"date":"2026-11-01T10:31:59","date_gmt":"2026-11-01T07:31:59","guid":{"rendered":"https:\/\/www.yunuskaytan.com\/?p=10227"},"modified":"2026-11-01T10:31:59","modified_gmt":"2026-11-01T07:31:59","slug":"html-de-liste-etiketleri-ul-ol-li","status":"publish","type":"post","link":"https:\/\/www.yunuskaytan.com\/en\/yk\/html-de-liste-etiketleri-ul-ol-li\/","title":{"rendered":"HTML’de Liste Etiketleri (ul ol li)"},"content":{"rendered":"

Web sayfalar\u0131nda bilgiyi d\u00fczenli, okunabilir ve hiyerar\u015fik bir bi\u00e7imde sunmak kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik bir \u00f6neme sahiptir. Metin bloklar\u0131 aras\u0131na s\u0131k\u0131\u015fm\u0131\u015f maddeleri ay\u0131rt etmek zor oldu\u011fundan, taray\u0131c\u0131lara bu yap\u0131lar\u0131n birer liste oldu\u011funu bildirmemiz gerekir. HTML liste etiketleri, hem kullan\u0131c\u0131lar\u0131n i\u00e7eri\u011fi daha rahat taramas\u0131n\u0131 sa\u011flar hem de arama motorlar\u0131 ile ekran okuyucu yaz\u0131l\u0131mlar\u0131n sayfa yap\u0131s\u0131n\u0131 do\u011fru anlamas\u0131na yard\u0131mc\u0131 olur.<\/p>\n\n\n\n

HTML Liste Yap\u0131s\u0131n\u0131n Temelleri<\/h2>\n\n\n\n

HTML ortam\u0131nda listeler olu\u015fturulurken iki ana par\u00e7a kullan\u0131l\u0131r: Listenin t\u00fcr\u00fcn\u00fc belirleyen kapsay\u0131c\u0131 etiket ve listenin i\u00e7erisindeki maddeleri temsil eden etiket. Bir listenin s\u0131ras\u0131z m\u0131 yoksa s\u0131ral\u0131 m\u0131 olaca\u011f\u0131n\u0131 belirlemek i\u00e7in kapsay\u0131c\u0131 etiketler devreye girerken, her bir madde li etiketi ile sarmalan\u0131r.<\/p>\n\n\n\n

Listelerin do\u011fru kullan\u0131m\u0131 sadece g\u00f6rsel d\u00fczenleme sa\u011flamaz, ayn\u0131 zamanda semantik web standartlar\u0131na uygun bir kodlama yap\u0131s\u0131 sunar. Web sitelerindeki navigasyon men\u00fcleri, ad\u0131m ad\u0131m i\u015flem rehberleri, \u00fcr\u00fcn \u00f6zellikleri ve kategori hiyerar\u015fileri do\u011frudan liste etiketleri kullan\u0131larak in\u015fa edilir.<\/p>\n\n\n\n

Liste Eleman\u0131: li Etiketi<\/h3>\n\n\n\n

A\u00e7\u0131l\u0131m\u0131 “list item” olan li etiketi, her listenin yap\u0131 ta\u015f\u0131d\u0131r. Kendi ba\u015f\u0131na ba\u011f\u0131ms\u0131z olarak kullan\u0131lamaz; mutlaka bir kapsay\u0131c\u0131 liste etiketinin (ul veya ol) do\u011frudan alt eleman\u0131 (child) olmak zorundad\u0131r. Taray\u0131c\u0131lar, li etiketlerini varsay\u0131lan olarak alt alta dizer ve ait olduklar\u0131 kapsay\u0131c\u0131ya g\u00f6re ba\u015flar\u0131na bir simge veya numara ekler.<\/p>\n\n\n\n

S\u0131ras\u0131z Listeler: ul Etiketi<\/h2>\n\n\n\n

A\u00e7\u0131l\u0131m\u0131 “unordered list” olan ul etiketi, maddelerin dizili\u015f s\u0131ras\u0131n\u0131n bir \u00f6nem ta\u015f\u0131mad\u0131\u011f\u0131 durumlar i\u00e7in tercih edilir. \u00d6rne\u011fin bir market al\u0131\u015fveri\u015fi listesinde veya bir cihaz\u0131n donan\u0131m \u00f6zelliklerinde maddelerin hangi s\u0131rayla yaz\u0131ld\u0131\u011f\u0131 s\u00fcreci de\u011fi\u015ftirmez.<\/p>\n\n\n\n

Varsay\u0131lan taray\u0131c\u0131 stilinde ul etiketi, maddelerin ba\u015f\u0131na i\u00e7i dolu daireler (bullet points) yerle\u015ftirir ve sol taraftan belirli bir girinti uygular.<\/p>\n\n\n\n

<ul>\n  <li>HTML temel yap\u0131s\u0131<\/li>\n  <li>CSS stillendirme kurallar\u0131<\/li>\n  <li>JavaScript programlama mant\u0131\u011f\u0131<\/li>\n<\/ul><\/code><\/pre>\n\n\n\n
Bu \u00f6rnekte ul etiketi listeyi ba\u015flat\u0131r ve kapsar. \u0130\u00e7erideki \u00fc\u00e7 li eleman\u0131 ise s\u0131ralamas\u0131 de\u011fi\u015fti\u011finde anlam\u0131 bozulmayacak \u00fc\u00e7 ayr\u0131 konuyu listeler. Taray\u0131c\u0131 bu listeyi maddelerin ba\u015f\u0131nda siyah birer nokta ile ekrana basacakt\u0131r.<\/p>\n\n\n\n
S\u0131ral\u0131 Listeler: ol Etiketi<\/h2>\n\n\n\n
A\u00e7\u0131l\u0131m\u0131 “ordered list” olan ol etiketi, liste maddeleri aras\u0131nda mant\u0131ksal, kronolojik ya da a\u015famal\u0131 bir s\u0131ran\u0131n bulundu\u011fu durumlarda kullan\u0131l\u0131r. Bir yemek tarifi, kurulum y\u00f6nergesi veya bir yar\u0131\u015fman\u0131n ilk \u00fc\u00e7 derecesi gibi maddelerin yer de\u011fi\u015ftirmemesi gereken durumlar i\u00e7in idealdir.<\/p>\n\n\n\n
Taray\u0131c\u0131lar ol etiketini i\u015flerken maddelerin ba\u015f\u0131na varsay\u0131lan olarak artan say\u0131lar (1, 2, 3…) yerle\u015ftirir.<\/p>\n\n\n\n
<ol>\n  <li>Sunucu ba\u011flant\u0131s\u0131n\u0131 kurun.<\/li>\n  <li>Veritaban\u0131 yap\u0131land\u0131rma dosyas\u0131n\u0131 a\u00e7\u0131n.<\/li>\n  <li>Gerekli izinleri onaylayarak i\u015flemi tamamlay\u0131n.<\/li>\n<\/ol><\/code><\/pre>\n\n\n\n
Yukar\u0131daki kod \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda ad\u0131mlar otomatik olarak numaraland\u0131r\u0131l\u0131r. Maddeler aras\u0131na sonradan yeni bir li eleman\u0131 eklendi\u011finde taray\u0131c\u0131 t\u00fcm numaralar\u0131 kendili\u011finden g\u00fcnceller, manuel olarak say\u0131 yazma ihtiyac\u0131 ortadan kalkar.<\/p>\n\n\n\n
S\u0131ral\u0131 Listelerde Kullan\u0131lan Nitelikler<\/h3>\n\n\n\n
S\u0131ral\u0131 listelerin davran\u0131\u015flar\u0131n\u0131 ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc HTML \u00f6znitelikleri (attributes) ile de\u011fi\u015ftirmek m\u00fcmk\u00fcnd\u00fcr.<\/p>\n\n\n\n
    \n
  • type niteli\u011fi: Numaraland\u0131rma t\u00fcr\u00fcn\u00fc belirler. Varsay\u0131lan rakamlar yerine b\u00fcy\u00fck harf (A), k\u00fc\u00e7\u00fck harf (a), Roma rakamlar\u0131 (I veya i) atanabilir.<\/li>\n\n
  • start niteli\u011fi: Listenin birden de\u011fil, belirtilen herhangi bir say\u0131sal de\u011ferden ba\u015flamas\u0131n\u0131 sa\u011flar.<\/li>\n\n
  • reversed niteli\u011fi: Listenin geriye do\u011fru say\u0131lmas\u0131n\u0131 sa\u011flar.<\/li>\n<\/ul>\n\n\n\n
    <ol type=\"A\" start=\"3\">\n  <li>\u00dc\u00e7\u00fcnc\u00fc a\u015fama<\/li>\n  <li>D\u00f6rd\u00fcnc\u00fc a\u015fama<\/li>\n<\/ol><\/code><\/pre>\n\n\n\n
    Bu \u00f6rnekte type \u00f6zniteli\u011fine “A” verilerek alfabetik s\u0131ralama se\u00e7ilmi\u015f, start de\u011ferine “3” verilerek listenin alfabenin \u00fc\u00e7\u00fcnc\u00fc harfi olan “C” harfinden ba\u015flamas\u0131 sa\u011flanm\u0131\u015ft\u0131r.<\/p>\n\n\n\n
    \u0130\u00e7 \u0130\u00e7e Listeler (Nested Lists)<\/h2>\n\n\n\n
    Karma\u015f\u0131k bilgi mimarilerinde bir liste maddesinin alt\u0131nda alt kategorilerin yer almas\u0131 gerekebilir. HTML’de i\u00e7 i\u00e7e liste olu\u015ftururken yap\u0131lan en yayg\u0131n hata, yeni bir ul veya ol etiketini do\u011frudan kapsay\u0131c\u0131 listenin i\u00e7ine koymakt\u0131r. Do\u011fru standart, alt listenin bir li etiketinin i\u00e7ine yerle\u015ftirilmesidir.<\/p>\n\n\n\n
    <ul>\n  <li>Frontend Teknolojileri\n    <ul>\n      <li>HTML<\/li>\n      <li>CSS<\/li>\n    <\/ul>\n  <\/li>\n  <li>Backend Teknolojileri\n    <ul>\n      <li>Node.js<\/li>\n      <li>Python<\/li>\n    <\/ul>\n  <\/li>\n<\/ul><\/code><\/pre>\n\n\n\n
    Bu kod yap\u0131s\u0131nda “Frontend Teknolojileri” isimli li etiketi kapanmadan hemen \u00f6nce yeni bir ul listesi a\u00e7\u0131lm\u0131\u015ft\u0131r. Taray\u0131c\u0131 bu hiyerar\u015fiyi alg\u0131lar ve alt listeyi daha i\u00e7eriden ba\u015flatarak genellikle madde imi simgesini farkl\u0131la\u015ft\u0131r\u0131r (\u00f6rne\u011fin i\u00e7i bo\u015f daireye d\u00f6n\u00fc\u015ft\u00fcr\u00fcr).<\/p>\n\n\n\n
    Liste Etiketlerinin CSS ile \u00d6zelle\u015ftirilmesi<\/h2>\n\n\n\n
    Modern web tasar\u0131m\u0131nda liste etiketleri yaln\u0131zca metin s\u0131ralamak i\u00e7in de\u011fil, men\u00fc ve navigasyon \u00e7ubuklar\u0131 (navbar) geli\u015ftirmek i\u00e7in de standart kabul edilir. Ancak bu tasar\u0131mlarda varsay\u0131lan nokta simgelerine ve kenar bo\u015fluklar\u0131na ihtiya\u00e7 duyulmaz.<\/p>\n\n\n\n
    CSS kullanarak listelerin varsay\u0131lan davran\u0131\u015flar\u0131 kolayca s\u0131f\u0131rlanabilir ve yatay bir d\u00fczen olu\u015fturulabilir.<\/p>\n\n\n\n
    ul.ozel-menu {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  gap: 15px;\n}<\/code><\/pre>\n\n\n\n
    Bu CSS blo\u011fu bir men\u00fcye uyguland\u0131\u011f\u0131nda:<\/p>\n\n\n\n
      \n
    • list-style-type \u00f6zelli\u011fi none yap\u0131larak ba\u015ftaki noktalar gizlenir.<\/li>\n\n
    • margin ve padding de\u011ferleri s\u0131f\u0131rlanarak taray\u0131c\u0131n\u0131n varsay\u0131lan girintileri kald\u0131r\u0131l\u0131r.<\/li>\n\n
    • display \u00f6zelli\u011fi flex yap\u0131larak alt alta dizilen maddelerin yatayda yan yana gelmesi sa\u011flan\u0131r.<\/li>\n\n
    • gap \u00f6zelli\u011fi ile men\u00fc elemanlar\u0131 aras\u0131nda d\u00fczenli bo\u015fluk b\u0131rak\u0131l\u0131r.<\/li>\n<\/ul>\n\n\n\n
      Semantik Web ve Eri\u015filebilirlik A\u00e7\u0131s\u0131ndan \u00d6nemi<\/h2>\n\n\n\n
      Birbirini takip eden ba\u011flant\u0131lar\u0131 veya metinleri salt span veya div etiketleriyle alt alta getirmek g\u00f6rsel olarak bir liste gibi alg\u0131lanabilir; fakat yaz\u0131l\u0131msal olarak bir liste niteli\u011fi ta\u015f\u0131maz. Ekran okuyucu kullanan g\u00f6rme engelli bir ziyaret\u00e7i sayfay\u0131 incelerken, do\u011fru kodlanm\u0131\u015f bir html liste yap\u0131s\u0131yla kar\u015f\u0131la\u015ft\u0131\u011f\u0131nda sistem “Bu liste 5 \u00f6\u011feden olu\u015fuyor” gibi net bir bildirim yapar. Bu durum kullan\u0131c\u0131lar\u0131n sayfada nerede oldu\u011funu anlamalar\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n\n\n\n
      \u00d6zet ve Sonraki Ad\u0131mlar<\/h2>\n\n\n\n
      HTML’de ul etiketi s\u0131ras\u0131z, ol etiketi ise s\u0131ral\u0131 listelerin kapsay\u0131c\u0131s\u0131d\u0131r. Her iki yap\u0131da da listenin elemanlar\u0131 li etiketi ile tan\u0131mlan\u0131r. Kodlama yaparken li etiketlerinin do\u011frudan liste kapsay\u0131c\u0131s\u0131 alt\u0131nda yer almas\u0131na ve i\u00e7 i\u00e7e listelerde do\u011fru hiyerar\u015finin kurulmas\u0131na dikkat edilmelidir.<\/p>\n\n\n\n
      Bir sonraki ad\u0131mda, liste etiketlerini nav etiketi ile birle\u015ftirip CSS Flexbox \u00f6zelliklerini kullanarak tamamen responsive bir site men\u00fcs\u00fc kodlamay\u0131 deneyebilirsiniz.<\/p>","protected":false},"excerpt":{"rendered":"
      HTML’de i\u00e7erikleri d\u00fczenli sunman\u0131n temel yolu olan ul, ol ve li liste etiketlerini s\u0131f\u0131rdan ve pratik \u00f6rneklerle \u00f6\u011frenin.<\/p>","protected":false},"author":1,"featured_media":10228,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[226],"tags":[234,543,241,542,302],"class_list":["post-10227","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-ve-css","tag-css","tag-frontend","tag-html","tag-html-liste","tag-web-gelistirme"],"yoast_head":"\nHTML'de Liste Etiketleri (ul ol li) - Yunus KAYTAN<\/title>\n<meta name=\"description\" content=\"HTML liste etiketleri olan ul, ol ve li kullan\u0131m\u0131n\u0131, s\u0131ral\u0131 ve s\u0131ras\u0131z listelerin yap\u0131s\u0131n\u0131 ve CSS \u00f6zelle\u015ftirme y\u00f6ntemlerini bu rehberde ke\u015ffedin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.yunuskaytan.com\/en\/yk\/html-de-liste-etiketleri-ul-ol-li\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML'de Liste Etiketleri (ul ol li) - Yunus KAYTAN\" \/>\n<meta property=\"og:description\" content=\"HTML liste etiketleri olan ul, ol ve li kullan\u0131m\u0131n\u0131, s\u0131ral\u0131 ve s\u0131ras\u0131z listelerin yap\u0131s\u0131n\u0131 ve CSS \u00f6zelle\u015ftirme y\u00f6ntemlerini bu rehberde ke\u015ffedin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yunuskaytan.com\/en\/yk\/html-de-liste-etiketleri-ul-ol-li\/\" \/>\n<meta property=\"og:site_name\" content=\"Yunus KAYTAN\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-01T07:31:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/html-de-liste-etiketleri-ul-ol-li-kapak.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"yunuskaytan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"yunuskaytan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-liste-etiketleri-ul-ol-li\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-liste-etiketleri-ul-ol-li\\\/\"},\"author\":{\"name\":\"yunuskaytan\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#\\\/schema\\\/person\\\/be66986fb499da83a5685de34f68d15a\"},\"headline\":\"HTML’de Liste Etiketleri (ul ol li)\",\"datePublished\":\"2026-11-01T07:31:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-liste-etiketleri-ul-ol-li\\\/\"},\"wordCount\":1074,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-liste-etiketleri-ul-ol-li\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/blog-kapak\\\/html-de-liste-etiketleri-ul-ol-li-kapak.jpg\",\"keywords\":[\"css\",\"frontend\",\"html\",\"html liste\",\"web gelistirme\"],\"articleSection\":[\"HTML ve CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-liste-etiketleri-ul-ol-li\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-liste-etiketleri-ul-ol-li\\\/\",\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-liste-etiketleri-ul-ol-li\\\/\",\"name\":\"HTML'de Liste Etiketleri (ul ol li) - Yunus KAYTAN\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-liste-etiketleri-ul-ol-li\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-liste-etiketleri-ul-ol-li\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/blog-kapak\\\/html-de-liste-etiketleri-ul-ol-li-kapak.jpg\",\"datePublished\":\"2026-11-01T07:31:59+00:00\",\"description\":\"HTML liste etiketleri olan ul, ol ve li kullan\u0131m\u0131n\u0131, s\u0131ral\u0131 ve s\u0131ras\u0131z listelerin yap\u0131s\u0131n\u0131 ve CSS \u00f6zelle\u015ftirme y\u00f6ntemlerini bu rehberde ke\u015ffedin.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-liste-etiketleri-ul-ol-li\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-liste-etiketleri-ul-ol-li\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-liste-etiketleri-ul-ol-li\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/blog-kapak\\\/html-de-liste-etiketleri-ul-ol-li-kapak.jpg\",\"contentUrl\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/blog-kapak\\\/html-de-liste-etiketleri-ul-ol-li-kapak.jpg\",\"width\":1200,\"height\":630,\"caption\":\"HTML'de Liste Etiketleri (ul ol li)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-liste-etiketleri-ul-ol-li\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\\\/\\\/www.yunuskaytan.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML’de Liste Etiketleri (ul ol li)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#website\",\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/\",\"name\":\"Yunus KAYTAN\",\"description\":\"Bili\u015fim, Siber G\u00fcvenlik, Siber Su\u00e7lar ve Sosyal M\u00fchendislik\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.yunuskaytan.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#organization\",\"name\":\"Bili\u015fim, Siber G\u00fcvenlik, Siber Su\u00e7lar ve Sosyal M\u00fchendislik\",\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/cropped-BILISIM-VE-SIBER-GUVENLIK.png\",\"contentUrl\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/cropped-BILISIM-VE-SIBER-GUVENLIK.png\",\"width\":400,\"height\":109,\"caption\":\"Bili\u015fim, Siber G\u00fcvenlik, Siber Su\u00e7lar ve Sosyal M\u00fchendislik\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#\\\/schema\\\/person\\\/be66986fb499da83a5685de34f68d15a\",\"name\":\"yunuskaytan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g\",\"caption\":\"yunuskaytan\"},\"sameAs\":[\"http:\\\/\\\/www.yunuskaytan.com\"],\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/en\\\/yk\\\/author\\\/yunuskaytan\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML'de Liste Etiketleri (ul ol li) - Yunus KAYTAN","description":"HTML liste etiketleri olan ul, ol ve li kullan\u0131m\u0131n\u0131, s\u0131ral\u0131 ve s\u0131ras\u0131z listelerin yap\u0131s\u0131n\u0131 ve CSS \u00f6zelle\u015ftirme y\u00f6ntemlerini bu rehberde ke\u015ffedin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.yunuskaytan.com\/en\/yk\/html-de-liste-etiketleri-ul-ol-li\/","og_locale":"en_US","og_type":"article","og_title":"HTML'de Liste Etiketleri (ul ol li) - Yunus KAYTAN","og_description":"HTML liste etiketleri olan ul, ol ve li kullan\u0131m\u0131n\u0131, s\u0131ral\u0131 ve s\u0131ras\u0131z listelerin yap\u0131s\u0131n\u0131 ve CSS \u00f6zelle\u015ftirme y\u00f6ntemlerini bu rehberde ke\u015ffedin.","og_url":"https:\/\/www.yunuskaytan.com\/en\/yk\/html-de-liste-etiketleri-ul-ol-li\/","og_site_name":"Yunus KAYTAN","article_published_time":"2026-11-01T07:31:59+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/html-de-liste-etiketleri-ul-ol-li-kapak.jpg","type":"image\/jpeg"}],"author":"yunuskaytan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yunuskaytan","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-liste-etiketleri-ul-ol-li\/#article","isPartOf":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-liste-etiketleri-ul-ol-li\/"},"author":{"name":"yunuskaytan","@id":"https:\/\/www.yunuskaytan.com\/#\/schema\/person\/be66986fb499da83a5685de34f68d15a"},"headline":"HTML’de Liste Etiketleri (ul ol li)","datePublished":"2026-11-01T07:31:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-liste-etiketleri-ul-ol-li\/"},"wordCount":1074,"commentCount":0,"publisher":{"@id":"https:\/\/www.yunuskaytan.com\/#organization"},"image":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-liste-etiketleri-ul-ol-li\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/html-de-liste-etiketleri-ul-ol-li-kapak.jpg","keywords":["css","frontend","html","html liste","web gelistirme"],"articleSection":["HTML ve CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.yunuskaytan.com\/yk\/html-de-liste-etiketleri-ul-ol-li\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-liste-etiketleri-ul-ol-li\/","url":"https:\/\/www.yunuskaytan.com\/yk\/html-de-liste-etiketleri-ul-ol-li\/","name":"HTML'de Liste Etiketleri (ul ol li) - Yunus KAYTAN","isPartOf":{"@id":"https:\/\/www.yunuskaytan.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-liste-etiketleri-ul-ol-li\/#primaryimage"},"image":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-liste-etiketleri-ul-ol-li\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/html-de-liste-etiketleri-ul-ol-li-kapak.jpg","datePublished":"2026-11-01T07:31:59+00:00","description":"HTML liste etiketleri olan ul, ol ve li kullan\u0131m\u0131n\u0131, s\u0131ral\u0131 ve s\u0131ras\u0131z listelerin yap\u0131s\u0131n\u0131 ve CSS \u00f6zelle\u015ftirme y\u00f6ntemlerini bu rehberde ke\u015ffedin.","breadcrumb":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-liste-etiketleri-ul-ol-li\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yunuskaytan.com\/yk\/html-de-liste-etiketleri-ul-ol-li\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-liste-etiketleri-ul-ol-li\/#primaryimage","url":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/html-de-liste-etiketleri-ul-ol-li-kapak.jpg","contentUrl":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/html-de-liste-etiketleri-ul-ol-li-kapak.jpg","width":1200,"height":630,"caption":"HTML'de Liste Etiketleri (ul ol li)"},{"@type":"BreadcrumbList","@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-liste-etiketleri-ul-ol-li\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/www.yunuskaytan.com\/"},{"@type":"ListItem","position":2,"name":"HTML’de Liste Etiketleri (ul ol li)"}]},{"@type":"WebSite","@id":"https:\/\/www.yunuskaytan.com\/#website","url":"https:\/\/www.yunuskaytan.com\/","name":"Yunus KAYTAN","description":"Information Technology, Cybersecurity, Cybercrimes and Social Engineering","publisher":{"@id":"https:\/\/www.yunuskaytan.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.yunuskaytan.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.yunuskaytan.com\/#organization","name":"Information Technology, Cybersecurity, Cybercrimes and Social Engineering","url":"https:\/\/www.yunuskaytan.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.yunuskaytan.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/2021\/07\/cropped-BILISIM-VE-SIBER-GUVENLIK.png","contentUrl":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/2021\/07\/cropped-BILISIM-VE-SIBER-GUVENLIK.png","width":400,"height":109,"caption":"Bili\u015fim, Siber G\u00fcvenlik, Siber Su\u00e7lar ve Sosyal M\u00fchendislik"},"image":{"@id":"https:\/\/www.yunuskaytan.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.yunuskaytan.com\/#\/schema\/person\/be66986fb499da83a5685de34f68d15a","name":"yunuskaytan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g","caption":"yunuskaytan"},"sameAs":["http:\/\/www.yunuskaytan.com"],"url":"https:\/\/www.yunuskaytan.com\/en\/yk\/author\/yunuskaytan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/posts\/10227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/comments?post=10227"}],"version-history":[{"count":1,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/posts\/10227\/revisions"}],"predecessor-version":[{"id":10232,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/posts\/10227\/revisions\/10232"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/media\/10228"}],"wp:attachment":[{"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/media?parent=10227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/categories?post=10227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/tags?post=10227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}