Basic structure of website - the markup

Are you writer? Do you read books, writeups? Okay lets suppose, your teacher assigned you a written assignment, more likely about History of Smartphones, he/she instructed you to be careful about text formatting like bolding text, underlining text, making important line colorful, or most importantly to quote the saying of someone. There are two ways to do that one is to use multicolor pencils, a white paper and second is to use Microsoft Word if you listened to your computer teacher consciously than you must know about how to use Microsoft word. If you know MS Word, don't worry you know half knowledge about writing documents.

The third way:

There is 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 bullet list, and so on to download button designed with color scheme or an image. So this all about formatting. Now come to 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. Before go ahead read my article Internet is messed up. Also read introduction to design sense.

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 webpage.

A web page:

It is a document that is suitable for website. Webpage is a document usually written in Hyper Text Markup Language - HTML that is accessible through the internet using any web browser. I may contains text, audio, video, downloadable data files, internal links & cross links. It can be viewed by entering correct URL pointing to typical page/website. There two different types of webpages

• Static Web Page
• Dynamic Web Page

Web page also called a website like single page website, it is single paged but has functionality of full fledge website. Some single paged website 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 either it is language, markup language, or programming language. HTML has its own syntax. < > and / are the special chars mostly used. ! we say this factorial in math math, exclamation mark in English language. But in computer it is not only explanation mark but it declares 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 same . One example is written in code block and other has no any block. 1st one is html 2nd one is just syntax of html. It is called compatibility. If you are a reader you need 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 compatibility factor for html.

HTML Element:

HTML has special pattern, if I don't feel hesitation than tags are most important in the html. In handwritten, there is no any limit where to start, where to end our sets of rules are applied and until page is full of ballpoint ink. In Microsoft Word there is a limit, we can not go beyond borders. We can not make any type of style until customization ribbon help us. But in html everything is restricted and perfectly sequenced. Without ending and closing tags, you can not write any thing. But you can write un-parsed content. If you don't follow html rules then browser does not understand what you type. Actually HTML derived from xml. DOCTYPE declares the standard and version of html. Current version is 5. Doctype declares that html data is written in html 5 format. html element comprising off all data. Element has 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> tag should be shown inside the main browser window.
3. Words between <h1> and </h1> are a 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 an end of main content to be shown in browser, while closing tag of html is end of html file and beyond this no any 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. tag has further entities. Tag is a set of right angle, left angle bracket and a slash character "/" .

opening tag

closing tag

There are different html elements that makeup structure of web page. The html element, the body element are the main tags in marking markup. Further the head tag is also essential component in SEO of web application. The <header> tag makes the top of web page, the main tag help in building the main part of page and finally the footer element is here to make up last portion of web page. Want to know about tags read in depth guide to tags.

Standard structure:

Standard website has header section, a hero section, the main section including further sections contain rich content, and sidebar of website, and the final one 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 usually placed in header element, and somewhat they have been seen in sidebar. Footer has also has 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 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

<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 side bar is aside. The <aside> element is used to create a section of website that is indirectly related to 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:

Section element is very useful, it is used in slicing of html document. Let suppose reading a book, it 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 table of contents, click the item, yeah cool it is possible for you to read 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 that 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 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 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>