Uderstanding the Basic Structure of a Website

Are you a writer? Do you read books, writeups?

Okay, let’s suppose, your teacher assigned you a written assignment, more likely about the history of smartphones, and instructed you to be careful about text formatting like bolding text, underlining text, making important lines colorful, or most importantly to quote the saying of someone.

There are two ways to do that: one is to use paper and pen. The second one is to use Microsoft Word. If you know MS Word, you have an idea of how to write documents.

The third way:

There is a third way to write content.

Okay, I know you must have downloaded the game sometime. Download Need for Speed in zip format xGB file size => it is the title: bold, right below the game features most probably are written in a bullet list, and so on to download button designed with a color scheme or an image. So this is all about formatting.

Now come to the third method of writing and formatting the content. The bold game title is heading, below all content is paragraphs, lists, images, audios and so on, and videos too. We can use a technical term web page.

Think about the stories you read in a newspaper: for each story, there will be a headline, some text, and possibly some images. If the article is a long piece, there may be subheadings that split the story into separate sections or quotes from those involved. Structure helps readers understand the stories in the newspaper. The structure is very similar when a news story is viewed online. When this story is viewed, in the terms of internet it is called a webpage.

A web page:

It is a document that is suitable for the website. The webpage is a document that is usually written in HyperText Markup Language - HTML that is accessible through the internet using any web browser. It may contain text, audio, video, downloadable data files, internal links & cross-links. It can be viewed by entering the correct URL pointing to a typical page/website.

There are two different types of webpages

• Static Web Page

• Dynamic Web Page

  
  

A single-page website has the functionality of a full-fledged website. Some single-paged websites are called spa. Single page application is a complete website that has only one page, using modern web technologies.

Structuring a web page:

The Hypertext Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables.

<h1> Hey Crazy man </h1>

Syntax:

Every language has its syntax is either a language, markup language, or programming language. HTML has its own syntax. < > and / are the special chars mostly used. ! we say this factorial in math, exclamation mark in the English language. But in computer language, it is not only an exclamation mark, but it declares a set of rules for HTML content. Look at example

<b> Yoshi Moshi </b> is a <i> game </i> character

  <b> Yoshi Moshi </b> is a <i> game </i> character

These two are not exactly the same. One example is written in the code block, and the other has no block. The first one is HTML, the second one is just the syntax of HTML. It is called compatibility. If you are a reader, you need a compatible device, a compatible file viewer, same case for writing you would need a writing pad, a pen, on Microsoft Word, the scenario is replaced with keyboards and computer screens. The third type is HTML, a text editor is a compatibility factor for HTML.

HTML Element:

HTML has a special pattern. Tags are most important in the HTML. In handwritten, there is no limit where to start, where to end our sets of rules are applied and until the page is full of ballpoint ink. In Microsoft Word, there is a limit, and we can not go beyond borders. We can not make any type of style until the customization ribbon helps us. But in HTML everything is restricted and perfectly sequenced. Without ending and closing tags, you can not write anything. But you can write un-parsed content. If you don't follow HTML rules, then the browser does not understand what you type. Actually HTML derived from XML. DOCTYPE declares the standard and version of HTML. The current version is 5. Doctype declares that HTML data is written in HTML 5 format. HTML element comprising off all data. Element has an opening and closing tags.

doctype > <html>  tag tag tag </html>

Next the title and the header. Title is basically additional item that is not in MS Word. Look at example.

doctype > <html>  <head> <title></title> <head> tag.. </html>

The <head> contains other head elements such as <title>, <meta>, <link>, <style> <link> etc.

The final look right here,

<!DOCTYPE html>
<html>
  <head>
	  <title>Hyprtext Markup Language</title>
  </head>

  <body>..</body>
</html>

HTML Tags:

Tags act like containers. They tell you something about the information that lies between their opening and closing tags.

<html>
  <body>
    <h1>This is the Main Heading</h1>
    <p>This text might be an introduction</p>
    <h2>This is a Sub-Heading</h2>
    <p>Many long articles have sub-headings.</p>
    <h2>Another Sub-Heading</h2>
    <p>Here you can see another sub-heading.</p>
  </body>
</html>

1. The opening <html> tag indicates that anything between it and a closing </html> tag is HTML code.

2. The <body> tag indicates that anything between it and the closing </body> the tag should be shown inside the main browser window.

3. Words between <h1> and </h1> are the main heading.

4. A paragraph of text appears between <p> and </p>these and tags.

5. Words between <h2> and </h2> form a sub-heading.

   
   

Body closing tag is the end of the main content to be shown in the browser, while closing tag of HTML is the end of HTML file and beyond this, no written words are supposed to be parsed by browser engine.

The Opening and Closing tag:

Now what exactly the tag is? Tag is an element of HTML. The tag has further entities. Tag is a set of right angle, left angle bracket, and a slash character "/" .

There are different HTML elements that make the structure of a web page. The HTML element, the body element is the main tag in marking markup. Further, the head tag is also an essential component in the SEO of web applications. The <header> tag makes the top of a web page, the main tag help in building the main part of the page, and finally, the footer element is here to make up the last portion of the web page.

Standard structure:

The standard website has a header section, a hero section, the main section including further sections contain rich content, and a sidebar of the website and the final one is usually the footer. These sections actually make the website complete.

