Elements

In HTML, we use elements to build webpages. Examples of elements are images, input fields, and buttons.

<html>
<head>
<style>
img { width: 100%; }
.button-wrapper { padding: 0 24px 24px 24px; }
button { background-color: #1E97FF;
outline:none; border: none; border-radius: 24px; color: white; height: 48px; width: 100%; text-align: center; text-decoration: none; display: block; font-size: 16px; font-family:FibraOne-SemiBold; font-weight: bold; letter-spacing: 1px; cursor: pointer;}
</style>
</head>
<body>
<img id="image">
<div class="button-wrapper">
<button onclick="cycle()">HIGHLIGHT NEXT ELEMENT</button>
</div>
<script type="text/javascript">
var images = ['https://images.getmimo.com/images/eba0f984-4e01-42f4-a8bf-7e0c7079f2d2', 'https://images.getmimo.com/images/d0950282-f537-4a5f-b397-80ad9c57208b', 'https://images.getmimo.com/images/a6ae1e8a-98d5-4bf2-963a-cd06067eabad'];
var index = 0;
document.getElementById('image').src=images[0];
function cycle() { index += 1;
if (index >= images.length) {
index = 0;
}
document.getElementById('image').src=images[index];
}
</script>
</body>
</html>
]]>

Tags

An element consists of tags and content. The tags help a computer understand what instructions it should follow while the content explains what to display.

<html>
<head>
<style>
img { width: 100%; }
.button-wrapper { padding: 24px 24px 24px 24px; }
button { outline:none; background-color: #1E97FF; border: none; border-radius: 24px; color: white; height: 48px; width: 100%; text-align: center; text-decoration: none; display: block; font-size: 16px; font-family:FibraOne-SemiBold; font-weight: bold; letter-spacing: 1px; cursor: pointer;}
</style>
</head>
<body>
<img id="image">
<div class="button-wrapper">
<button onclick="cycle()">HIGHLIGHT NEXT TERM</button>
</div>
<script type="text/javascript">
var images = ['https://images.getmimo.com/images/25d9d867-c0d3-4b03-b902-37b3f5a5e87c', 'https://images.getmimo.com/images/507bedda-205a-4cb0-a1e1-b4eb9efa4fa3', 'https://images.getmimo.com/images/3572b09e-4b04-4564-b017-dd2945e92424'];
var index = 0;
document.getElementById('image').src=images[0];
function cycle() { index += 1;
if (index >= images.length) {
index = 0;
}
document.getElementById('image').src=images[index];
}
</script>
</body>
</html>]]>

The element above makes it clear to a computer that you want to display Click me! inside a button.

Understanding code

The creators of HTML gave elements names that closely resemble what they display on a webpage.

<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 displays</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0pky">p</td>
<td class="tg-0pky">A paragraph of text</td>
</tr>
<tr>
<td class="tg-0pky"><span style="font-weight:400;font-style:normal">button</span></td>
<td class="tg-0pky">A clickable button</td>
</tr>
<tr>
<td class="tg-0pky"><span style="font-weight:400;font-style:normal">h1</span></td>
<td class="tg-0pky">A large heading</td>
</tr>
<tr>
<td class="tg-0pky"><span style="font-weight:400;font-style:normal">h6</span></td>
<td class="tg-0pky">A small heading</td>
</tr>
</tbody>
</table>
</body>
</html>
]]>

As you get more familiar with element names, you'll understand the structure of a webpage just by looking at the tags and content in HTML code.