HTML & CSS | Part 2 
Tags: html, css, beginners, tutorial
Published: 2020-06-27 05:42:18

# Bekerja Dengan Konten HTML

> Diambil dari Penjelasan camp.114
> https://youtu.be/OZ3ESpSEGZc

Sebelumnya kita membahas dasar dari html , kali ini kita akan membahas tentang elemen html yang lebih yang dapat digunakan untuk membuat konten berbasis text.

#### Heading ``<h1>..</h6>``

Di sesi sebelumnya kita sudah menggunakan tag ini ``<h1>`` dan  ``<h4>``. 

```html
<h1> Test </h1>
<h2> Test </h2>
<h3> Test </h3>
<h4> Test </h4>
<h5> Test </h5>
<h6> Test </h6>
```

#### Paragraphs ``<p> </p>``

Paragraph adalah salahsatu element penting dalam membangun konten berbasis text. tag ini bekerja dengan memerintahkan browser untuk memberi satu spasi  pad sebelum dan sesudah tag `<p>`

```html
<main>
    <section>
        <h1>Emery Tak Kapok Melatih di Liga Inggris</h1>
        <p>Pelatih Spanyol Unai Emery masih menjalani karier yang cukup sulit di Arsenal. Meski begitu, Emery
            mengaku mau-mau saja melatih lagi di Liga Inggris.</p>
    </section>
    <section>
        <h1>Angkat Trofi di Stadion Kosong Akan Terasa Aneh Bagi Liverpool</h1>
        <p>Liverpool sedikit lagi akan menjuarai Liga Inggris musim ini. Namun jika hal itu terjadi, The Reds
            kemungkinan akan merayakannya di stadion kosong.</p>
    </section>
</main>
```

#### Line Breake ``<br>`` & Horizontal Rule ``<hr>``

Karena pada sesi sebelumnya kita telah menggunakan line break, maka sekalian saja kita bahas``<br>`` tag artinya membuat satu line breake, tag ``<hr>`` mempunyai fungsi yang sedikit mirip,  tag ``<hr>`` ini akan membuat line break tetapi dengan menambahkan garis horizontal diantara pemisahan baris.

```
<main>
    <section>
        <h1>Emery Tak Kapok Melatih di Liga Inggris</h1>
        <br>
        <p>Pelatih Spanyol Unai Emery masih menjalani karier yang cukup sulit di Arsenal. Meski begitu, Emery mengaku mau-mau saja melatih lagi di Liga Inggris.</p>
    </section>
    <hr>
    <section>
        <h1>Angkat Trofi di Stadion Kosong Akan Terasa Aneh Bagi Liverpool</h1>
		<br>
        <p>Liverpool sedikit lagi akan menjuarai Liga Inggris musim ini. Namun jika hal itu terjadi, The Reds
            kemungkinan akan merayakannya di stadion kosong.</p>
    </section>
</main>
```

#### List

Digunakan untuk membangun konten bebasis list,yang termasuk dalam elemen list ini adalah tag tag berikut ini :

- `<ol>` ordered list 

- `<ul>` unordered list

- ``<li>`` list item

  

- `<dl>` definition list 

- `<dt>` definition term 

- `<dd>` definition data

sekarang kita akan  membahas  tag `<li> <ol> dan <ul>`, tag-tag ini digunakan untuk membangun item list ciri khasnya adalahmenggunakan notasi dot untuk unoreder atau angka untuk ordered list, peggunaanya seperti contoh berikut :

```html
<p>penggunaan unordered list:</p>
<ol>
  <li>buku</li>
  <li>pensil</li>
  <li>tas</li>
</ol>

<p>penggunaan unordered list:</p>
<ul>
  <li>buku</li>
  <li>pensil</li>
  <li>tas</li>
</ul>
```

Tag-tag dalam kategori ini mempunyai attribute  : 

- unorder
  - type : defaultnya bullet type (disc, circle, square)
- ordered
  - type : ordering dari list (1, A, a, I, or i) 
  - reversed : urutan (backward) 
  - start :  menentukan angka awal (for number type) 

Sekarang kita akan membahas tag-tag selanjutnya yaitu `<dl> <dt> dan <dd>`, tag tag ini digunakan untuk membangun list dengan koten dan deskripsi yang berhubungan misal seperti daftarpustaka pada buku, seperti :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1m2ol1i9yas8g8hxb2n7.png)

```html
<dl>
                    <dt>
                        <strong>Emery Tak Kapok Melatih di Liga Inggris</strong>
                    </dt>
                    <dd>
                        <p>Pelatih Spanyol Unai Emery masih menjalani karier
                            yang cukup sulit di Arsenal. Meski begitu, Emery
                            mengaku mau-mau saja melatih lagi di Liga Inggris.</p>
                    </dd>


                    <dt>
                        <strong>Angkat Trofi di Stadion Kosong Akan Terasa Aneh Bagi Liverpool</strong>
                    </dt>
                    <dd>
                        <p>Liverpool sedikit lagi akan menjuarai Liga Inggris
                            musim ini. Namun jika hal itu terjadi, The Reds
                            kemungkinan akan merayakannya di stadion kosong.</p>
                    </dd>
                </dl>
```