# HTML5 İLE GELEN YENİLİKLER

Kaynak: https://webodasi.com/html5-ile-gelen-yenilikler/
Yazar: Meryem Işık
Yayın: 2020-07-07
Güncelleme: 2020-07-16

Merhaba arkadaşlar. Önceki HTML5 derslerimizde  **[HTML5 Nedir, faydaları nelerdir?](https://webodasi.com/html5-nedir-nasil-kullanilir-faydalari-nelerdir/)** ve **[HTML'te yapısal etiketler](https://webodasi.com/html5te-yapisal-etiketler-nelerdir-nasil-kullanilir/)**  konularını işlemiştik. Bugünkü dersimizde HTML5 ile gelen yeniliklere değineceğiz.

 

HTML5 ile sanal dünyamızda ne gibi değişiklikler oldu?

 

- HTML5 sayesinde sitelerimize animasyon ekleyebiliyoruz.
- Yüklemek istediğimiz videolar daha kalite bir şekilde tarayıcı ekranında görüntüleniyor.
- Kullandığımız tarayıcıların daha hızlı çalışmasını sağlıyor.
- Aynı anda birden fazla site bağlantısı gerçekleştirebiliyoruz.
- Bilgisayardan istediğimiz dosyayı sürükle bırak özelliğini kullanarak web sitesine yükleyebiliriz.
- İnternet bağlantısı olmadan web sitesindeki dosyaları tarayıcı ekranında görüntülenmesini sağlıyor.

 

Aklıma gelenleri sizlerle paylaştım. HTML5 ile gelen yenilikleri arttırabiliriz.

 

#### HTML5 İle Gelen Etiketler

 

HTML5'te yapısal etiketler yazısında bahsetmediğim etiketlerden bahsedeceğim.

 

- **<canvas>,** etiketi javascript sayesinde grafiksel çizimler yapmak için kullanılır. Örneğin; daire, çember, dikdörtgen vb. şekiller oluşturulabilir. <canvas> etiketi tarayıcı ekranında dikdörtgen bir şekle sahip. Herhangi bir kenarlığa sahip değil.

 

```
 <canvas style="border: 1px solid red;" ></canvas>
```

 

![html5 canvas](https://webodasi.com/wp-content/uploads/2020/07/canvastagi.png)

 

Örneğimizde genişlik ve yükseklik değerlerini vermedik ve göründüğü gibi tarayıcı ekranında dikdörtgen şekli oluştu.

 

- **<audio>,** HTML5 öncesinde sayfada ses oynatmak için eklenti kullanmamız gerekiyordu. HTML5 sayesinde eklenti kullanmadan sayfada ses oynatma işlemi gerçekleştiriliyor.

 

```
<audio controls="controls">
  <source src="ses.ogg" type="audio/ogg" />
  <source src="ses.mp3" type="audio/mpeg" />
  Tarayıcınız audio etiketini desteklemiyor.
</audio>
```

 

Controls özelliği ses dosyası için çalma, durdurma gibi kontroleri eklemede kullanılır. <source> etiketi dosya kaynağını belirler. Tarayıcı bu kaynaklardan desteklediği dosya kaynağını açar.

 

- **<progress>,** bir görevin, işlemin ilerleme veya tamamlanma sürecini kullanıcıya görsel olarak göstermemizi sağlar, iki standart özelliği vardır. **Max;** Görevin ya da işlemin bitirilme durumunu tanımlar. **Value;** Görevin ya da işlemin şu anki durumunu tanımlar. Örneğin;

 

```
<p>1. Durum:  
   <progress value="25" max="100"> </progress>  
</p>  
<p>2. Durum:  
   <progress value="50" max="100"> </progress>  
</p>  
<p>3. Durum:  
   <progress value="75" max="100"> </progress>  
</p>  
<p>4. Durum:  
   <progress value="100" max="100"> </progress>  
</p>
```

 

![HTML5 progress etiketi](https://webodasi.com/wp-content/uploads/2020/07/deneme.png)

 

- **<caption>,** etiketi tablo başlığını tanımlar. Her tabloda yalnızca bir tane başlık tanımlanabilir. Basit ir örnek verecek olursak;

 

```
 <table border="1px">
   <caption>Kurs İçerikleri</caption>            
     <tr>          
       <th>Dersler</th>            
        <th>Süre</th>            
      </tr>            
      <tr>            
        <td>HTML Dersleri</td>               
        <td>120 Saat</td>
      </tr>    
       <tr>            
          <td>CSS Dersleri</td>               
          <td>100 Saat</td>
      </tr>            
</table>
```

 

![HTML5 caption etiketi](https://webodasi.com/wp-content/uploads/2020/07/1-3.png)

 

- **<embed>,** etiketi sayesinde sayfamıza başka bir sayfadan kaynak, içerik, eklenti gibi bir çok özelliği sayfamıza dahil etmemizi sağlayan bir etikettir. Diyelimki farklı bir sayfada bulunan bir resmi sitenizde kullanmak istiyorsunuz. <embed> etiketimiz içinde src="" ile çekmek istediğiniz alanın url adresini belirtiyorsunuz. İsterseniz CSS ile biçimlendirebilsiniz.

 

- **<details>,** etiketi kullanıcı tarafından görüntelenip gizlenebilen ek bilgiler tanımlanmasını sağlar.

 

- **<summary>,** etiketi <details> etiketinin başlığını tanımlar. Başlık bilgisi içeriğin gösterilip/gizlenmesi için tıklanabilirdir.

 

```
<details>
   <summary>Göster / Gizle</summary>            
   <p>Başlığa tıklandığında bu içerik gizlenir veya gösterilir.</p>   
</details>
<details>
   <summary>Göster / Gizle</summary>            
   <p>Başlığa tıklandığında bu içerik gizlenir veya gösterilir.</p>   
</details>
```

 

![HTML5 summary etiketi
HTML5 details etiketi](https://webodasi.com/wp-content/uploads/2020/07/5.png)

 

- **<time>,** etiketinin tarayıcı üzerinde görsel açıdan bir etkisi yoktur. <time> etiketi Gregoryan takvimine göre saat veya tarih tanımlar. Örneğin;

 

```
<p>Her sabah <time>10:00</time> gibi kalkarım.
```

 

- **<mark>,** yazıda vurgulamak istediğimiz parçaları mark etiketi içine yazabiliriz. Örneğin;

 

```
<p>HTML derslerini <mark>tekrar etmeyi</mark> unutma.</p>
```

 

![HTML5 mark etiketi](https://webodasi.com/wp-content/uploads/2020/07/edfdf.png)

 

- **<hgroup>,** etiketi başlık etiketlerinin gruplandırılması için kullanılır.Bu etiket <h1> ... <h6> başlıkları, başlıklar alt başlıklara sahipse gruplandırmak için kullanılır.

 

- **<datalist>,** etiketi <input> etiketi için önceden tanımlanmış açılabilir liste tanımlar. <datalist> etiketi "otomatik tamamlama" özelliğini tanımlar. Kullanıcı veri girişi yaptığında önceden tanımlanmış açılabilir liste gözükecektir. <input> etiketine bağlanırken input etiketinin list özelliği kullanılır. Örneğin;

 

```
<input list="ProgramlamaDilleri">
   <datalist id="ProgramlamaDilleri">         
     <option value="PHP">         
     <option value="JAVASCRİPT">         
     <option value="C#">         
     <option value="C++">         
     <option value="RUBY">         
   </datalist>
```

 

![HTML5 datalist etiketi](https://webodasi.com/wp-content/uploads/2020/07/DEN.png)