# Semantic HTML Tags

## <address>

<address>
  <a href="mailto:[e-mail]">[e-mail]</a><br>
  <a href="tel:[phone]">[phone]</a>
</address>

## <datalist>

<form>
   <fieldset>
      <input type="text" list="lang">
   </fieldset>
</form>
      
<datalist id="lang">
   <option value="JavaScript">
   <option value="Python">
   <option value="Java">
   <option value="C">
</datalist>

## <details> and <summary>

<details>
<summary>Names:</summary>
<ul>
<li>Christopher</li>
<li>Wes</li>
<li>Johnny</li>
</ul>
</details>

<details>
   <summary>Names:</summary>
   <ul>
      <li>Christopher</li>
      <li>Wes</li>
      <li>Johnny</li>
   </ul>
</details>

## &lt;dialog&gt;

<dialog open>This is an open dialog window</dialog>

## &lt;time&gt;

<p>Today is
   <time datetime="2020-05-07T14:00">May 7th</time>
</p>

## &lt;progress&gt;

<label for="file">Downloading:</label>
<progress max="100" value="60" id="file">60%</progress>

## References

### Semantic HTML

1. [HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
2. [Use semantic HTML for easy keyboard wins](https://web.dev/use-semantic-html/)

### ARIA Roles

1. [WAI-ARIA Roles - Accessibility | MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)

### HTML5

1. [Top 10 HTML5 Questions - Featured Challenges and Events - Codecademy Forums](https://discuss.codecademy.com/t/article-top-10-html5-questions/503672/3)

### Videos

1. [Semantic markup - Designing in the Browser](https://youtu.be/arMgwKY52Bs)

###### tags: `HTML`