Why a Webpage Structure is important
It's long time ago since we made our websites by coding the html source. I've been a pure html-fan and I still like to make pages with code editors, PSPad and Brackets, to name two of them, are visible on my task bar and I use them often.
Nowadays we have pagebuilders, wysiwyg (what you see is what you get) editors and all that stuff that let us create our sites visually. That is great but it's dangerous too.
How our pages are used
Why is it dangerous to build a site visually, you may ask? Isn't it just that what my readers are seeing?
What we see is the representation of the code, how it is represented depends on your screen size and specifications (like colors, number of pixels, etc.), the source code and the software used. The browser is such a software and as you might know, not every browser can show every code. It needs to know about the tags used and the way it should be presented. Just compare a small mobile phone with a wide screen desktop pc.
And there is other software involved that wants to read our code. For example the search engine spiders, aka robots or bots. These don't visualize your webpage as you want it to be, they extract informations out of your site to categorize, summarize or analize it.
Another example would be software for printing or converting, like a html to pdf converter. This kind of software needs to get all information that should be in the output by handling a layout that fits to the given output format.
Markup Standard
You see, it is complex and a lot of szenarios are there our code is used. That's why sgml was developed long time before the www exists. The Standard Generalized Markup Language defined on how we should structure our textdocuments, so they can be processed for thinks like named before.
The markup is just that, what we call tags now. Like the title-tag: <title>My Awesome Title</title> together with how we should structure that in a document. A basic html-site is a good example for that:
<!DOCTYPE html>
<html>
<head>
<title>Basic Website<title>
</head>
<body>
<h1>Example for a basic website</h1>
<p>Content of the <strong>website</strong><p>
</body>
</html>
The basic concept is, there are start-tags like <body> with correspondending end-tags </body>. When a software reads a document and finds a <body>-tag, it expects everything that follows now, till the end-tag </body> belongs to the content of this webpage.
In this body we can nest other tags. Which ones, are defined in a DTD, a document type definition. In case of HTML, the DTD allows that we can have a <title>-tag nested within <head></head> but not in the <body> of our content, as all things in the head are just to give informations about our website, but what should be presented stays in the <body>. There are elements in a DTD's that are strict, meaning for example you have to have a <title> in your <head>, and other things that are optional, like you can have one <p> Paragraph, as much as you like or even none in your sites <body>. If we follow the DTD strict we have a valid document, which would be a kind of guarantee, that every software can process it. Another term that is used is well-formed, which means we nested all tags the right way. Example: right: <b><i>bold-italic</i>bold</b>, wrong: <b><i>bold-italic</b>= error: unexpected end-tag... </i>
Getting confused?
To just keep it simple: Our code need to have a structure every kind of software can understand. The standard we now have, is HMTL5. This is our language, in the dictionary are the tags we can use and the grammar is all about the structure.
If we make mistakes some of our readers (the software) can't understand us.
Example:
<head>
<title>Basic Website<title>
<title>Another Title<title>
</head>
So which title google should use to list your website? The first, because it was first, the second, because it might be the revision, or a mixture of both?
Another basic failure we do is:
<h1>My Page Title</h1>
<h1>My Super First Article</h1>
<h1>About me</h1>
That way it's unclear what is your top headline. You may have used them all, because you wanted the same look. But that's not what a h1 is meant for. Google may think, you try to spam and cheat the engine by making more things the top topic. If you want to have the same look, you need to use style sheets, like css. But that's another big topic.
A good Structure helps
As more as you help the search engine robots to understand the intention of your website, by delivering a good structure, as better they will list you.
Example of a good structure that delivers a search engine an overall sight of what your page is about:
<h1>My Main Keyword</h1>
<p>My main keyword is so important because...</p>
- <h2>My Keyword is popular</h2>
<p>My keyword is not only popular...</p>- <h3>A popular Keyword is awesome<h3>
<p>It's awesome that I have a main keyword that is popular</p>
- <h3>A popular Keyword is awesome<h3>
- <h2>My Keyword is also well known</h2>
<p>A well known keyword has better chances it's getting searched</p>- <h3>My Keyword is one of the most used words</h3>
<p>My keyword is one of the most used words, because it is so well known</p>
- <h3>My Keyword is one of the most used words</h3>
- <h2>Conclusion</h2>
<p>My Main Keyword is popular and it is awesome. It is well known by many and one of the most used words!</p>
If you take care of your structure your webpages are based on, it will benefit not only in better rankings. A good structure is easier to understand too.
I hope that can give you a picture of why it is important how you are writing your webpages.
Happy coding
Corse
Recent Comments
6
That's way over my head lol, but I'm sure it will help lots of people and thank you for taking the time to create it :)
See more comments
I know nothing about coding, but my son, after seeing the start I have made with WA, wants me to learn. Many, many years ago I worked only with DOS like everyone else. It can't be too much hard to learn. Thanks for the post. I am going to find a course.
DR, try http://www.w3schools.com. This is what I am plowing through. It does html and css. I am doing a glossary but keep getting side tracked.
w3schools is a good resource for coding especially if you need some details on a specific tag.
Just look to the headers tags, like h1, h2, h3 (heading 1 to 3) to get the picture my post is about.
You don't need to learn html in detail to make use of a good structured site. The wordpress editor is good enough for that.
Corse, I am a fiddler. I love mucking around with computers to get them to do what I want them to - not necessarily what they are meant to do. I have coded in prehistoric codes so my curiosity continues and led me to this site. I am getting somewhere but slowly. At least I know the coding protocols.