Atribut HTML p. Tag - apa itu dan apa adanya. Mengapa tag h1-h6 diperlukan?

Menandai

Menandai

digunakan untuk membagi halaman menjadi paragraf. Itu hanya dapat berisi teks dan tag sebaris (tag tingkat baris). Pada saat yang sama, tag itu sendiri

Ini berbasis blok, yaitu membuat jeda baris sebelum dan sesudahnya. Selain itu, ini menetapkan margin ruang kosong di atas dan di bawah dari sisinya ke konteks sekitarnya, sehingga halaman tersebut secara visual dibagi menjadi beberapa paragraf. Ukuran bidang tanda

Tergantung pada jenis browser, namun kira-kira sama dengan tinggi satu baris teks pada halaman saat ini.

Tag penutup

adalah opsional. Jika tidak ada, maka akhir paragraf akan dianggap sebagai tag non-inline pertama yang terletak di bawah kode HTML halaman.

Atribut

Atribut pribadi:

  • align - Mengatur perataan horizontal konten paragraf.
  • accesskey - Mengatur tombol pintas untuk fokus pada elemen HTML.
  • class - menentukan nama tag class atau kelas yang digunakan dalam CSS (Cascading Style Sheets).
  • dir - menunjukkan arah teks di dalam elemen.
  • - menentukan nama pengidentifikasi tag HTML yang dapat digunakan sebagai “anchor” atau dalam style sheet.
  • lang - menunjukkan bahasa yang digunakan untuk menulis teks di dalam elemen HTML.
  • style - diperlukan untuk menerapkan gaya CSS sebaris ke tag.
  • tabindex - mengatur urutan tab antar elemen (tombol Tab).
  • title - menampilkan tooltip saat Anda mengarahkan mouse ke elemen HTML.

Jenis tanda

Tujuan: teks (blok).

Model tag: blok (blok, level blok).

Mungkin berisi: tag sebaris, teks biasa dan Karakter khusus HTML(ilmu tentang cara menghafal).

Tag pembuka: diperlukan. Tag penutup: tidak dibutuhkan.

Sintaksis

isi

Contoh HTML: Menggunakan Tag P

seodon.ru - Menggunakan tag P

Salah satu kesalahan yang dilakukan pembuat website pemula adalah menggunakan gambar yang tidak seragam atau warna cerah sebagai latar belakang informasi teks pada halaman. Hal ini tidak hanya menyulitkan membaca, tetapi juga berdampak buruk pada penglihatan pengguna, memaksa mereka untuk mengintip setiap baris dan membuat mata mereka tegang jika tidak perlu.

Kesalahan lainnya adalah penggunaan warna terbalik “di mana-mana”, ketika warna teks secara visual lebih terang daripada latar belakang, misalnya latar belakang hitam - teks putih. Teknik ini cukup dapat diterapkan, tetapi hanya jika teknik ini benar-benar sesuai.



Dukungan versi HTML

Versi: kapan:HTML 4.01HTML5XHTML 1.0XHTML 1.1
Mendukung:YaYaYaYa

Dukungan peramban

Peramban:Internet ExplorerGoogle ChromeMozilla FirefoxOpera
Versi: kapan:6.0 dan lebih tinggi2.0 dan lebih tinggi2.0 dan lebih tinggi9.2 dan lebih tinggi3.1 dan lebih tinggi
Mendukung:YaYaYaYaYa

Dan hari ini kita akan melihat lebih dekat apa itu tag html dan mereka atribut Misalnya hal, br, jam; dan juga peran apa yang mereka mainkan? nilai atribut tag yang terkandung dalam dokumen html.

Sebelum saya mulai, saya ingin meminta maaf atas ketidakhadiran saya yang lama. Faktanya karena sibuk dengan satu proyek, saya terpaksa berhenti mengupdate blog untuk sementara dan agak terlambat dari jadwal. Namun kini semuanya sudah berakhir dan saya berharap dapat terus menjaga ritme yang sama dan rutin memberikan materi segar.

Sekarang saya kembali ke topik yang dimaksud. Sebagai bagian dari pengenalan dasar-dasar html, saya sudah menulis tentang struktur dokumen html, dimana saya juga memberikan penjelasan tentang tag utama html, tag head dan body yang harus ada di setiap dokumen, serta tag khusus.disebut deklarasi.

Bagian ini juga memberikan informasi mengenai cara menggunakan fitur pembuatan daftar. Selain itu, Anda dapat mengenal formulir di situs dan secara terpisah dengan tag yang memungkinkan Anda mendesain berbagai macam formulir: .

Setelah menerima banyak harapan dari Anda, para pembaca yang budiman, melalui formulir umpan balik dan melalui email, saya memutuskan untuk kembali ke awal dan menjelaskan lebih detail tentang tag apa saja yang ada, bagaimana klasifikasinya dan apa saja atribut dari tag html. . Jadi, mari kita mulai.

Tag HTML berpasangan dan tunggal, blok dan baris: p, br, jam

Seperti yang mungkin sudah Anda pahami dari postingan blog sebelumnya, tag adalah unit struktural utama dari Hyper Text Markup Language (HTML). Pada umumnya, kumpulan taglah yang menentukan kode html yang menjelaskan dokumen tertentu (misalnya, salah satu halaman sumber daya Anda).

Tag diklasifikasikan menjadi tag berpasangan dan tunggal, serta tag blok dan baris. Sekarang, mari kita lihat inti perbedaannya menggunakan contoh tag yang paling populer dan sering digunakan. Omong-omong, di banyak sumber Anda dapat menemukan nama elemen blok dan inline, ketahuilah bahwa keduanya adalah hal yang sama.

