HTML & CSS

HTML Basics

Let's start with the basics.

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.

Empty Elements

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:

<!DOCTYPE html>

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.

<html></html>

Also known as a root element, it wraps the html elements and structure.

<head></head>

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).

<title></title>

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.

<link>

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.

<body></body>

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.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: