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.
HTML Elements
<h1>Hello World</h1>
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.
Element Examples
-
<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 -
<h1>through<h6>- used to display a header element, with h1 being the biggest through to h6 being the smallest
Attributes
<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 attribute="value" which can be seen above inside a full element. There are many different types of attributes, some of which are used behind the scenes in CSS or Javascript and some of which are used to tell the element something that it should be doing.
Attribute Examples
-
class- used to target the element through CSS or Javascript along with all other elements that have the same class value -
id- used to target the element through CSS or Javascript or used to link to this part of the page with an anchor<a>element -
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
Nesting
<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.
Further Reading
If you're interested in reading more about HTML, MDN has a wealth of information about all topics relating to HTML.
Top comments (1)
Excellent intro to HTML concepts 👏👏👏