Untuk memulainya, saya akan memberikan definisi singkat. Tag html berpasangan- elemen yang memiliki tag pembuka dan penutup, yang di antaranya terdapat konten; elemen tunggal tidak memiliki tag penutup. Elemen blok adalah elemen yang menempati seluruh lebar yang tersedia; tingginya ditentukan oleh konten. Oleh karena itu, secara default, beberapa elemen blok akan ditempatkan di bawah satu sama lain.


Elemen blok dapat disarangkan satu sama lain, tetapi tidak semuanya, akan dibahas lebih lanjut nanti. Tag sebaris biasanya berisi teks atau elemen sebaris lainnya, namun Anda tidak diperbolehkan menempatkan tag blok di dalam tag sebaris. Tag sebaris, tidak seperti tag blok, terletak di satu baris dan dipindahkan ke baris lain hanya jika perlu, ketika ruang lebar yang tersedia habis.


Mungkin bagi pemula masih sedikit rumit dan ada kebingungan di kepala, tapi ini awal yang baik. Semuanya akan menjadi lebih jelas di masa depan, saya yakin akan hal ini. Selain itu, saya beralih ke contoh spesifik berdasarkan tag umum, dengan mencatat setiap kali elemen mana, sebaris atau blok, berpasangan atau tunggal, yang masing-masing dimiliki.

Mari kita mulai dengan tag p, yang digunakan setiap webmaster setiap menitnya, saya tidak melebih-lebihkan. Nama unsur ini berasal dari huruf awal kata bahasa Inggris paragraf (paragraph, paragraf). Ini berfungsi untuk menyorot bagian-bagian teks, sehingga lebih mudah dipahami oleh pembaca. Saat ini, misalnya saya sedang menulis artikel dan menyorot teks postingan dari waktu ke waktu menjadi paragraf, Anda dapat melihatnya.

Dengan memecah teks menjadi beberapa bagian dan memudahkan pengunjung sumber daya untuk memahami materi, Anda dapat meningkatkan sumber daya secara signifikan untuk mesin pencari, yang penting dalam promosinya.

Pada intinya, elemen p tentu saja berpasangan, karena memiliki tag pembuka dan penutup. Pada saat yang sama, ini adalah elemen blok yang hanya dapat berisi elemen sebaris. Misalnya, jika Anda menulis beberapa teks dalam beberapa baris dan mengapitnya di antara tag p pembuka dan penutup, maka browser akan tetap menampilkannya dalam satu baris dan hanya jika teks tersebut tidak muat dalam satu baris maka teks tersebut akan ditransfer.

Tag HTML Tag p - elemen blok Isi tag p

Namun untuk menampilkan teks ini dalam beberapa baris, Anda perlu menggunakan elemen br (dari bahasa Inggris “break”), yang bersifat tunggal, yaitu tidak memiliki tag penutup, dan juga merupakan elemen sebaris. Dengan menempatkannya di akhir setiap baris teks yang merupakan isi dari tag p, kita mendapatkan opsi yang diinginkan:

tag HTML
Tag p - elemen blok
Isi tag p

Menulis tag br hampir gratis. Artinya, Anda dapat memilih beberapa baris sekaligus dan meletakkan tag ini di akhir masing-masing baris, atau Anda cukup menulis teks dengan cara biasa dan menyisipkan br di tempat di mana tanda hubung seharusnya dibuat. Jumlah elemen sebaris br yang disertakan dalam konten tag blok p bisa sebanyak yang diinginkan. Artinya, teks sebanyak yang Anda suka dapat ditulis pada baris baru.

Sekarang mari kita lihat tag sederhana lainnya, yang akan kita bahas lebih detail di akhir artikel. Kita berbicara tentang tag jam (dari bahasa Inggris "aturan horisontal"- garis horizontal), yang tunggal, tetapi sekaligus blok, karena secara default menempati seluruh lebar yang mungkin. Ini menggambarkan garis horizontal sederhana yang berguna dalam membagi konten halaman menjadi bagian-bagian logis. Ini bisa berupa pemisahan teks, kumpulan gambar, atau beberapa komponen desain lainnya.

Tampilan garis horizontal ini bergantung pada browser tempat halaman tersebut dilihat, kode html yang berisi elemen ini. Selain itu, tampilan garis ini, seperti tampilan elemen lainnya, dapat diedit menggunakan berbagai atribut. Sekarang kita telah dengan lancar mendekati komponen lain dari topik kita hari ini, yaitu konsep atribut tag html.

Atribut tag HTML dan klasifikasinya

Atribut tag html memungkinkan Anda memberi mereka karakteristik tambahan dan mendiversifikasi tampilan elemen halaman web yang ditampilkan oleh browser. Setiap tag dapat memiliki beberapa atribut. Masing-masing berperan dalam membentuk desain area tertentu pada halaman website. Atribut ditulis di dalam tag pembuka setelah nama elemen itu sendiri. Jika ada beberapa atribut, urutannya tidak menjadi masalah; bisa apa saja.

Hampir setiap atribut mempunyai nilai (parameter) tersendiri. Secara umum, setiap tag tunggal atau berpasangan dapat direpresentasikan secara skematis sebagai berikut:


Harap dicatat bahwa untuk menunjukkan nilai suatu atribut, tanda sama dengan harus ditempatkan setelah nama atribut, dan nilai itu sendiri harus diapit dalam tanda kutip tunggal atau ganda. Atribut dapat hadir dalam tipe inline dan blok; dalam tag tunggal dan ganda.

