<html>
<body>
<style type="text/css">
body { color: #3E416D; font-family: FibraOne-Regular; text-align: left;}
table { border-collapse: collapse; margin-left: auto; margin-right: auto; width: 100%; }
.tg td{border: 1px solid #D9E8FB;font-family:FibraOne-Regular, sans-serif;font-size:14px;
overflow:hidden;padding:13px 13px 13px 6px;word-break:normal;}
.tg th{border: 1px solid #D9E8FB; font-family:FibraOne-Regular, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:13px 13px 13px 6px;word-break:normal;}
.tg .tg-0lax{text-align:left;vertical-align:top}
table tr:first-child th {border-top: 0;}
table tr th:first-child {border-left: 0;padding-left: 0px;}
table tr th:last-child {border-right: 0;}
table tr td:first-child {border-left: 0; padding-left: 0px;}
table tr:last-child td {border-bottom: 0;}
table tr td:last-child {border-right: 0;}
</style>
<table class="tg">
<thead>
<tr>
<th class="tg-0pky">Element name</th>
<th class="tg-0pky">What it tells a web browser</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0pky">em</td>
<td class="tg-0pky">This content is emphasized</td>
</tr>
<tr>
<td class="tg-0pky"><span style="font-weight:400;font-style:normal">strong</span></td>
<td class="tg-0pky">This content is important</td>
</tr>
<tr>
<td class="tg-0pky"><span style="font-weight:400;font-style:normal">button</span></td>
<td class="tg-0pky">This content is inside a button</td>
</tr>
</tbody>
</table>
</body>
</html>]]>
When content is structured the right way, web browsers know how to present the content in different ways depending on a user's settings.
For example, a web browser that explains the content of a website to a blind person can speak in a lower tone for emphasized content or explain what happens when you click a button.