<!-- Tells browser HTML5 is used -->
<!DOCTYPE html>
<!-- Parent tag of all other tags -->
<html>
<!-- Contains tags to set metadata for the HTML document -->
<head>
<!-- Set text to be shown on the browser's title bar -->
<title>Getting Started with HTML</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<!-- Contains tags to set content of the HTML document -->
<body>
<!-- Set a header using h1 tag -->
<div id="title">
<h1>Learning HTML by doing!</h1>
<div id="topics-learnt">Topics learnt: HTML, CSS</div>
</div>
<div class="hero-image">
<img
src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
/>
</div>
<div class="container">
<h3>HTML</h3>
<!-- div tag divides content across sections -->
<div class="tile" id="tile1">
<p>All HTML tags go inside the "html" element</p>
<a href="https://www.crio.do">More</a>
</div>
<div class="tile">
<p>"title" tag content is displayed on the browser's title bar</p>
<a href="https://www.crio.do">More</a>
</div>
<div class="tile">"div" tag divides content across sections</div>
<div class="tile">"b" tag makes text bold</div>
<div class="tile">Class attribute groups HTML elements</div>
<div class="tile">
Id attribute can be used to uniquely identify an element
</div>
<div class="tile">
Excepteur dolor ex ex tempor officia amet eu. Ea dolor ea laboris
laborum irure duis. Esse ea aute eiusmod fugiat magna minim occaecat.
Proident reprehenderit Lorem esse Lorem quis elit ex veniam enim. In
excepteur eu pariatur fugiat ea exercitation non dolore.
</div>
</div>
<!-- p tag's used to wrap text -->
<!-- b tag makes the text it wrap, bold -->
<p id="footer"><b>Created by: Crio.Do</b></p>
</body>
</html>