Tentu saja, dalam kasus elemen tunggal, tidak akan ada tag penutup. Semua atribut dan nilainya ditulis di dalam tag pembuka dan harus dipisahkan dengan spasi, jika tidak, area terkait di browser tidak akan ditampilkan dengan benar. Ya, saya hampir lupa, beberapa atribut tidak boleh memiliki nilai. Tentu saja, tidak mungkin untuk mengurai semua tag dalam kombinasi dengan semua atribut yang mungkin, dan ini tidak masalah, yang utama adalah memahami mekanisme penggunaannya. Di halaman resmi Anda dapat mempelajari semua tag html yang direkomendasikan.

Benar, ada data yang sesuai dengan standar resmi HTML 4.01. Namun, penerapan HTML versi 5 terjadi dengan pesat, aturannya sudah diikuti oleh browser populer. Dan dalam bahasa markup hypertext versi baru, beberapa tag dan atribut tidak lagi valid, artinya tidak mematuhi standar HTML. Oleh karena itu, kami akan mengikuti perkembangan zaman dan di masa depan saya hanya akan menawarkan Anda tag dan atribut yang valid, kami juga akan belajar di masa depan untuk menghindari ketidakpatuhan terhadap standar kode HTML, materi tentang topik ini akan segera muncul.

Tapi mari kita lihat halaman resmi W3C, yang menyajikan tabel tag html yang direkomendasikan. Jika kita mengklik link dengan tag yang kita minati (untuk lebih jelasnya, mari kita ambil tag jam yang telah disebutkan, terutama karena kita akan melihat salah satu contohnya di bawah), maka kita akan diarahkan ke halaman web ini, di mana spesifikasinya mengenai elemen ini diberikan:


Semua atribut elemen dapat dibagi menjadi tiga kelompok:

  1. Grup Atribut Universal- berlaku untuk hampir semua tag html. Pada tangkapan layar di atas, mereka disorot dalam bingkai hijau
  2. Atribut Unik- satu set atribut unik untuk elemen ini (untuk tag jam pada gambar, atribut tersebut digarisbawahi dengan warna ungu: align, noshade, size, width). Spesifikasi html 5 menambahkan atribut warna baru yang menentukan warna garis horizontal.
  3. Acara- atribut ini diperlukan ketika beberapa tindakan diperlukan sebagai respons terhadap tindakan pengguna. Di tangkapan layar, mereka disorot dalam bingkai biru.

Informasi mengenai atribut juga dapat diperoleh di halaman W3C lainnya, dimana terdapat tabel dengan daftar lengkap atribut html:


Tabel ini memperlihatkan semua atribut untuk semua tag yang ada dalam bahasa markup hypertext. Di kolom "Elemen Terkait" di seberang atribut yang diinginkan, tag di mana atribut ini dapat digunakan ditandai. Kolom “Jenis” menunjukkan jenis data yang dapat digunakan sebagai nilai atribut. Misalnya, atribut align (yang menentukan perataan suatu elemen) memiliki tiga kemungkinan nilai (kiri, tengah, kanan).

Jika kolom "Dept" berisi huruf D, maka atribut ini tidak disarankan untuk digunakan, jika tidak maka dokumen html tidak akan lolos validasi. Dalam hal ini, perlu menggunakan gaya CSS, yang, seperti telah saya catat, akan kita pelajari dalam waktu dekat. Hal ini diperlukan karena trennya adalah sebagian besar atribut dalam html 5 tidak digunakan lagi dan tampilan elemen harus ditentukan menggunakan css.

Omong-omong, informasi yang benar-benar lengkap dengan tag tambahan dan atributnya menurut versi html 5 disajikan di salah satu sumber terbaik, menurut saya, yang didedikasikan untuk mempelajari dasar-dasar html, yaitu htmlbook, dan dalam bahasa Rusia.

Cara menampilkan garis horizontal menggunakan tag hr

Kami akan bertindak progresif. elemen jam tanpa atribut mendefinisikan garis horizontal sederhana yang menempati seluruh lebar ruang (lihat contoh di atas). Dengan menerapkan berbagai atribut secara berturut-turut pada tag hr, kita akan mengubah tampilan garis horizontal.

Pertama, mari kita tulis atribut align dan width. Sedangkan untuk align, masuk akal untuk menggunakannya hanya jika atribut width ditentukan, yang menentukan lebar elemen (kurang dari lebar halaman). Izinkan saya mengingatkan Anda bahwa tag hr adalah elemen blok dan secara default menempati semua ruang lebar yang tersedia.

Nilai atribut lebar dapat berupa angka (dalam hal ini lebar akan ditentukan dalam piksel) atau persentase, yang menentukan lebar elemen sebagai sebagian kecil dari ruang yang tersedia. Nilai atribut ukuran dimasukkan dalam angka dan menentukan tinggi elemen (dalam hal ini, ketebalan garis horizontal). Jadi mari kita lihat sebuah contoh:

Selanjutnya, tambahkan atribut noshade di atas. Faktanya adalah ketika menggunakan tag hr, efek 3D (bayangan) digunakan secara default, Anda dapat melihatnya dengan melihat garis yang terletak tepat di atas. Dengan menentukan atribut noshade, kami melarang penggunaannya.

Sekarang mari kita coba menambahkan atribut color, yang akan menentukan warna garis horizontal. Perhatikan bahwa menggunakan atribut ini secara otomatis menonaktifkan efek 3D, jadi tidak diperlukan noshade. Sebagai nilainya kita menetapkan nama warnanya, misalnya “biru”.

Jadi, dengan menggunakan contoh spesifik p, br, hr, kita melihat bagaimana tag html, serta berbagai atribut yang digunakan, memengaruhi pembentukan berbagai elemen pada halaman web. Lanjutan topik ini akan segera saya terbitkan, jadi untuk menerima materi baru jangan lupa berlangganan update blog melalui RSS feed atau email. Oleh karena itu, izinkan saya untuk pamit dengan harapan terbaik.