Header:

The header element contains the content that appears at the top of every page of your website: the logo, tagline, search bar, and possibly a navigational menu. It is usually a big strip across the top with a big heading, logo, and perhaps a tagline. And it commonly stays the same from one webpage to another.

<header>
  <h1>Main Page Title</h1>
  <img src="logo.png" alt="codingboyo logo">
</header>

Navigation:

Navigation menus are commonly positioned at the top of a web page. If our site has too many links, we used to organize them by using <nav> element. Navigations are useful when it comes to ecommerce stores, education website, and it is too useful in classified ad posting site. Nav element is usually placed in the header element, and somewhat they have been seen in the sidebar. Footer also has a nice option to use menu tag.

<nav class="crumbs">
    <ol>
        <li class="crumb"><a href="#">Bikes</a></li>
        <li class="crumb"><a href="#">BMX</a></li>
        <li class="crumb">Jump Bike 3000</li>
    </ol>
</nav>

<h1>Jump Bike 3000</h1>
<p>This BMX bike is a solid step into the pro world. It looks as legit as it rides and is built to polish your skills.</p>

Main Content:

The big area in the center of the website page that contains most of the unique content, for example, this article you are reading right now, the video you want to watch, or the main story you're reading, or the map you want to view, or the news headlines, etc. This is the one part of the website that definitely will vary from page to page! the main element between header and footer elements to contain the primary content of your web page. The <main> HTML element represents the dominant content of the <body> of a document

<header>Gecko facts</header>

<main>
    <p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.</p>
 
    <p>Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.</p>
</main>

Sidebar:

Some info, links, quotes, ads, etc. Usually, this is contextual to what is contained in the main content (for example on a news article page, the sidebar might contain the author's bio or links to related articles) but there are also cases where you'll find some recurring elements like a secondary navigation system, related posts, and most likely it might social media feed. The typical word used for the sidebar is aside. The <aside> element is used to create a section of the website that is indirectly related to a particular page.

<p>Salamanders are a group of amphibians with a lizard-like appearance</p>

<aside>
    <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>

<p>Several species of salamander inhabit the temperate rainforest of the Pacific Northwest</p>

Article:

The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <article>
      <h1>Title of the article</h1>
      <p>Text of the article</p>
    </article>
  </body>
</html>

Section:

The section element is very useful, it is used in slicing HTML documents. Let suppose reading a book has different chapters. These are also called sections <section>. A good example is while reading an article, a lengthy article, tired of reading, lose interest, just use toc menu in article most article writers add a table of contents, click the item, yeah cool it is possible for you to read the article with ease because of sections.

<h1>Choosing an Apple</h1>
<section>
    <h2>Introduction</h2>
    <p>This document provides a guide to help with the important task of choosing the correct Apple.</p>
</section>

<section>
    <h2>Criteria</h2>
    <p>There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness, tartness...</p>
</section>

Footer:

A block at the bottom of the document is available to add widgets, fine print, copyright notices, or contact info. It's a place to put common information (like the header), but usually, that information is not critical or secondary to the website itself. The footer is also sometimes used for SEO purposes by providing links for quick access to popular content. It also has a social feed and newsletter subscription form.

<article>
    <h1>How to be a wizard</h1>
    <ol>
        <li>Grow a long, majestic beard.</li>
        <li>Wear a tall, pointed hat.</li>
        <li>Have I mentioned the beard?</li>
    </ol>
    <footer>
        <p>© 2018 Gandalf</p>
    </footer>
</article>

Document Tree:

Let suppose family tree, ancestor then descendants, and so on, the current family. A web page could be considered as a document tree that can contain any number of branches. There are some rules, in accordance HTML elements are placed after by after. To understand the concept of a document tree, it’s useful to consider a simple web page with typical content features alongside its tree view. Place doctype 1st > HTML > body > main > section > article > and then the footer is the last descendant. A template with a perfect document tree,

<!DOCTYPE html>
<html>
  <head>
    <title>My page title</title>
  </head>

  <body>
    <!-- Here is our main header that is used across all the pages of our website -->

    <header>
      <h1>Header</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Our team</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

       <!-- A Search form is another common non-linear way to navigate through a website. -->

       <form>
         <input type="search" name="q" placeholder="Search query">
         <input type="submit" value="Go!">
       </form>
     </nav>

    <!-- Here is our page's main content -->
    <main>

      <!-- It contains an article -->
      <article>
        <h2>Article heading</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

        <h3>Subsection</h3>

        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

        <h3>Another subsection</h3>

        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
      </article>

      <!-- the aside content can also be nested within the main content -->
      <aside>
        <h2>Related</h2>

        <ul>
          <li><a href="#">Oh I do like to be beside the seaside</a></li>
          <li><a href="#">Oh I do like to be beside the sea</a></li>
          <li><a href="#">Although in the North of England</a></li>
          <li><a href="#">It never stops raining</a></li>
          <li><a href="#">Oh well...</a></li>
        </ul>
      </aside>

    </main>

    <!-- And here is our main footer that is used across all the pages of our website -->

    <footer>
      <p>©Copyright 2050 by nobody. All rights reversed.</p>
    </footer>

  </body>
</html>

Also published here.