Let me show some examples first before I bore you all with my lots of writing. These examples are of the web pages I created. One example of a webpage without semantics elements. Means, all the contents are within the tag <body></body> and the other one contains semantic elements which I will explain later in this article.
PLEASE CLICK ON IMAGES TO SEE THE FULL IMAGE BECAUSE THE IMAGES ARE NOT VERY CLEAR.
Well, this image of web page structure is a simple web page which has no structure because none of semantic elements are used in it. It is simple and plain. The other image is of semantic web page structure which has semantic elements. If you see the difference, the both web pages looks exactly the same. There is not a single pixel difference between them.
Because of these differences I started thinking that why we should use Semantic Elements? Why these elements are necessary and useful? Why we should use semantic elements to layout the content where as the non-semantic elements can do the same job ? So, I always had these questions in my mind.
My instructor in Udemy Mr Laurence Svekis explained all about these in his lecture. It took me sometimes to understand but finally I have understood. In order to share this knowledge, I created these examples which I hope will be helpful to people who are interested.
I must mention here about my instructor in Udemy Mr Laurence Svekis first, because he is a very good instructor indeed. I learnt a lot from him and now able to understand this website coding better than before. When I started learning I had zero knowledge in website designing but he explained very good and clearly everything that I easily learnt. I haven’t finished my course as yet because of my very busy schedule. However, I will complete the course as I got time. I also learnt some basics of WordPress in Udemy. It is indeed a very good provider of online courses of all types.
Now, let me continue giving further examples. First I start with Advantage and Disadvantage of Semantic and Non-Semantic Elements on designing Web site pages.
ADVANTAGE OF NON-SEMANTIC ELEMENTS:
All the elements whether they are non-semantic or semantic elements are useful. Non-Semantic elements are still important as the Semantic Elements and still important to create web page. Without these elements, web page cannot be created. They work the same way, do the same jobs but they are used for different purposes. Therefore, non-semantic elements cannot be ignored.
DISADVANTAGE OF NON-SEMANTIC ELEMENTS:
There is only one disadvantage of this element and this disadvantage is that it cannot define or tell the Browser and Search Engine that what type of contents it contains. Means that are the contents Header of the page?, is it a Navigation contents like Menu?, or is it an Article or some Aside contents or Footer contents? etc.
ADVANTAGE OF SEMANTIC ELEMENTS:
Advantage of Semantic Elements are that these elements can define or tell the Browser and Search Engine that what type of contents they are containing. Which is good for Search Engine and Browser to display the contents of the web page correctly with the meaningful layout of contents. And of course, it helps the readers to determine what type of contents they are reading and also it makes easy to layout and styling with CSS.
Now, it is time to show some images of both types of web pages with semantic and non-semantic elements. I have given their contents their unique colours and changed the layout of their contents and also changed angles to horizontal to differentiate the difference between both the elements and to make it more clear that how they work.
This image below is of Simple Web Page where I have not used any of Semantic Elements. I have given some background colours to the contents as you can see now, how this web page looks like. All the paragraphs are highlighted separately with their unique background colours. It does not defines what specific type of contents they are.
This image below is of Semantic Web Page where I used Semantic Elements. I have given their contents background colours but did not change the layout of contents. As you can see the whole page is created is meaningful. All the containers which are Semantic Elements HEADER, NAV, MAIN, ARTICLE, ASIDE, SECTION 1 AND SECTION 2, (ids of SECTION ) and FOOTER have their unique background colours instead of highlighting only paragraphs as in Simple Web Page image above. Within their colours the readers can determine the type of contents in this page.
Let’s change the layout of the Semantic Web Page. In the image below, I have moved some semantic elements like ASIDE and SECTION 1 towards right and kept SECTION 2 to left and now see it has become more meaningful web page. It can be done exactly like this by using non-semantic elements but as I explained in this article before, it will not define to search engine and reader that what specific type of contents are contained in it. Also, it needs more work to layout correctly.
SEMANTIC WEB PAGE STRUCTURE WITH SEMANTIC ELEMENTS WITH CONTENTS LAYOUT CHANGED.
In this image below I have changed the angle of Simple Web Page Structure to horizontal, as you can see, the contents of entire web page now does not make any sense. All the contents of this page are broken apart.
Styled Simple Web page without using semantic elements displayed horizontal.
The following image is of Semantic Web Page Structure displayed horizontally where I used semantic elements. Here, the reader can still determine that what type of contents are they reading and it still defines Search Engines and Browser the specific type of contents contained in this web page. Only the angle is changed from vertical to horizontal but all the contents are still intact in one place within their containers which are semantic elements.
The image below shows that even if change the width to smaller size, this semantic page is still readable and meaningful. All the contents arranged together in order very neatly within their elements. Readers can still determine that what specific type of contents contained in this page.
SORRY FOR POOR QUALITY IMAGES. PLEASE CLICK ON IMAGES TO SEE THE FULL IMAGE SO THAT YOU CAN SEE MORE CLEAR. I AM WORKING ON IT AND WILL REPLACE THESE IMAGES AS SOON AS IMPROVE THE QUALITY.
The following HTML coding is of Simple/Plain Web page which does not contain html semantic elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PLAIN WEB PAGE</title>
</head>
<body>
</body>
</html>
MOST COMMON HTML5 SEMANTIC ELEMENTS:
Now let me explain about the most common HTML5 Semantic Elements which I used in my coding in the semantic web page structure.
There are about 100 Semantic Elements according to MDN. I have used only few most common semantic elements. These elements are:
- HEADER
- NAV
- MAIN
- ARTICLE
- ASIDE
- SECTION
- FOOTER
I applied all these semantic elements within the <body> tag as shown in following HTML coding. I have checked my HTML web page structure coding with W3C MARKUP VALIDATION SERVICES https://validator.w3.org/ and no errror is found.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WEB PAGE STRUCTURE 1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
<article>
<aside>
</aside>
<section>
</section>
</article>
</main>
</footer>
</body>
</html>
Let me explain here now how I create Web Page Structure Example Page by using HTML5 Semantic Elements as follows which I hope will help you understanding the coding and my web page structure examples images.
<BODY> background colour BLACK and Text colour WHITE. It contains; HEADER, NAV, ARTICLE, ASIDE, SECTION (contains IDs SECTION 1 AND SECTION 2) and FOOTER.
<HEADER>background colour WHITE and Text colour BLACK. Contains it’s own contents which are HEADING and SUBHEADING.
<NAV> background colour YELLOW and Text colour blue. It contains <UL> and <LI> and <a> (UNORDERED LIST, LIST AND ANCHOR ) to create MENU.
<MAIN> background colour SANDYBROWN and Text colour BLACK. It contains ARTICLE, ASIDE, SECTION ( IDs SECTION1 and SECTION 2 ). All Posts, Blogs, all the writing are within this Element.
<ARTICLE> background colour AQUA and Text colour BLACK. It contains entire Blog Post, ASIDE and SECTION (IDs SECTION 1 and SECTION 2 ).
<ASIDE> background colour CRIMSONand text colour BLACK. It contains its own contents. this elements is inside <ARTICLE>.
<SECTION> consists of two parts which represent as SECTION IDs known as SECTION 1 and SECTION 2. This elements is also reside inside <ARTICLE>. Both Section Ids are given their unique colours.
<SECTION ID=”SECTION1″> background colour BLUE Text colour BLACK. It is ID of element <SECTION> and reside inside <ARTICLE>.
<SECTION ID=”SECTION2> background colour brown Text colour WHITE. It is second ID of element <SECTION > and reside inside <ARTICLE>.
<FOOTER> has no background colour, it is within the<BODY> and outside <MAIN> , therefore, its background and text colours is the same as <BODY>.
You may notice that this web page contains two SECTIONS which are SECTION 1 and SECTION 2 but I have mention SECTION Element only once in the coding as above. That is only to tell you the main and common elements I used. In order to use more than one Section or multiple Sections in the page you need to create ID’s or CLASSES which will enable you to use them within CSS to give them styling of your desire and this method is also apply to <ASIDE>. Therefore, let me show you how I created this HTML page and used CSS.
There are lots of writing in this coding so, you don’t have to write all of that if you don’t want to. So, you can copy and paste it into your code editor and do some practice or , I think it will be more better if you get contents and images from News Paper or magazine and try to do practice on it and make your web page looks like news paper or magazine.
When you write the contents you will notice that the layout keep changing, it happens because the size of elements box increases and decreases according to the size of contents. For example, if you take out some paragraphs from <article> the size of Article box which is Aqua color will shrink and the Section1, Section 2 and Aside boxes will move from their positions and if you add more paragraph into it then it will expand.
I have created this example page also in CODEPEN. Please click on this link https://codepen.io/khancode/pen/jdGmqr. You can try yourself , moving around contents, changing colors and if you like to change the angle of the page to horizontal then just remove the comments /* */ from body { in CSS as shown below.
body {
/* display: flex; */
I have just realized while I am writing that I forgot to add images in my Web Page Structure . Well, you can add images and videos where ever you like in the page when you practice. If you want to add video then please make sure your video must be saved as mp4 format because, HTML accept videos in mp4 format. I f you cannot or you do not have any application to convert video to mp4 format, you can do this in GOOGLE PHOTO. I use Google Photo and it does a great job for me.
If you want to know how to convert video to mp4 format, please visit my website page CONVERT VIDEO TO MP4 IN GOOGLE PHOTO. I have explain everything in very easy steps.I hope this will be helpful to you.
HTML coding for SEMANTIC WEB PAGE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WEB PAGE STRUCTURE 1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>BODY</h2>
<header>
<h1>HEADER<br />WEB PAGE STRUCTURE</h1>
</header>
<nav>
<ul>
<li><span>NAV</span></li>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<main>
<h2>MAIN</h2>
<article>
<h2>ARTICLE</h2>
<p>This artice is about Web Page Structure. I have given each elements colours to understand easily how the web page structure works.</p>
<p>All these Elements and Attributes are in fact Containers of other Elements and Attributes and contents we write.</p>
<p>Correct Web Page Structure is very important because an entire web page depends on it or you can say that Web Page Structure is a foundation of Web Page. So, if the web page structure is not correct then the styling of web page will be difficult and out of control, means it will not display as you want it to.</p>
<aside>
<h2>ASIDE</h2>
<p>This is Aside. Aside is to use for the contents which are related to the topic we currently writing but not the part of the contents which is written.</p>
<p>This Web page Structure consists of following parts:</p>
<ol>
<li>HEADER</li>
<li>NAV</li>
<li>MAIN</li>
<li>ARTICLE</li>
<li>SECTION</li>
<li>ASIDE</li>
<li>FOOTER</li>
</ol>
</aside>
<p>The colours of these Attribute are:
</p>
<ul>
<li><b>BODY=</b> Black Background, White Text and Purple Border.</li>
<li><b>HEADER=</b> White Background, Black Text and Yellow Border.</li>
<li><b>NAV=</b> Yellow Background, Black Text and Blue Border.</li>
<li><b>MAIN=</b> Sandybrown Background, Black Text and White Border.</li>
<li><b>ARTICLE=</b> Aqua Background, Black Text and red Border.</li>
<li><b>SECTION=</b> Blue Background, Black Text and Orange Border.</li>
<li><b>ASIDE=</b> Crimson Background, Black Text and Black Border.</li>
<li><b>FOOTER=</b> Black Background, white Text and Gold Border.</li>
</ul>
<p>All these colours I gave them to see the behaviour of these attributes and elements when changing their postions, changing their sizes and stylying them with CSS.</p>
<p>I used CSS for all the Stylying such as background colours, Text colours and Borders and positioning the contents.</p>
<p>As my Teacher MR LAWRENCE SVEKIS says that " CSS IS WHERE ALL THE MAGIC HAPPENS ", it is true. Since I started learning CSS I realized that CSS is a real fun and I believe that learning HTML will make you Wizard and when you became a Wizard you need magic spell and that magic spell you get from learning CSS and finally you need a Wand being Wizard so that you will get after learning JavaScript. </p>
<p>MR Lawrence Svekis is my teacher in Udemy. I am learning HTML, CSS and JAVASCRIPTS from him. He is indeed a very good teacher. All I have done in this Web Structure Example I learnt from him. I haven't completed the course due to spending not enough time to learn becuase of my full time long hours job. But what ever I have learnt so far I am proud of it.</p>
<section id="section1">
<h2>SECTION 1</h2>
<p class="seperatecontent">This is a block of section. It is similar to Article. We can add as many as sections we want by using ID and Class attributes.</p>
<p>Udemy is an online courses institute where you can learn many thousands of different courses like Website Designing, computer codings,Languages, 3d and 2d games. There are lots of more different courses in Udemy. I really love this Udemy.</p>
</section>
<section id="section2">
<h2>SECTION 2</h2>
<p>This is another section which I have added to see how more than one section works.</p>
<p>Well, to keep these sections separate we need to give IDs or CLASS to them otherwise all the separate sections will merge together and looks like as one section. Therefore, I have given them two different IDs to keep them separate as two different sections. </p>
<p>This Section 2 Background colour is Brown and Text colour is White. I kept it on its original default position to Left and I pushed the Section 1 to Right.</p>
</section>
<p>I have controlled their width, height and position by CSS. This content paragraph you seeing has not given any postion, it is displayed in its original postion side by side of Section 1 and Section 2 because this paragraph is added after the section 2. Therefore, this paragraph started from first available empty space after Section 2.</p>
<p>In order to floating postioning ASIDE, SECTION 1 and SECTION 2 correctly, I have added DISPLAY:INLINE; to ARTICLE in CSS. Witout adding this INLINE element, all the contents of ASIDE, SECTION 1 and SECTION 2 will overflow from ARTICLE. </p>
</article>
</main>
<footer>
<h2>FOOTER</h2>
<p>This is all rights reserved copywrite structure and contents.</p>
</footer>
</body>
</html>CSS CODING:
Please create CSS file and save as style.css and write these codes.
body {
background-color: black;
color: white;
border: 3px solid purple;
}
main {
background-color:sandybrown;
color: black;
border: 3px solid white;
}
header {
background-color:white;
color: black;
text-align: center;
border: 3px solid yellow;
}
nav {
background-color:yellow;
border: 3px solid blue;
}
nav li {
display: inline;
padding: 10px;
}
span {
color: blue;
font-size: 25px;
font-style: italic;
font-weight: bold;
}
article {
display: inline-block;
background-color:aqua;
color: black;
border: 3px solid red;
/*width: 600px;*/
padding: 5px 5px 5px 5px;
}
#section1 {
background-color:blue;
color: black;
border: 3px solid orange;
padding: 5px 5px 5px 5px;
width: 300px;
float: right;
}
#section2 {
float: left;
width:265px;
padding: 5px 5px 5px 5px;
background-color:brown;
color: white;
border: 3px solid sandybrown;
}
section .seperatecontent {
border: 5px solid white;
padding: 5px 5px 5px;
text-align: center;
}
aside {
background-color: crimson;
color: black;
border: 3px solid black;
padding: 5px 5px 5px 5px;
float: right;
width:300px;
}
footer {
border: 4px solid gold;
}I hope you will find this tip helpful and useful to your projects and learning. I am sorry for the poor quality images but I will try to make better images and post them to this page.
Please do not forget to give feedback. Thank you.