Tag HTML adalah bahasa markup standar yang ditujukan untuk dokumen di Internet global. Berkat dia, semua halaman World Wide Web telah dibuat. Jika Anda melihat kode halaman yang Anda buka saat ini, Anda akan melihat sejumlah besar karakter alfabet dan numerik - ini adalah tag untuk HTML. Beberapa di antaranya sangat penting untuk optimasi mesin pencari situs web.

Apa itu tag judul?

Tag judul memiliki pengaruh paling besar terhadap bobot kata kunci di halaman web. Browser menampilkan judul artikel, yang menjadikan tag sebagai elemen penting dalam optimasi mesin pencari. Untuk menarik perhatian, judul artikel sebaiknya ditulis dalam bahasa yang dapat dipahami rata-rata orang dan memuat informasi yang cukup. Untuk kinerja yang lebih baik dari tag dalam nilai < judul > harus mengandung minimal 7 kata. Jika aturan ini diikuti, maka Anda akan memiliki kesempatan untuk menerima lalu lintas tambahan dari mesin pencari. Dan terakhir, judul harus sedekat mungkin maknanya dengan topik artikel itu sendiri.

Apa itu tag tampilan< h1>,< h2>…< h6>?

Tag tersebut adalah judul teks yang terletak tepat di dalam tag: Untuk kinerja situs yang lebih baik, tag

- tidak lebih dari lima kali. Tag untuk memformat dan menyusun halaman

-

digunakan dalam jumlah yang dibutuhkan, tetapi coba lakukan

Apa itu tag< meta>?

Dua meta tag sangat penting untuk SEO: deskripsi dan kata kunci. Mereka tidak ditampilkan di halaman, tetapi mesin pencari memperhitungkannya. Awalnya, kata kunci diciptakan untuk membuat semantik suatu dokumen lebih mudah dipahami oleh mesin pencari. Sekarang kata-kata yang mencerminkan esensi halaman Internet dimasukkan ke dalam tag ini.

Sedangkan untuk tag deskripsi, sebelumnya banyak kata yang dimasukkan ke dalamnya, sehingga mempengaruhi peringkat. Mesin pencari Yandex menghasilkan cuplikan berdasarkan nilai tag ini. Saat ini, banyak yang yakin bahwa deskripsi tidak diperlukan sama sekali, namun pengoptimal tetap menyarankan untuk mengisinya. Bagaimanapun, itu tidak akan merugikan.

Apa itu tag< kuat>,< b> dan< mereka> ?

Fungsi tanda - sorot teks pada halaman dengan huruf tebal. Itu muncul sedikit lebih lambat dari tag , namun meskipun demikian, ini juga diperhitungkan oleh mesin pencari. Untuk mengidentifikasi kata kunci dan memperkuat maknanya, pakar promosi merekomendasikan penggunaan tag penyorotan , .

Tag , Cetak miring kata-kata yang tertulis di antara keduanya. Bagi mesin pencari, hal tersebut tidak terlalu penting, namun penggunaannya akan berdampak positif pada halaman Internet.

merupakan tag yang fungsinya untuk menggarisbawahi bagian teks yang bersifat informatif. Dampaknya terhadap penelusuran tidak signifikan; melainkan digunakan untuk membuat desain halaman lebih ekspresif.

Apa itu tag< gambar>?

Gambar yang tersedia di halaman Internet ditampilkan di sana menggunakan tag . Ini memiliki banyak atribut, tetapi yang paling penting untuk mesin pencari adalah alt dan judul. Yang pertama bersifat informasi dan ditampilkan jika gambar tidak dapat dibuka, dan yang kedua berisi nama gambar. Itu muncul di browser jika Anda mengarahkan kursor ke gambar. Kedua atribut ini cukup penting bagi pengunjung dan mesin pencari (pada tingkat yang lebih tinggi), namun banyak webmaster yang mengabaikannya.

Tag paling sering digunakan saat mengedit halaman HTML - berkat tag tersebut, teks dibagi menjadi beberapa paragraf. Penggunaan berbagai tag yang tepat tidak hanya akan membantu mempromosikan situs Anda di mesin pencari, tetapi juga membuatnya lebih menarik bagi pengunjung.

adalah yang paling umum digunakan, karena mempengaruhi bobot kata kunci di halaman Internet. Jadi, di browser, judul artikel ditampilkan, yang menjadikan judul sebagai bagian penting dari mesin pencari. Seringkali, judul artikel ditulis dalam bahasa yang dapat dimengerti oleh kebanyakan orang dan harus berisi informasi yang cukup untuk menarik perhatian. Agar tag berfungsi dengan baik, nilai judul harus berisi minimal 7 kata. Jika aturan ini diikuti, maka Anda akan memiliki kesempatan untuk menerima lalu lintas tambahan dari mesin pencari. Dan terakhir, judul harus sedekat mungkin maknanya dengan topik artikel itu sendiri.

Apa itu tag tampilan

,

…

?

Tag tersebut adalah judul teks yang terletak langsung di halaman situs itu sendiri dan terletak di dalam tag lainnya …

. Untuk tag kinerja situs yang lebih baik

Dianjurkan untuk menggunakan hanya 1 kali, dan

- tidak lebih dari 5 kali. Namun Anda harus menggunakan tag untuk memformat dan menyusun halaman

-

dalam jumlah yang wajar.

Apa itu tag ?

Untuk bekerja di SEO, dua meta tag paling sering digunakan: deskripsi dan kata kunci. Mereka tidak ditampilkan di halaman, tetapi mesin pencari memperhitungkannya. Awalnya, kata kunci diciptakan untuk memudahkan mesin pencari memahami semantik suatu dokumen. Sekarang, kata-kata yang mencerminkan esensi halaman Internet dimasukkan ke dalam tag ini.

