Coder's GroundWeb Development

Beginner’s guide to better understand basic webpage layouts

HTML is the backbone of every web page , so it is obvious that you’ll be making yourself a pro at it, it you wish to make a career as a web developer.

Before getting started, make sure you read this-Some common HTML Tags and their uses

Let’s look at a basic eye-pleasing structure of a website, which is a base from which a website is envisioned :

What is the basic structure of a Web page?

HTML stands for HyperText Markup Language and is the basic structural element that is used to create webpages. HTML is a markup language, which means that it is used to “mark up” the content within a document, in this case, a webpage, with structural and semantic information that tells a browser how to display a page. we can say that structure of the website will define the layout and look of any website.

Popular Types of Websites You Can Create

  • E-Commerce Website.
  • Business Website.
  • Entertainment Website.
  • Portfolio Website.
  • Media Website.
  • Brochure Website.
  • Nonprofit Website.
  • Educational Website.

Getting familiar with the layout design best practices

1.Visual Weight through Negative Space

Visual weight is perceived by people when some objects on the website carry a stronger visual force. This visual force can be induced in specific elements through different techniques. Amongst them, negative space is the one which interests us directly here.

2.Balance in a Silhouette View

The silhouette view is the simplest representation of a website layout, the bare structure of a website. Without color or any adjustments, with no additional elements or specific content, the silhouette view gives an objective rendering of the overall website structure.

3. Go outside the standard layouts

Whereas some layouts follow the traditional path, with an aim at serving functionality at its best, other layouts use daring designs and structures, with the purpose of making an impact on the user. Breaking the mold means unexpected arrangements of the elements within the web page, and the experiences it triggers stand out in a sea of standard websites, that a user can’t help but remember your website.

Basic layout for website

HTML Layout Elements and Techniques        HTML | Layout - GeeksforGeeks

  • <header> – Defines a header for a document or a section
  • <nav> – Defines a container for navigation links
  • <section> – Defines a section in a document
  • <article> – Defines an independent self-contained article
  • <aside> – Defines content aside from the content (like a sidebar)
  • <footer> – Defines a footer for a document or a section
  • <details> – Defines additional details
  • <summary> – Defines a heading for the <details> element

Also read, Here’s a basic HTML Code to start practicing as a beginner , Learn about tables in HTML

Surabhi Singh

You may also like

Leave a reply

Your email address will not be published. Required fields are marked *