Mari kita lihat contoh HTML dan jangan lupa bahwa metode JavaScript peka huruf besar-kecil, jadi gunakan persis sama
Contoh innerHTML
Properti innerHTML menyetel atau mengembalikan konten HTML (HTML bagian dalam) dari suatu elemen
var text = document.getElementById("paragraphID").innerHTML;Contoh Lengkap
<!DOCTYPE html> <html> <body> <p id="p1">Hello Text</p> <script> var text = document.getElementById("p1").innerHTML; alert(text); </script> </body> </html> _Keluaran
TextContent Contoh
Properti textContent menyetel atau mengembalikan konten teks dari node yang ditentukan, dan semua turunannya
var x = document.getElementById("pTagId").textContent;Kode lengkap
<!DOCTYPE html> <html> <body> <p id="p2">Another Text</p> <script> var x = document.getElementById("p2").textContent; alert(text); </script> </body> </html>Keluaran
Catatan. metode innerHTML mengembalikan HTML seperti namanya. Cukup sering, untuk mengambil atau menulis teks di dalam suatu elemen, orang menggunakan innerHTML. metode textContent harus digunakan sebagai gantinya. Karena teks tidak diuraikan sebagai HTML, kemungkinan besar kinerjanya lebih baik. Selain itu, ini menghindari vektor serangan XSS
Beri komentar jika Anda memiliki contoh keraguan atau saran lain tentang topik ini
Catatan. Semua kode Contoh JS diuji di browser Firefox dan browser Chrome
OS. Windows 10
Kode. Versi HTML5
Rohit
Gelar dalam Ilmu Komputer dan Insinyur. Pengembang Aplikasi dan memiliki banyak pengalaman bahasa Pemrograman. Antusias terhadap teknologi & suka belajar teknis
Sejajarkan atribut. Pada dasarnya, atribut align menentukan penyesuaian horizontal teks dalam sebuah paragraf. Namun, karena tidak lagi didukung di HTML 5, kita dapat menggunakan atribut serupa lainnya - yang dikenal sebagai properti perataan teks CSS untuk mendapatkan hasil yang serupa. Nilai atribut text-align dapat berkisar dari kiri, kanan, tengah, atau untuk membenarkan. Menentukan salah satu dari nilai di atas akan menghasilkan perataan teks pada arah tertentu
Apakah yang
Tag dalam HTML digunakan untuk?
Below are some points regarding the usage or how we can use p tag
dalam HTML
- p tag
dalam HTML digunakan untuk memuat paragraf teks dalam dokumen
- p tag
dalam HTML adalah elemen tingkat blok yang paling umum digunakan dan selalu dimulai pada baris baru. Meskipun demikian, elemen level blok lainnya tidak dapat dimuat di dalamnya
- Jika elemen level blok lain digunakan sebelum tag p penutup , maka paragraf ditutup secara otomatis
- Browser menambahkan margin secara otomatis sebelum dan sesudah setiap paragraf
- tag p dalam HTML adalah sebaris dan konten teks. Saya. e. , itu dibangun ke dalam halaman web alih-alih dimuat dari file eksternal
- The start tag
dalam tag p diperlukan tetapi tag akhir
adalah opsional - p tag
dalam HTML dapat digunakan untuk pengelompokan struktural konten terkait, seperti gambar atau bidang formulir
- Usually, the browser ignores the line break or space between the text inside the p tag
.
- HTML Version: 2, 3.2, 4, 4.01, 5 supports p tag
Contoh
Setelah diskusi singkat tentang tag p, mari kita lihat beberapa contoh untuk memahami dengan jelas penggunaan tag p dalam HTML
Meratakan teks dalam sebuah paragraf
Kode
Title of the document P Tag in HTML
The text alignment to the center is set with CSS property text-align
_Keluaran
Explanation: In the above example, we have seen how we are using a p tag in our HTML document. Above, in the head section, there is a style sheet where we are calling the class attribute of the p tag in the body with the value of paragraph with .paragraph notation. Now the content inside the p tags
akan ditata sama sesuai dengan. definisi gaya paragraf di bagian kepala. Di dalam. paragraf di lembar gaya, kami menggunakan properti perataan teks CSS untuk menyelaraskan teks tag p di tengah halaman
Gaya paragraf dengan CSS
Kode
Style paragraphs with CSS
Hello everyone, this is a short paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Keluaran
Penjelasan. Pada contoh di atas, kita telah melihat bagaimana dengan bantuan CSS, kita dapat mengatur gaya paragraf kita di dalam tag p. Kali ini tanpa memiliki atribut class apapun, kita langsung memanggil tag p dengan nama tag mereka di dalam style sheet dari tag head. Kami telah melakukan beberapa gaya CSS untuk tag p kami, termasuk mengubah warnanya dari hitam menjadi merah, mengubah teks menjadi huruf besar, lekukan, perataan, dll. Kami juga telah menggunakan pemilih hover dimana ketika kursor mouse berada di atas konten paragraf, itu akan mengubah beberapa gaya seperti mengubah warna dari merah menjadi biru dan kemudian membuat kursor dari panah ke penunjuk
Masalah puisi dalam HTML
Kode
Poem problem in HTML
Twinkle, twinkle, little star. How I wonder what you are. Up above the world so high. Like a diamond in the sky.
Note that the browser simply ignores the line breaks in the source code!
_Keluaran
Penjelasan. Pada contoh di atas, kita telah melihat masalah puisi terkenal di HTML. Kami telah menulis puisi menggunakan tag p kami. Harap perhatikan bahwa kami telah menambahkan jeda baris, pemformatan yang tepat, dan spasi putih yang diperlukan dalam puisi kami. Tetapi saat menampilkan, browser kami mengabaikan semua jeda baris dan spasi putih yang dibuat dalam puisi, dan itu hanya ditampilkan seperti teks biasa lainnya di browser.
Jadi, dengan ini, kita dapat menyimpulkan bahwa browser mengabaikan jeda baris atau spasi di antara teks di dalam tag p
Masalah aksesibilitas
Seperti yang sudah kita ketahui, membagi setiap konten halaman ke dalam format paragraf yang relevan membuat halaman lebih mudah diakses (readable). Pintasan disediakan oleh pembaca layar untuk memungkinkan penggunanya melompat ke paragraf berikutnya atau sebelumnya, membiarkan mereka melewati konten apa pun
It will be problematic for people who navigate with screen-reading technology to navigate around the document, which has empty
elemen untuk menambah spasi antar paragraf. Karena pembaca Layar dapat mengumumkan keberadaan paragraf, tetapi tidak ada konten yang terkandung di dalamnya — karena memang tidak ada. Ini dapat membingungkan dan membuat frustrasi orang yang menggunakan pembaca layar
Jika diperlukan ruang ekstra, gunakan properti CSS seperti margin untuk membuat efek
p { margin-bottom: 2em; /* increase white space after a paragraph */ }
Dukungan Peramban
Almost all modern browsers support the p tag
dalam HTML karena merupakan tag yang sangat banyak digunakan. Di bawah ini adalah daftar beberapa browser populer yang mendukung tag p
Apa peran tag P?
: The Paragraph element. The
HTML element mewakili sebuah paragraf . Paragraf biasanya direpresentasikan dalam media visual sebagai blok teks yang dipisahkan dari blok yang berdekatan dengan baris kosong dan/atau lekukan baris pertama, tetapi paragraf HTML dapat berupa pengelompokan struktural konten terkait, seperti gambar atau bidang formulir.