Sedangkan untuk tag deskripsi, sebelumnya banyak kata yang dimasukkan ke dalamnya, sehingga mempengaruhi peringkat. Mesin pencari Yandex menghasilkan cuplikan berdasarkan nilai tag ini. Saat ini, kebanyakan orang yakin bahwa deskripsi tidak diperlukan sama sekali, namun programmer merekomendasikan penggunaannya. Bagaimanapun, tidak ada kerugian yang akan terjadi.

Apa itu tag , , Dan ?

Menandai - sedang memformat, fungsinya untuk membuat teks pada halaman menjadi tebal. Tag ini muncul sedikit lebih lambat dari tag b, namun meskipun demikian, tag ini juga diperhitungkan oleh mesin pencari. Untuk mengidentifikasi kata kunci dan memperkuatnya, pakar promosi merekomendasikan penggunaan tag highlight.

- memformat kata yang dimasukkan ke dalamnya, menulisnya miring. Ini tidak terlalu penting bagi mesin pencari, tetapi penggunaannya akan berdampak positif pada halaman Internet.

merupakan tag yang juga digunakan dalam pemformatan, namun fungsinya untuk menggarisbawahi bagian teks yang bersifat informatif. Pengaruh tag ini terhadap penelusuran tidak signifikan, lebih sering digunakan untuk kecantikan.

Apa itu tag ?

Gambar yang ditampilkan pada halaman melakukan ini menggunakan tag . Tag ini memiliki jumlah atribut yang banyak, namun yang terpenting bagi mesin pencari adalah alt dan title. Alt - bersifat informasional, dan judul berisi nama gambar yang dapat dimasukkan

Namun tag yang paling sering digunakan dalam mengedit halaman HTML adalah

Ini adalah cara populer untuk memisahkan paragraf. Bagaimanapun, penggunaan tag apa pun hanya akan meningkatkan popularitas situs Anda di kalangan mesin pencari. Pastikan untuk menggunakannya dan bergerak maju.

Halo, para pembaca situs blog yang budiman. Hari ini kita akan mulai membahas tentang tag dalam bahasa Html yaitu tentang heading H1, H2, H3, H4, H5, H6, tentang paragraf P dan line break Br, serta tentang tag garis horizontal Hr, dengan contoh yaitu kita akan melihat penggunaan atribut dan Mari kita lihat di mana Anda dapat mengetahui semua kemungkinan atribut untuk setiap elemen dan melihat sintaks nilainya.

Perbedaan utama antara tag sebaris dan blok adalah tag sebelumnya dapat saling mengikuti lebarnya hingga kehabisan ruang, lalu digabungkan ke baris berikutnya.

Blokir elemen, secara default, coba menempati semua ruang yang tersedia dengan lebarnya dan oleh karena itu elemen blok berikutnya akan ditempatkan pada baris yang berbeda.

Sekarang mari kita mulai mempelajari secara sistematis semua kemungkinan tag di Html dan pada saat yang sama kita akan memberikan perhatian khusus pada jenis tag tersebut untuk memahami dengan jelas kemungkinan penggunaannya yang benar (valid). Struktur tag yang disederhanakan terlihat seperti ini:

Ada juga atribut untuk mereka (masing-masing memiliki setnya sendiri), yang memungkinkan Anda menambahkan properti tertentu ke elemen ini, tetapi kita akan membicarakannya menggunakan contoh spesifik.

Mari kita mulai melihat konsep heading yang dibentuk dengan menggunakan tag berpasangan H1, H2, H3, H4, H5, H6 (namanya berasal dari huruf pertama kata “Header”, yaitu “heading”). Mereka dirancang untuk memisahkan fragmen teks yang berbeda satu sama lain dan menandai kepentingannya tergantung pada levelnya. Dalam versi modern bahasa HTML, semua tag dan semua atribut yang diizinkan telah ditentukan dan dijelaskan sebelumnya.

Akibatnya, judul hanya dapat memiliki enam level dan, sebagai tambahan, elemen H1-H6 berbentuk kotak, yaitu. berusaha untuk mengambil semua ruang yang tersedia di seluruh lebar halaman. Namun mereka memiliki satu kekhasan - hanya elemen sebaris yang dapat dimasukkan ke dalam tag judul, meskipun faktanya, misalnya, Div yang sama memungkinkan Anda memasukkan tag blok lain di dalamnya.

Itu. browser tidak akan mengizinkan Anda, misalnya, untuk menyertakan header dari level lain di dalam header dari satu level, karena, saya ulangi, itu adalah elemen blok, tetapi mereka hanya boleh berisi huruf kecil. Oh bagaimana caranya.

Judul dengan level berbeda H1-H6 akan digambar di browser dengan font dengan ukuran berbeda (meskipun, menggunakan CSS, Anda dapat mengaturnya secara mutlak dengan ukuran, warna, dan jenis font apa pun untuk ditampilkan di browser, tetapi dalam Html murni, inilah aturannya) :

Jika kita mempertimbangkan tata letak situs dari sudut pandang kenyamanan promosi lebih lanjut (), maka perlu disebutkan bahwa seharusnya hanya ada satu judul tingkat H1 per halaman. Anda mungkin dapat menggunakan dua H1, tetapi lebih dari itu kemungkinan besar akan menimbulkan reaksi negatif dari mesin pencari ketika mereka mencari dokumen Anda. Tindakan Anda mungkin dianggap sebagai spam atau meningkatkan relevansi.

Juga tidak disarankan untuk melewatkan level heading, mis. Setelah H1, Anda harus menggunakan H2 untuk menyorot bagian teks yang kurang penting, dan seterusnya. Hal ini kecil kemungkinannya akan menimbulkan sanksi serius dari mesin pencari, tetapi lebih baik mengikuti logika dalam membuat level judul dalam kode Html.

Mesin pencari lebih mementingkan kata-kata yang terkandung dalam tag ini dibandingkan kata-kata yang hanya ada dalam teks. Kesimpulannya berikut ini adalah ketika menulis artikel, Anda harus menambahkan judul pada artikel yang Anda gunakan.

Ya, penggunaan judul dalam teks artikel membuatnya lebih visual dan membantu pembaca menavigasi kumpulan informasi dengan cepat. Saya pikir untuk pertama kalinya akan ada informasi yang cukup dan inilah saatnya untuk melanjutkan.

Paragraf, pemisah baris, dan garis horizontal HR dalam kode Html

Tag P berasal dari kata “paragraf”, namun lebih sering disebut juga paragraf. Mereka digunakan untuk menyorot bagian teks tertentu secara semantik, biasanya mencakup beberapa kalimat. Di antara paragraf yang dibentuk oleh elemen P secara vertikal, muncul ruang kosong yang memungkinkan memisahkan potongan teks yang logis secara visual satu sama lain.

Soalnya cukup sulit bagi seseorang untuk membaca teks monolit jika tidak dipecah menjadi potongan-potongan kecil yang terpisah. Misalnya, saya biasanya tidak mulai membaca artikel yang tidak dipecah menjadi paragraf dalam kode Html, karena sangat mengganggu.

Dengan memecahkan teks Anda sangat mengurangi ambang kelelahan pengunjung ke sumber daya Anda dan meningkatkan faktor pengguna (waktu yang dihabiskan pengguna di situs Anda dan), yang pada gilirannya berdampak positif pada promosi.

Untuk tujuan yang sama (menjaga perhatian pengguna dan mengurangi kelelahan saat membaca artikel), berbagai, dan terkadang, mungkin, ditambahkan ke teks.

Omong-omong, tag paragraf P, seperti yang mungkin sudah Anda perhatikan, adalah sepasang, tetapi menurut spesifikasi HyperText Markup Language 4.01, elemen penutupnya sepenuhnya tidak dibutuhkan. Dalam hal ini, browser harus mencari tahu di mana ia harus ditempatkan.

Karena P adalah elemen blok dan hanya elemen huruf kecil yang dapat muncul di dalamnya. Akibatnya, browser, setelah mendeteksi tag paragraf pembuka, mem-parsing kode lebih lanjut dan segera setelah menemukan elemen blok berikutnya (kemungkinan besar adalah P pembuka berikutnya), browser segera menyisipkan tag paragraf penutup di depannya. Dalam standar Html 5, kebebasan seperti itu kemungkinan besar tidak akan ada lagi dan dibutuhkan segera biasakan menutup semua tag dan tulis dengan huruf kecil saja.

Paragraf adalah elemen blok, jadi teks di dalam paragraf akan cenderung menempati seluruh ruang lebar yang tersedia. Artinya, jika Anda menulis syair dalam kode Html dokumen sebagaimana mestinya (setiap baris secara terpisah), dan menyertakan seluruh syair ini dalam tag paragraf P, maka di browser Anda akan melihat bahwa keempat baris Anda akan digabungkan menjadi satu dan akan menempati seluruh lebar ruang yang tersedia untuk teks.

Kami telah membahas secara rinci mengapa hal ini terjadi di artikel tentang. Berkat properti bahasa markup hiperteks ini (sejumlah karakter spasi putih dalam kode sumber akan digantikan dengan satu spasi saat ditampilkan di browser), Anda dapat memformat kode Anda dengan cara apa pun yang nyaman, tanpa takut mengganggu tampilannya di browser. halaman web.

Nah, jika Anda benar-benar perlu menulis kuatrain dalam bentuk yang berlaku umum, Anda bisa menggunakan HTML tambahan untuk tujuan ini

tag jeda baris yang disebut BR

(dari kata “istirahat”):

BR adalah elemen sebaris dan juga “kosong”, yaitu. tunggal (tidak memiliki elemen penutup). Seluruh fungsi BR adalah menyebabkan jeda baris saat menampilkan teks di browser (mirip dengan tombol Enter di editor teks mana pun).

Penulisan tag BR (line break) pada kode tidak diatur sama sekali. Anda dapat menulis seluruh teks bersama-sama dan menempatkan BR alih-alih spasi di tempat yang tepat, atau Anda dapat segera membagi teks menjadi beberapa baris dalam kode untuk kejelasan dan menempatkan BR di akhir baris atau di awal. Ini tidak mengubah esensinya.

SDM(singkatan dari kata “horizontal rule”, yaitu garis horizontal) adalah tag Html yang sangat sederhana yang menggambar garis horizontal (garis) di seluruh lebar dan ketebalan layar, tergantung pada browser tempat ia dilihat (pada dasarnya ini adalah penanda visual, yang, dengan analogi dengan tag judul, memungkinkan Anda memecah teks menjadi potongan-potongan logis untuk memudahkan asimilasi).

Itu "kosong" (tunggal), yaitu. tidak memiliki pasangan (tag penutup). Di samping itu, SDM adalah elemen blok, yaitu. secara default dibutuhkan seluruh lebar halaman yang tersedia untuknya.

Konsep atribut dan aturan penulisannya dalam tag Html

Mari kita lihat konsep atribut menggunakan elemen sederhana ini. Faktanya adalah kita dapat menambahkan atribut ke tag yang valid dan dijelaskan dalam validator WC3 untuk tag tersebut, sehingga memberikan konten properti yang kita butuhkan.

