The websites are mostly constructed from three layer. First of all HTML wich creating a structure and content. Secondly, there is a CSS that includes how the website should look like. Finally, we have JavaScript with is able to reconstruct webpage depends on user interaction. So, my question is why on the Internet is so many pages written in div language?
Why using appropriate HTML tags is important?
In most cases, there is no difference when you build HTML structure using div or using tags like the article, main, nav so on so far. But your webpage could be explored by reader programs, searching robots, or scrapping robots and for this kind of site exploration is sensitive to build Website structure from various tags.
The fundamental HTML structure
When you use HTML5 on your page, HTML code should start with tags with informs web browser, that on this page you used tags implemented in the fifth version of HTML.
Next code line opening HTML code by using tag. In this tag, you can use attribute lang, which allows you to inform the web browser what kind of language you use to build content. For example, an English site should be described using an HTML tag like this. HTML closing tags are the last tag in the code.
Then each webpage should have three mine section:
<head>
<body>
<footer>
The Head section doesn’t appear in the view window in a web browser but contains a lot of information about the webpage. This information is wrapped in meta tags, with I describe below. Also in this part of the web page, you can include an external link to stylesheets, JavaScript code, or a link to font sources. What’s more in the head section you can put tag with informing a web browser what to display in tabs header, and you can include favicon, with the display on the left side of the title on the web browser tab.
The body section is the main part of the page. Here is the place, where all content should be added. This is also a place where you can use several different tags to describe what kind of content you add. The div tag is one of them, but this tag didn’t describe anything it just helps you wrap some content if you need to group it for the latter view formatting purpose.
The Footer section is the last part of the web page. Here is a good place to add some extra info for users like contact information, company name and address, and so on.
What type of information you can put inside meta tags?
First of all, you need to inform the web browser what type of charset code you will use. In most cases we use “UTF-8” so the meta tag, that informs web browser about this is:
<meta charset = “UTF-8”>Next, you can introduce yourself as the author of this web page and set the web page name, just like this:
<meta name=”author” content=”Krzysztof Nyrek”>
<meta name=”application-name” content=”Personal Blog”>Finally, you can set up some keywords, to made search engines happiest:
<meta name=”keyword” content=”Blog, Programing, HTML”>As I mention about search engines it’s also good to inform search engine spiders what to do with page content, and it’s several options. Default is that robots will collect content from pages and store it in a database. But also you can tell these robots to don’t do this “noindex” or don’t follow links included in page content “nofollow” even both of these settings together “none”. Meta tags look like this:
<meta name=”robots” content=”none”>Nowadays it’s very often the situation when somebody links to your webpage on Social Media portals like Facebook or Twitter. It’s good to tell this portal, how to manage content from the link. This is a whole family of meta properties called Open Graph. For example, if you want to set a title that should display in social media, you can set it in meta properties like this:
<meta property=”og:title” content=”Social Media title”>There are many more Open Graph options. You can set image, description, localization and so far.
The last thing about meta tags is about setting how the website should display on mobile devices. This is very important because if you don’t set this meta tag, a web browser installed on mobile devices will decide independently how to scale your website. So it’s worth setting that the initial scale should be 1, and optimized view on mobile devices using CSS. Meta tags look like this:
<meta name=”viewport” content=”width=device-width, initial-scale=1”>What about HTML body tags?
Let’s start from the top of the website. Usually, on the top of the website, there is a title of this page and some navigation structure. We can wrap this elements used tag. For SEO reason it’s good to add the
tag to web site title, and for readers applications, navigation should be nested in the tag.
Then we have
tag with tells web spiders, that this is a main part of the page. Here you should put all content that users should see. In the main part of the web page, you can also separate content to several or if you want to display some article and include external video it’s also good to use dedicated tags to do this like and.
When you include a text, there is a <p> tag to separated text into a paragraph, or when you list something there is an order list <ol> tags and unorderly <ul> tags.
I don’t mention form tags, because there is no way to replace them by div. Also, I skip the table tag just because it’s barely used now, but of course, it’s nothing wrong to use it.
So is any chance to use less div, on a webpage?
I am pretty sure that HTML5 offers web developers a lot of tags, that we can use in the state of div. Personally, I use div only when I need to put several web objects in one container, mostly for styling reasons. Another situation is when I use some tools like bootstrap, but I don’t like using it, because now we have Grid and Flex, and these two properties made a good job. More about why I love Grid, you can read here: I Love Grid. To summarizing let’s made our website more structured using various HTML tags instate of messing them a bunch of div.