Home >> Blog >>

The Basic Anatomy of a Web Page

April 12th, 2021
lines of HTML codes

In 2021, web pages can be very complex things. A modern web page is a synergy of multiple programming languages including but not limited to HTML, CSS and Javascript. Any website owner – and therefore any business owner – should know the basic anatomy of a web page. It’s important. Even if you don’t manage your own website or do your own web design. It’s part of our no black boxes philosophy.

So in today’s blog I’m going to explain the basics of web page anatomy.

we build websites

Every web page on the entire internet is, at it’s core, a basic html frame:

<html>

<head>
<title></title>
head tags go here
</head>

<body>

everything that appears to the user within the browser goes here

</body>

</html>

The above code is an extremely simplified version of any web page you’ve ever viewed.

A html tag starts with a < and ends with a >. An opening tag is exactly that, as shown on line 1 of the above code. A closing tag starts with </ and ends with > as seen on the last line of the above code.

There are four sets of HTML tags in the above code.

The first is the <html> and </html> which is the first and last lines of the document.

The second set of html tags are the head tags. Everything between <head> and </head>. This is where stylesheet links, font imports and meta tags go. The title tag should always be at the top of the head and therefore on the line directly underneath <head>. The title tag is what Google and other search engines use as the name of the page (the bit in blue that you click on in search results) when your page appears in search results.

Below the head, we have the body, which starts with <body> and ends with </body>. Everything between these tags will appear to the user in the browser and form to content of the web page, unless told not to by a CSS command.

And that’s it – a very basic web page.

Need a website?

If you need a website of for your business, brand or organisation, talk to us today to see how we can help.

About Smart & Slick

We are a digital agency specializing in web design & app development.

Speak to us today to discuss how we can help your business grow.

Leave a Reply

Your email address will not be published. Required fields are marked *