Misalnya, jika Anda memiliki beberapa paragraf (paragraf) dalam satu baris yang diapit oleh tag P yang sesuai, maka untuk mengubah tampilan salah satunya Anda hanya perlu menambahkan atribut yang diperlukan pada elemen P pembuka paragraf ini. Dalam kasus tag tunggal (kosong), tidak ada opsi untuk menambahkan atribut yang diperlukan.

Jadi, aturan pertama adalah atribut ditempatkan hanya di tag pembuka(yang penutup tidak pernah berisi apa pun). Satu elemen dapat berisi beberapa atribut, yang dipisahkan satu sama lain dan antara nama tag dengan spasi (kondisi wajib). Izinkan saya segera memberikan contoh penggunaannya untuk garis horizontal HR:

Jadi pertama-tama mari kita bahas sintaks atributnya. Disisipkan pada tag pembuka, ditulis dipisahkan dengan spasi (termasuk spasi setelah nama unsur) dan merupakan konstruksi yang mencantumkan nama, tanda sama dengan, dan ditulis dalam tanda petik (biasanya dipasangkan berpasangan. , tetapi standar ini juga mengizinkan nilai tanda kutip tunggal berpasangan). Urutan atribut dalam kode tag Html tidak penting.

Di sana saya memberikan tautan ke daftar semua tag HTML yang valid. Jika dalam daftar ini Anda mengklik nama elemen yang Anda minati (dalam kasus kami adalah HR), Anda akan dibawa ke halaman dengan spesifikasi rinci:

Semua atribut dari tag apa pun bisa membagi menjadi tiga kelompok:

  1. Umum - mereka dapat muncul di sebagian besar elemen dalam bahasa HTML. Pada gambar di atas, mereka berada di bagian bawah dan dikelilingi oleh bingkai merah. Sebenarnya, ada beberapa atribut yang umum (hanya enam), dan meskipun demikian, Anda tidak mungkin menggunakan semuanya dalam latihan Anda. Kemungkinan besar hanya ada empat - , judul dan gaya.
  2. Atribut peristiwa - diperlukan untuk memicu beberapa tindakan sebagai respons terhadap tindakan pengguna atau peristiwa sistem. Mereka lebih terkait dengan JavaScreet dan pada gambar di atas berada di bagian paling bawah (dilingkari dalam bingkai gelap).
  3. Unik - Setiap tag biasanya memiliki kumpulan atributnya sendiri, beberapa di antaranya mungkin tidak ditemukan sama sekali pada elemen lainnya. Jika kita mempertimbangkan garis horizontal HR, ia hanya memiliki empat atribut unik (align, noshade, size dan width). Semua grup lain yang ditentukan dalam tag HR (kecuali dua grup yang dijelaskan di atas) akan diabaikan oleh browser.

Contoh atribut pada tag garis horizontal HR

Nilai dari berbagai atribut dapat berupa angka sembarang (dll.) atau nilai dari kumpulan yang telah ditentukan, misalnya, seperti dalam kasus perataan untuk HR - kiri|tengah|kanan (Anda dapat menggunakan salah satu dari tiga perataan pilihan).

Secara umum, informasi tentangnya di validator WC3 dapat diperoleh tidak hanya di daftar tag Html, tetapi juga di daftar atribut, yang akan Anda temukan di tautan yang disediakan.

Daftar ini berisi semua opsi yang memungkinkan untuk semua tag yang tersedia dalam bahasa HTML. Kolom “Elemen Terkait” di seberang opsi yang Anda minati akan mencantumkan elemen di mana atribut ini dapat digunakan. Kolom “Jenis” menunjukkan jenis data yang dapat digunakan sebagai nilainya.

Misalnya pada baris yang digarisbawahi pada gambar untuk atribut align, untuk tag HR diperbolehkan menggunakan tiga nilai tetap saja yang tertera disana (kiri | tengah | kanan).

Kolom lain yang sangat penting adalah “Depr”. Jika atribut yang Anda minati pada kolom ini memiliki huruf D di sebelahnya, maka atribut tersebut penggunaannya tidak disarankan, namun Anda harus menggunakan gaya CSS yang sesuai untuk menggantikannya. Saat melihat spesifikasi tag, kami juga melihat bahwa di samping nama keempat atribut HR, tertulis kata “Deprecated” (tidak disarankan untuk digunakan).

Mari kita lihat atribut apa saja yang digunakan dengan elemen yang telah kita bahas di artikel ini (P, heading H1-H6 dan HR). Untuk semuanya Anda dapat menggunakan "sejajarkan", Karena semua elemen ini adalah elemen blok. Untuk elemen sebaris, atribut "align" tidak ada artinya.

Misalnya, jika Anda menambahkan "align" ke tag judul (seperti H1), Anda dapat mengatur perataan teks judul. Itu. Elemen blok akan menempati semua ruang yang tersedia lebarnya, tetapi konten header ini (teksnya) dapat disejajarkan ke kiri (default), kanan, atau tengah, atau lebarnya (ratakan - jarak antar kata berubah, seperti di kolom surat kabar).

Omong-omong, hal yang sama juga berlaku untuk tag Html paragraf P dan untuk wadah Div, jika Anda melihat lebih dekat pada tangkapan layar yang diberikan.

Untuk garis HR horizontal, atribut "align" akan menunjukkan keselarasan garis horizontal itu sendiri yang dibentuk oleh elemen tersebut. Namun tag HR adalah elemen blok dan cenderung menempati semua ruang yang tersedia lebarnya. Oleh karena itu, masuk akal untuk menggunakan "align" di dalamnya jika, bersamaan dengan itu, Anda tetapkan nilai untuk atribut "lebar".(lebar) kurang dari lebar halaman.

