The Basics of HTML
5 min read
What is HTML
HTML is the very first building block of developing websites. It describes to a browser what content to display on a web page, and in a basic way, how that content should be displayed.
HTML is made up of elements. An element consists of an opening tag and a closing tag. A tag consists of the name of the element between two angle brackets, with a backslash to indicate if it is a closing tag. Any text between the tags is what is displayed on the page, with the tag indicating what element it is and how it should be displayed.
The above example shows a typical HTML element. It starts with an opening tag, the text we want to display, and then a closing tag. We can see that the closing tag is identical to the opening tag, but the name of the element is preceded by a backslash. MDN has a very good image depicting the anatomy of a HTML element here.
The content between the tags can also encompass other HTML elements. This is called nesting and is generally how HTML pages are built. Elements can be nested inside other elements to create the page layout that you desire.
<div>- used to group elements together
<p>- used to display a paragraph
<img>- used to display an image
<a>- used to link to another website or to a particular part of the page
<h6>- used to display a header element, with h1 being the biggest through to h6 being the smallest
<h1 class="header-text">Hello World</h1>
HTML elements can have extra pieces of information added into them in the form of an attribute. They are inserted into the opening tag and follow the format
href- used to provide an anchor element with the link that it should go to
src- used to provide a link to the image that an
<img>element should display
<html> <body> <div> <h1>Hello World</h1> <a href="https://www.google.com>Click me!</a> </div> <div> <h4>Dinosaurs</h4> <p>Dinosaurs are great.</p> </div> </body> </html>
Above is a typical example of nesting elements within other elements. The top level is an
html element which tells the browser that everything between those tags is going to be HTML. Next is a
body element which tells the browser to display everything between its tags. (There is also a
head element which is where stylesheets and scripts are loaded.) The next level contains two
div elements which are being used to group some elements together.
If you're interested in reading more about HTML, MDN has a wealth of information about all topics relating to HTML.