Inspirational journeys

Follow the stories of academics and their research expeditions

Mengenal Struktur Dasar Dokumen HTML

Annisa Nanda Pertiwi

Sun, 13 Jul 2025

Mengenal Struktur Dasar Dokumen HTML

Mengenal Struktur Dasar Dokumen HTML

Selamat datang di Blog Inatechno! Pada kesempatan kali ini, kita akan membahas hal yang mendasar tetapi sangat penting dalam dunia pengembangan web: Memahami Struktur Dasar Dokumen HTML. Sebagai elemen pokok dalam membangun sebuah halaman pada web, pengetahuan ini akan memberikan kita landasan yang kokoh untuk merancang pengalaman web yang optional. Mari kita mulai dengan melihat komponen-komponen utama struktur dasar dokumen HTML.

HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk menyusun dan memformat konten pada halaman web. Memahami struktur dasar dokumen HTML adalah langkah pertama menuju pembuatan halaman web yang efisien dan dapat diakses.


Struktur Dasar Dokumen HTML

Mari kita jabarkan elemen-elemen yang ada pada code diatas:

  1. '' : Mendefenisikan jenis dokumen HTML yang digunakan.
  2. '' : Menunjukkan awal dan akhir dari dokume HTML serta menetapkan bahasa (dalam contoh ini, bahasa indonesia).
  3. '' : Berisi informasi tambahan tentang dokumen, seperti karakter set, viewport, dan judul halaman.
  4. ' : Menetapkan karakter set dokumen sebagai UTF-8, yang mendukung karakter internasional.
  5. '' : Mengatur viewport untuk mendukung responsivitas di perangkat seluler.
  6. '' : Menentukan judul halaman yang akan di tampilkan di tab peramban. </li> <li><body>'' : Merupakan bagian utama yang mengandung konten sebenarnya dari halaman web. </li> </ol> <br> <h4 style="font-size: 20px">Pentingnya Elemen Header, Main, Article, dan Footer</h4> <p> Elemen '<header>', '<article>', dan '<footer>' memiliki peran penting dalam meningkatkan struktur dan semantik halaman web. Mari kita bahas pentingnya masing-masing elemen ini: </p> <h5 style="font-size: 18px">1. '<header>': Menyajikan Identitas dan Navigasi</h5> <ul> <li>Judul dan Logo: '<header> umumnya berisi judul atau logo situs web, membantu pengguna mengidentifikasi situs tersebut dengan mudah.</li> <li>Navigasi: Link atau elemen navigasi dapat ditempatkan di dalam '<header>', memberika akses cepat ke bagian-bagian penting dari situs.</li> <li>Informasi Kontekstual: Bisa juga berisi informasi kontekstual, seperti tanggal atau waktu pembuatan halaman.</li> </ul> <h5 style="font-size: 18px">2. '<main>': Wadah Konten Utama</h5> <ul> <li>Konten Utama: Semua konten utama halaman web ditempatkan di dalam elemen '<main>. Ini bisa termasuk artikel, paragraf, gambar, dan elemen-elemen utama lainnya. </li> <li>Responsivitas: Memisahkan konten utama memudahkan dalam mengelola responsivitas halaman web, membuatnya lebih mudah diakses dari berbagai perangkat.</li> </ul> <h5 style="font-size: 18px">3. '<article>': Mengelompokkan Konten yang Berdiri Sendiri</h5> <p></p> <ul> <li>Isolasi Konten: '<article>' digunakan untuk mengelompokkan konten yang berdiri sendiri. Ini berguna untuk article, posting blog, atau konten yang dapat berdiri sendiri dari konteks halaman.</li> <li>Aksesibilitas: Memiliki '<article>' memperbaiki struktur dokumen, meningkatkan aksesibilitas, dan membantu mesin pencarian memahami hierarki konten. </li> </ul> <h5 style="font-size: 18px">4. '<footer>': Informasi di Bagian Bawah Halaman</h5> <ul> <li>Informasi Hak Cipta: Biasanya berisi informasi hak cipta atau hak milik situs web, memberikan perlindungan hukum terhadap penggunaan tanpa izin.</li> <li>Tautan Sosial dan Kontak: ELemen '<footer>' sering digunakan untuk menambahkan tautan ke halaman sosial media atau informasi kontak.</li> <li>Navigasi Tambahan: Dapat juga berisi tautan navigasi tambahan atau informasi penting lainnya.</li> </ul> </article> </div> </div> </div> <h1>0 Comments</h1> <div class="comment instructor-student-feed-back"> <h1>Leave a comment</h1> <div class="row"> <div class="col-lg-12"> <form action="http://inatechno.id/blog/add_blog_comment/23" method="post" class="feedback-form"> <div class="single-input mb-3"> <textarea name="comment" class="form-control" placeholder="Enter your comments here"></textarea> <input type="hidden" name="parent_id" value=""> </div> <button type="submit" class="message-btn px-5">Submit</button> </form> </div> </div> </div> </div> <div class="col-lg-4"> <div class="right-section"> <div class="search"> <div class="search-bar"> <form action="http://inatechno.id/blogs" method="get"> <button type="submit" class="search-btn"><i class="fa-solid fa-magnifying-glass"></i></button> <input value="" type="text" name="search" class="form-control" placeholder="Type your keywords" id="search-place"> </form> </div> </div> <div class="title"> <h4>Kategori</h4> </div> <div class="categories mb-4"> <ul> <li class="d-flex align-items-center"> <a href="http://inatechno.id/blogs?category=web-apps" class="me-1">Web Apps</a> <span class="badge bg-primary rounded-pill ms-auto">14</span> </li> <li class="d-flex align-items-center"> <a href="http://inatechno.id/blogs?category=mobile-apps" class="me-1">Mobile Apps</a> <span class="badge bg-primary rounded-pill ms-auto">8</span> </li> <li class="d-flex align-items-center"> <a href="http://inatechno.id/blogs?category=digital-marketing" class="me-1">Digital Marketing</a> <span class="badge bg-primary rounded-pill ms-auto">3</span> </li> <li class="d-flex align-items-center"> <a href="http://inatechno.id/blogs?category=robotics" class="me-1">Robotics</a> <span class="badge bg-primary rounded-pill ms-auto">1</span> </li> </ul> <a class="text-14px mx-0 mt-4 text-muted" href="http://inatechno.id/blog/categories">Semua kategori</a> </div> <div class="title"> <h4>Recent posts</h4> </div> <div class="post"> <div class="row"> <div class="col-lg-8 col-md-8 col-sm-8 col-12"> <a href="http://inatechno.id/blog/details/otomatisasi-pengiriman-pesan-whatsapp-massal-dengan-python/44"><h5>Otomatisasi Pengiriman Pesan WhatsApp Massal dengan Python</h5></a> <p><i class="fa-solid fa-calendar-days"></i> Tue, 29 Apr 2025</p> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-12"> <img loading="lazy" src="http://inatechno.id/uploads/blog/thumbnail/2feb088c74562bafe56e47063bf180b5.png" alt="Otomatisasi Pengiriman Pesan WhatsApp Massal dengan Python"> </div> </div> </div> <div class="post"> <div class="row"> <div class="col-lg-8 col-md-8 col-sm-8 col-12"> <a href="http://inatechno.id/blog/details/tips-untuk-memaksimalkan-strategi-whatsapp-blast-marketing/43"><h5>Tips Untuk Memaksimalkan Strategi WhatsApp Blast Marketing</h5></a> <p><i class="fa-solid fa-calendar-days"></i> Sat, 26 Apr 2025</p> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-12"> <img loading="lazy" src="http://inatechno.id/uploads/blog/thumbnail/080a25c65a476a620bc89a73afe4bc56.png" alt="Tips Untuk Memaksimalkan Strategi WhatsApp Blast Marketing"> </div> </div> </div> <div class="post"> <div class="row"> <div class="col-lg-8 col-md-8 col-sm-8 col-12"> <a href="http://inatechno.id/blog/details/10-tips-bermanfaat-untuk-memaksimalkan-strategi-whatsapp-blast-marketing/42"><h5>10 Tips Bermanfaat untuk Memaksimalkan Strategi WhatsApp Blast Marketing</h5></a> <p><i class="fa-solid fa-calendar-days"></i> Fri, 25 Apr 2025</p> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-12"> <img loading="lazy" src="http://inatechno.id/uploads/blog/thumbnail/a73393f9273694b51821e4e1e102d332.png" alt="10 Tips Bermanfaat untuk Memaksimalkan Strategi WhatsApp Blast Marketing"> </div> </div> </div> </div> </div> </div> </div> </div> </section><!--------- footer Section Start---------------> <section class="footer wow animate__animated animate__fadeIn" data-wow-duration="1000" data-wow-delay="500" data-wow-duration="1000" data-wow-delay="600"> <div class="container"> <div class="row"> <div class="col-lg-5 col-md-12 col-sm-12 col-12"> <img loading="lazy" src="http://inatechno.id/uploads/system/logo-light.png"> <p>Pelajari training apa saja, kapan saja dan dimana saja. jelajahi semua training terbaik dengan harga terjangkau yang pernah ada!</p> <div class="lattest-news newFooterlatest"> <h1>Berlangganan newsletter kami</h1> <form class="ajaxForm resetable" action="http://inatechno.id/home/subscribe_to_our_newsletter" method="post" id="newsletter-form"> <input type="email" class="form-control" id="subscribe_email" placeholder="Masukkan alamat email Anda" name="email"> <button class="form-arrow" type="submit"><i class="fa-solid fa-arrow-right-long"></i></button> </form> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6 mb-5"> <h1>Top Kategori</h1> <ul> <li> <a href="http://inatechno.id/home/courses?category=kotlin"> Kotlin </a> </li> <li> <a href="http://inatechno.id/home/courses?category=java"> Java </a> </li> <li> <a href="http://inatechno.id/home/courses?category=dev-ops"> DevOps </a> </li> <li> <a href="http://inatechno.id/home/courses?category=node-js"> NodeJS </a> </li> <li> <a href="http://inatechno.id/home/courses?category=data-science-basic"> Data Science Basic </a> </li> </ul> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-6 mb-5"> <h1>Tautan yang bermanfaat</h1> <ul> <li> <a href="http://inatechno.id/home/become_an_instructor">Menjadi seorang instruktur</a></li> <li> <a href="http://inatechno.id/blog">Blog</a></li> <li><a href="http://inatechno.id/home/courses">Semua Training</a></li> <li><a href="http://inatechno.id/sign_up">Daftar</a></li> </ul> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6 mb-5"> <h1>Bantuan</h1> <ul> <li><a href="http://inatechno.id/home/contact_us">Hubungi kami</a></li> <li><a href="http://inatechno.id/home/about_us">Tentang kami</a></li> <li><a href="http://inatechno.id/home/privacy_policy">Kebijakan pribadi</a></li> <li><a href="http://inatechno.id/home/terms_and_condition">Syarat dan ketentuan</a></li> <li><a href="http://inatechno.id/home/faq">Faq</a></li> <li><a href="http://inatechno.id/home/refund_policy">Kebijakan pengembalian</a></li> </ul> </div> </div> </div> <div class="eBottomfooter"> <div class="container"> <div class="row "> <div class="col-lg-6 col-md-12"> <div> <p>Inatechno</p> </div> </div> <div class="col-lg-6 col-md-12"> <ul class="nav gap-3 justify-content-end"> <li class="nav-item"> <a target="_blank" href="https://www.instagram.com/inatechno.id/"> <svg width="19" height="19" id="instagram" fill="white" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 169.063 169.063" style="enable-background:new 0 0 169.063 169.063;" xml:space="preserve"> <g> <path d="M122.406,0H46.654C20.929,0,0,20.93,0,46.655v75.752c0,25.726,20.929,46.655,46.654,46.655h75.752 c25.727,0,46.656-20.93,46.656-46.655V46.655C169.063,20.93,148.133,0,122.406,0z M154.063,122.407 c0,17.455-14.201,31.655-31.656,31.655H46.654C29.2,154.063,15,139.862,15,122.407V46.655C15,29.201,29.2,15,46.654,15h75.752 c17.455,0,31.656,14.201,31.656,31.655V122.407z"></path> <path d="M84.531,40.97c-24.021,0-43.563,19.542-43.563,43.563c0,24.02,19.542,43.561,43.563,43.561s43.563-19.541,43.563-43.561 C128.094,60.512,108.552,40.97,84.531,40.97z M84.531,113.093c-15.749,0-28.563-12.812-28.563-28.561 c0-15.75,12.813-28.563,28.563-28.563s28.563,12.813,28.563,28.563C113.094,100.281,100.28,113.093,84.531,113.093z"></path> <path d="M129.921,28.251c-2.89,0-5.729,1.17-7.77,3.22c-2.051,2.04-3.23,4.88-3.23,7.78c0,2.891,1.18,5.73,3.23,7.78 c2.04,2.04,4.88,3.22,7.77,3.22c2.9,0,5.73-1.18,7.78-3.22c2.05-2.05,3.22-4.89,3.22-7.78c0-2.9-1.17-5.74-3.22-7.78 C135.661,29.421,132.821,28.251,129.921,28.251z"></path> </g> </svg> </a> </li> <li class="nav-item"> <a target="_blank" href="https://web.facebook.com/Inatechnofficial/"> <i class="fa-brands fa-facebook-f"></i> </a> </li> <li class="nav-item"> <a target="_blank" href="https://www.linkedin.com/company/inatechno"> <svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_22_923)"> <path d="M17.5135 0H1.40624C0.634655 0 0.0107422 0.580074 0.0107422 1.29726V16.6991C0.0107422 17.4163 0.634655 17.9999 1.40624 17.9999H17.5135C18.2851 17.9999 18.9127 17.4163 18.9127 16.7026V1.29726C18.9127 0.580074 18.2851 0 17.5135 0ZM5.61858 15.3386H2.81281V6.74644H5.61858V15.3386ZM4.21569 5.57574C3.3149 5.57574 2.58761 4.88317 2.58761 4.02888C2.58761 3.17459 3.3149 2.48201 4.21569 2.48201C5.1128 2.48201 5.84008 3.17459 5.84008 4.02888C5.84008 4.87965 5.1128 5.57574 4.21569 5.57574ZM16.118 15.3386H13.316V11.162C13.316 10.1671 13.2975 8.88392 11.8577 8.88392C10.3994 8.88392 10.1779 9.97025 10.1779 11.0917V15.3386H7.37956V6.74644H10.0672V7.92065H10.1041C10.477 7.24565 11.3925 6.53199 12.7548 6.53199C15.5938 6.53199 16.118 8.31088 16.118 10.6241V15.3386Z" fill="white" /> </g> <defs> <clipPath id="clip0_22_923"> <rect width="18.902" height="17.9999" fill="white" transform="translate(0.0107422)" /> </clipPath> </defs> </svg> </a> </li> </ul> </div> </div> </div> </div> </section> <!--------- footer Section End---------------> <!-- PAYMENT MODAL --> <!-- Modal --> <script> $('document').ready(function() { new WOW().init(); }); </script> <script> function onSubmit(token) { document.getElementById("newsletter-form").submit(); } </script> <script> document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('.view-more-btn').forEach(function(button) { button.addEventListener('click', function() { let parent = this.previousElementSibling; parent.querySelectorAll('.outcome-item.hidden').forEach(function(item) { item.classList.remove('hidden'); }); this.style.display = 'none'; }); }); }); </script><script src="http://inatechno.id/assets/frontend/default-new/js/bootstrap.bundle.min.js"></script> <script src="http://inatechno.id/assets/frontend/default-new/js/berli.js"></script> <script src="http://inatechno.id/assets/frontend/default-new/js/course.js"></script> <script src="http://inatechno.id/assets/frontend/default-new/js/jquery.meanmenu.min.js"></script> <script src="http://inatechno.id/assets/frontend/default-new/js/jquery.nice-select.min.js"></script> <script src="http://inatechno.id/assets/frontend/default-new/js/jquery.webui-popover.min.js"></script> <script src="http://inatechno.id/assets/frontend/default-new/js/owl.carousel.min.js"></script> <script src="http://inatechno.id/assets/frontend/default-new/js/script-2.js"></script> <script src="http://inatechno.id/assets/frontend/default-new/js/slick.min.js"></script> <script src="http://inatechno.id/assets/frontend/default-new/js/venobox.min.js"></script> <script src="http://inatechno.id/assets/frontend/default-new/js/wow.min.js"></script> <script src="http://inatechno.id/assets/frontend/default-new/js/script.js"></script> <script src="http://inatechno.id/assets/frontend/default-new/summernote-0.8.20-dist/summernote-lite.min.js"></script> <script src="http://inatechno.id/assets/global/toastr/toastr.min.js"></script> <script src="http://inatechno.id/assets/global/jquery-form/jquery.form.min.js"></script> <script src="http://inatechno.id/assets/global/tagify/jquery.tagify.js"></script> <!-- SHOW TOASTR NOTIFIVATION --> <script type="text/javascript"> function showAjaxModal(url, title, modalType) { $('#modal_ajax .modal-dialog').removeClass('modal-sm'); $('#modal_ajax .modal-dialog').removeClass('modal-md'); $('#modal_ajax .modal-dialog').removeClass('modal-lg'); $('#modal_ajax .modal-dialog').removeClass('modal-xl'); $('#modal_ajax .modal-dialog').removeClass('modal-fullscreen'); if(modalType){ $('#modal_ajax .modal-dialog').addClass('modal-'+modalType); } // SHOWING AJAX PRELOADER IMAGE jQuery('#modal_ajax .modal-body').html('<div class="w-100 text-center pt-5"><img loading="lazy" class="mt-5 mb-5" width="80px" src="http://inatechno.id/assets/global/gif/page-loader-2.gif"></div>'); // LOADING THE AJAX MODAL jQuery('#modal_ajax').modal('show', {backdrop: 'true'}); // SHOW AJAX RESPONSE ON REQUEST SUCCESS $.ajax({ url: url, success: function(response) { jQuery('#modal_ajax .title').html(title); jQuery('#modal_ajax .modal-body').html(response); } }); } function lesson_preview(url, title){ // SHOWING AJAX PRELOADER IMAGE jQuery('#lesson_preview .title').html(title); jQuery('#lesson_preview .modal-body').html('<div class="w-100 text-center pt-5"><img loading="lazy" class="mt-5 mb-5" width="80px" src="http://inatechno.id/assets/global/gif/page-loader-2.gif"></div>'); // LOADING THE AJAX MODAL jQuery('#lesson_preview').modal('show', {backdrop: 'true'}); // SHOW AJAX RESPONSE ON REQUEST SUCCESS $.ajax({ url: url, success: function(response) { jQuery('#lesson_preview .modal-body').html(response); } }); } </script> <!-- (Ajax Modal)--> <div class="modal fade" id="modal_ajax"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="title text-white"></h5> <button type="button" class="btn btn-secondary ms-auto py-0 px-2" data-bs-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body" style="overflow:auto;"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default text-white" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal" id="lesson_preview" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true" data-bs-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="title"></h5> <button type="button" class="btn btn-secondary ms-auto py-0 px-2" data-bs-dismiss="modal" aria-hidden="true" onclick="player.pause();">×</button> </div> <div class="modal-body" style="overflow:auto;"> </div> </div> </div> </div> <script type="text/javascript"> function confirm_modal(delete_url) { jQuery('#modal-4').modal('show', {backdrop: 'static'}); document.getElementById('delete_link').setAttribute('href' , delete_url); } </script> <!-- (Normal Modal)--> <div class="modal fade" id="modal-4"> <div class="modal-dialog"> <div class="modal-content" style="margin-top:100px;"> <div class="modal-header"> <h5 class="modal-title text-center">Apa kamu yakin ?</h5> <button type="button" class="btn btn-outline-secondary px-1 py-0" data-bs-dismiss="modal" aria-hidden="true"><i class="fas fa-times-circle"></i></button> </div> <div class="modal-footer" style="margin:0px; border-top:0px; text-align:center;"> <a href="" class="btn btn-danger btn-yes" id="delete_link">Iya</a> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tidak</button> </div> </div> </div> </div> <script type="text/javascript"> function async_modal() { const asyncModal = new Promise(function(resolve, reject){ $('#modal-4').modal('show'); $('#modal-4 .btn-yes').click(function(){ resolve(true); }); $('#modal-4 .btn-cancel').click(function(){ resolve(false); }); }); return asyncModal; } </script> <script type="text/javascript"> $(document).ready(function() { }); </script> <!-- Google analytics --> <!-- Ended Google analytics --> <!-- Meta pixel --> <!-- Ended Meta pixel --> <script type="text/javascript"> function redirectTo(url, event){ $(location).attr('href', url); } function actionTo(url, type = "get", event) { //Start prepare get url to post value var jsonFormate = '{}'; if(type == 'post'){ let pieces = url.split(/[\s?]+/); let lastString = pieces[pieces.length - 1]; jsonFormate = '{"'+lastString.replace('=', '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","')+'"}'; } jsonFormate = JSON.parse(jsonFormate); //End prepare get url to post value $.ajax({ type: type, url: url, data: jsonFormate, success: function(response) { distributeServerResponse(response); } }); } //Server response distribute function distributeServerResponse(response){ try { JSON.parse(response); var isValidJson = true; } catch (error) { var isValidJson = false; } if (isValidJson) { response = JSON.parse(response); //For reload after submission if(typeof response.reload != "undefined" && response.reload != 0){ location.reload(); } //For redirect to another url if(typeof response.redirectTo != "undefined" && response.redirectTo != 0){ $(location).attr('href', response.redirectTo); } //for show a element if(typeof response.show != "undefined" && response.show != 0 && $(response.show).length){ $(response.show).css('display', 'inline-block'); } //for hide a element if(typeof response.hide != "undefined" && response.hide != 0 && $(response.hide).length){ $(response.hide).hide(); } //for fade in a element if(typeof response.fadeIn != "undefined" && response.fadeIn != 0 && $(response.fadeIn).length){ $(response.fadeIn).fadeIn(); } //for fade out a element if(typeof response.fadeOut != "undefined" && response.fadeOut != 0 && $(response.fadeOut).length){ $(response.fadeOut).fadeOut(); } //For adding a class if(typeof response.addClass != "undefined" && response.addClass != 0 && $(response.addClass.elem).length){ $(response.addClass.elem).addClass(response.addClass.content); } //For remove a class if(typeof response.removeClass != "undefined" && response.removeClass != 0 && $(response.removeClass.elem).length){ $(response.removeClass.elem).removeClass(response.removeClass.content); } //For toggle a class if(typeof response.toggleClass != "undefined" && response.toggleClass != 0 && $(response.toggleClass.elem).length){ $(response.toggleClass.elem).toggleClass(response.toggleClass.content); } //For showing error message if(typeof response.error != "undefined" && response.error != 0){ toastr.error(response.error); } //For showing success message if(typeof response.success != "undefined" && response.success != 0){ toastr.success(response.success); } //For replace texts in a specific element if(typeof response.text != "undefined" && response.text != 0 && $(response.text.elem).length){ $(response.text.elem).text(response.text.content); } //For replace elements in a specific element if(typeof response.html != "undefined" && response.html != 0 && $(response.html.elem).length){ $(response.html.elem).html(response.html.content); } //For replace elements in a specific element if(typeof response.load != "undefined" && response.load != 0 && $(response.load.elem).length){ $(response.load.elem).html(response.load.content); } //For replace tech in a specific element if(typeof response.tech != "undefined" && response.tech != 0 && $(response.tech.elem).length){ $(response.tech.elem).text(response.tech.content); } //For appending elements if(typeof response.append != "undefined" && response.append != 0 && $(response.append.elem).length){ $(response.append.elem).append(response.append.content); } //Fo prepending elements if(typeof response.prepend != "undefined" && response.prepend != 0 && $(response.prepend.elem).length){ $(response.prepend.elem).prepend(response.prepend.content); } //For appending elements after a element if(typeof response.after != "undefined" && response.after != 0 && $(response.after.elem).length){ $(response.after.elem).after(response.after.content); } // Update the browser URL and add a new entry to the history if(typeof response.pushState != "undefined" && response.pushState != 0){ history.pushState({}, response.pushState.title, response.pushState.url); } if(typeof response.script != "undefined" && response.script != 0){ script } } } </script><script type="text/javascript"> $(function () { if($('[data-bs-toggle="tooltip"]').length > 0){ $('[data-bs-toggle="tooltip"]').tooltip(); } if($('.tagify').length > 0){ $('.tagify:not(.initialized)').tagify(); $('.tagify:not(.initialized)').addClass('initialized'); } $('a[href="#"]').on('click', function(event){ event.preventDefault(); }); if($('.text_editor:not(.initialized)').length){ $('.text_editor:not(.initialized)').summernote({ height: 180, // set editor height minHeight: null, // set minimum height of editor maxHeight: null, // set maximum height of editor focus: true // set focus to editable area after initializing summernote }); $('.text_editor:not(.initialized)').addClass('initialized'); } //When need to add a wishlist button inside a anchor tag $('.checkPropagation').on('click', function(event){ var action = $(this).attr('action'); var onclickFunction = $(this).attr('onclick'); var onChange = $(this).attr('onchange'); var tag = $(this).prop("tagName").toLowerCase(); console.log(tag); if(tag != 'a' && action){ $(location).attr('href', $(this).attr('action')); return false; }else if(onclickFunction){ if(onclickFunction){ onclickFunction; } return false; }else if(tag == 'a'){ return true; } }); //Ajax for submission start var formElement; if($('.ajaxForm:not(.initialized)').length > 0){ $('.ajaxForm:not(.initialized)').ajaxForm({ beforeSend: function(data, form) { var formElement = $(form); }, uploadProgress: function(event, position, total, percentComplete) { }, complete: function(xhr) { setTimeout(function(){ distributeServerResponse(xhr.responseText); }, 400); if($('.ajaxForm.resetable').length > 0){ $('.ajaxForm.resetable')[0].reset(); } }, error: function(e) { console.log(e); } }); $('.ajaxForm:not(.initialized)').addClass('initialized'); } }); </script> </body> </html>