Nilai untuk "lebar" dapat berupa angka saja (ini akan mengatur lebar dalam piksel), atau Anda dapat menggunakan persentase dari total lebar yang tersedia untuk garis HR horizontal. Nilai atribut “ukuran” untuk tag yang sama ditentukan dalam angka yang menunjukkan tinggi garis horizontal dalam piksel. Mari kita lihat ini dengan sebuah contoh:

Tag HR dalam standar Html 4.01 memiliki satu lagi atribut yang disebut tunggal, Karena itu tidak dapat mengambil nilai apa pun (itu hanya berarti beberapa tindakan) - ini adalah "noshade" yang mencegah garis horizontal menghasilkan bayangan:

Jelas bahwa saya tidak akan dapat mempertimbangkan semua atribut yang mungkin untuk semua kemungkinan tag di Html, dan ini tidak diperlukan, karena semuanya dapat dilakukan dengan analogi - yang utama adalah memahami sintaksis dan ide itu sendiri. Selain itu, banyak di antaranya yang sudah tidak direkomendasikan untuk digunakan, karena... Sekarang fungsinya dilakukan oleh gaya CSS, yang juga akan segera kami bicarakan secara mendetail.

Semoga beruntung untukmu! Sampai jumpa lagi di halaman situs blog

Anda mungkin tertarik

Tabel dalam Html - Tag Tabel, Tr dan Td, serta Colspan, Cellpadding, Cellspacing, dan Rowspan untuk membuatnya
Iframe dan Frame - apa itu dan cara terbaik menggunakan frame di Html
Arahan komentar dan Doctype dalam kode Html, serta konsep elemen blok dan inline (tag)
Sematkan dan objek - Tag HTML untuk menampilkan konten media (video, flash, audio) di halaman web
Cara memasukkan link dan gambar (foto) ke dalam HTML - tag IMG dan A
Formulir html untuk situs - tag Formulir, Input dan Pilih, Opsi, Area Teks, Label, dan lainnya untuk membuat elemen formulir web
Font (Wajah, Ukuran dan Warna), Blockquote, dan Tag Pra - pemformatan teks lama dalam HTML murni (tidak menggunakan CSS)
Karakter spasi putih dan format kodenya dalam Html, serta karakter spasi khusus yang tidak dapat terputus dan mnemonik lainnya
Cara membuat hyperlink (A, Href, Target blank), cara membukanya di jendela baru situs, dan juga menjadikan gambar link dalam kode Html

Salam kenal teman! Hari ini kita akan membicarakannya tag paragraf dan atribut perataan. Secara umum, semua konten pada halaman harus dibagi menjadi beberapa paragraf. Isi paragraf ditulis di antara tag

Teks…

. Saat kami menampilkan 2 paragraf berturut-turut, bidang tak kasat mata terbentuk di antara keduanya, yang mendorongnya menjauh satu sama lain. Tag tersebut merupakan tag blok sehingga memenuhi seluruh lebar halaman.

Sebagai contoh, mari kita ambil halaman dengan kode berikut:

Halaman dengan paragraf.

Paragraf pertama: Lorem Ipsum hanyalah teks tiruan dari industri percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi teks tiruan standar industri sejak tahun 1500-an, ketika seorang pencetak yang tidak dikenal mengambil kumpulan teks dan mengacaknya untuk membuat buku contoh huruf.

Paragraf kedua: Sudah menjadi fakta lama bahwa pembaca akan terganggu oleh konten halaman yang dapat dibaca ketika melihat tata letaknya. Maksud penggunaan Lorem Ipsum adalah distribusi hurufnya kurang lebih normal, berbeda dengan penggunaan "Konten di sini, konten di sini", sehingga terlihat seperti bahasa Inggris yang mudah dibaca.

Mari kita lihat tampilannya di browser:


Pasti Anda memperhatikan ada tag di kode halaman tersebut kuat, tag ini membuat teks menjadi tebal.

Atribut tanda

Untuk setiap tag Anda dapat, dan dalam beberapa kasus bahkan perlu, menentukan atribut. Melalui atribut, kami memberi tahu browser bagaimana tepatnya menampilkan elemen ini atau itu pada halaman.

Atribut ditentukan di dalam braket tag pembuka dan memiliki sintaks berikut: atribut_nama="nilai"

Atribut penyelarasan

Misalnya, kita memiliki paragraf di suatu halaman dan kita ingin menyelaraskan kontennya. Untuk melakukan ini, kita menulis atribut di dalam tag pembuka meluruskan, yang bertanggung jawab untuk menyelaraskan konten dalam paragraf, dan mengaturnya ke satu nilai.

Isi paragraf.

Atribut ini memiliki 4 nilai:

1.Kiri– Meratakan konten ke kiri. Nilai ini adalah defaultnya. Artinya, jika kita tidak menentukan atribut untuk paragraf tersebut meluruskan, maka konten di dalam paragraf akan dibiarkan rata secara default. Hal ini dapat dilihat pada contoh sebelumnya.

2. Benar– Sejajarkan konten ke kanan.

Teks…

Berikut tampilannya di browser:


3.Pusat- Menyelaraskan konten ke tengah halaman.

Teks…


4.Membenarkan– Menyelaraskan konten dengan lebar halaman.

Teks…


Ringkasan pelajaran:
Hari ini kita belajar apa itu gugus kalimat dalam html. Paragraf sangat sering digunakan dalam html. Kita juga mempelajari apa itu atribut tag. Dan mempelajari atribut penyelarasan meluruskan. Yang dapat mengambil salah satu dari nilai berikut: kiri (nilai default),Kanan,tengahmembenarkan.



Kami merekomendasikan membaca