HTML is the basic structure of a webpage. It contains a series of elements and tags that enclose the content. It also contains links which connect other pages or external websites.
Anatomy of an HTML Element
The anatomy of an HTML Elements contains a opening tag, a closing tag and content. We will read about HTML Elements in more detail in the next section.
Elements also contain attributes where you can provide extra information like styling, behavior, etc. Attributes can be added using class, id, etc.
Some elements do not contain any content or closing tag. These elements are also known as “Empty Elements”.
Example for an empty elements is:
<img src="photo.jpg" alt="My Photo" />
Basic HTML Structure
Just like when you are writing an email, a basic structure of an HTML document contains:
Doctypes add a set of rules for the document to behave correctly and it is added at the top most part before writing any html.
Also known as a root element, it wraps the html elements and structure.
The head part of the document, here you add all important information or links which is required at the start of the document or provide information to the browser for the current webpage. Here you add “Meta Tags” and any css styling or css links to your stylesheet. Any script tags can be added here but, can also be added at the end of the page for faster loading times. (Except using async to script tags).
The title tag goes inside the head tag and it provides the title of the webpage. The title is also used for bookmarking in your browser.
The link tag goes inside your head tag and is used to link css stylesheets, icons, etc. link tag is always an empty element and contains only attributes.
The body tag is where the body of your webpage goes. It contains all the content, images, lists, data, etc, of your webpage. The body tag content is what you see on screen.