Semantik HTML5

Elemen Semantik HTML5 mempunyai nama penting yang mencerminkan jenis komponen. Mari ambil contoh jadual, pengepala, pengaki dsb.

• Untuk HTML4, pembangun menggunakan nama id/kelas mereka sendiri untuk mereka bentuk elemen seperti bahagian atas, pengepala, bahagian bawah, menu, pengaki, utama, navigasi, bahan, objek, topnav, bar sisi, dsb., dan sebagainya. Walau bagaimanapun, disebabkan ini, enjin carian tidak dapat mengenal pasti kandungan halaman web yang betul.

  Contoh Semantik HTML5

  Sekarang mari lihat beberapa contoh elemen Semantik HTML5:

  Contoh #1 –

  Ia merujuk kepada pengepala segmen pengenalan halaman, seperti namanya. Banyak pengepala boleh ditemui pada satu halaman.

  Kod:

  
  
  <title>Header Element for the page</title>
  <style>
  h1, h4 {
  Color:#red;
  Text-align:centre;
  margin-bottom:2px;
  }
  p {
  font-size:23px;
  text-align:centre;
  margin-top:2px;
  }
  </style>
  
  
  <article>
  <header>
  <h1 id="Educba-learning-bridge">Educba learning bridge</h1>
  <h3 id="Become-a-techinal-learner-with-EDUCBA">Become a techinal learner with EDUCBA</h3>
  <p>Hey the best online training institute in ASIA </p>
  </header>
  </article>
  
  

  Output:

  

  Contoh #2 –

  Koleksi pautan navigasi digunakan untuk menerangkan menu navigasi atau bar navigasi.

  Kod:

  
  
  <title>Navigation Element</title>
  <style>
  h1 {
  color:#Grey;
  }
  </style>
  
  
  <h1 id="Navigation-Bar-for-EduCBA">Navigation Bar for EduCBA</h1>
  <nav>
  <a href="https://www.educba.com/">Home</a> |
  <a href="https://www.educba.com/data-science/">Data Science</a> |
  <a href="https://www.educba.com/software-development/">Software Development</a> |
  <a href="https://www.educba.com/design/">Design</a> |
  <a href="https://www.educba.com/finance/">Finance</a>
  </nav>
  
  

  Output:

  

  Contoh #3 –

  Halaman boleh dipecahkan kepada bahagian seperti Pengenalan, Hubungan, Butiran, dll., dengan elemen untuk setiap bahagian.

  Kod:

  
  
  <title>Have a look for Section Element in EduCBA</title>
  <style>
  h1 {
  color:#Grey;
  }
  p {
  font-size:20px;
  text-align:left;
  margin-top:2px;
  }
  </style>
  
  
  <section>
  <h1 id="AWS-Tutorials-for-EduCBA">AWS Tutorials for EduCBA</h1>
  <p>Amazon Web Services (AWS) is one of the world's most popular and used cloud services. 175 supported services are available in AWS. </p>
  </section>
  <section>
  <h1 id="Data-Mining">Data Mining</h1>
  <p>AThrough technological development such as big data and data science companies around the world have benefited from data mining by recognize opportunities and making their organizations efficient through waste reduction, to achieve their business goals.
  </p>
  </section>
  
  

  Output:

  

  Contoh #4 – 

  Elemen tanda ini digunakan untuk menyerlahkan teks.

  Kod:

  
  
  <title>EduCBA mark Element</title>
  <style>
  h2 {
  color:#Grey;
  }
  </style>
  
  
  <h1 id="How-to-mark-text">How to mark text </h1>
  <p> In theory, this method transforms <mark>raw data into valuable information</mark> or insights.</p>
  
  

  Output:

  

  Contoh #5 –

  Ia adalah aspek blok atau bahagian segmen. Ia digunakan sebagai pakej.

  Kod:

  
  
  <title>div Element</title>
  <style>
  .edu {
  color:#grey;
  }
  </style>
  
  
  <h1 id="div-Element-for-educba">div Element for educba </h1>
  <div class="EduCBA">
  <h1 id="Data-Science">Data Science</h1>
  <p>Data analatics computer Science nachine learning </p>
  </div>
  
  

  Output:

  

  Contoh #6 – dan

  • Elemen ini digunakan untuk menentukan butiran tambahan yang boleh dilihat atau disembunyikan oleh pengguna.
  • Elemen ini digunakan untuk menentukan tajuk yang boleh dilihat untuk unsur

  Program untuk melaksanakan dan

  Kod:

  
  
  <title>Details for the EduCBA Summery</title>
  <style>
  .GFG {
  Color:#red;
  font-size:60px;
  Text-align:left;
  margin-bottom:0px;
  }
  p {
  font-size:25px;
  text-align:left;
  margin-top:3px;
  }
  </style>
  
  
  <details>
  <summary class="EDUCBA">Make your Study easily with us</summary>
  <p>One of the best Data Science and web portal
  where you can learn good skills of programming.
  </p>
  </details>
  
  

  Output:

  

  

  7. : Elemen ini digunakan untuk menentukan kandungan selain daripada kandungan halaman.
  8. : Elemen ini digunakan untuk menentukan masa atau tarikh.
  9. : Elemen ini digunakan untuk menentukan kandungan utama dokumen.

  Bagaimana untuk Melaksanakan semua Kod elemen dalam satu Contoh?

  Di sini kita lihat cara melaksanakan kod elemen dalam satu contoh.

  Kod:

  
  
  <title>Header Element for the page</title>
  <style>
  color:red;
  h1, h4 {
  Color:#red;
  Text-align:centre;
  margin-bottom:2px;
  }
  p {
  font-size:20px;
  text-align:centre;
  margin-top:2px;
  }
  </style>
  
  
  <article>
  <header>
  <h1 id="Educba-learning-bridge">Educba learning bridge</h1>
  <nav>
  <a href="https://www.educba.com/">Home</a> |
  <a href="https://www.educba.com/data-science/">Data Science</a> |
  <a href="https://www.educba.com/software-development/">Software Development</a> |
  <a href="https://www.educba.com/design/">Design</a> |
  <a href="https://www.educba.com/finance/">Finance</a>
  </nav>
  <details>
  <h3 id="Become-a-technicall-learner-with-EDUCBA">Become a technicall learner with EDUCBA</h3>
  <section>
  <h1 id="mark-AWS-Tutorials-for-EduCBA-mark"><mark>AWS Tutorials for EduCBA</mark></h1>
  <p>Amazon Web Services (AWS) is one of the world's most popular and used cloud services. 175 supported services are available in AWS. </p>
  </section>
  <section>
  <h1 id="mark-Data-Mining-mark"><mark>Data Mining</mark></h1>
  <p>Through technological development such as big data and data science companies around the world have benefited from data mining by recognize opportunities and making their organizations efficient through waste reduction, to achieve their business goals.
  </p>
  </section>
  <p><em>EduCBA is the best online training institute in ASIA</em></p>
  </details></header>
  </article>
  
  

  Output:

  

Atas ialah kandungan terperinci Semantik HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!