Website Builders.com

  • Home
  • Builder Reviews
        • Our team have carefully reviewed a selection of premium website building platform, making it easier for you to choose the right one.

          While most website builders are compatible for generic  website building, including online stores, blogs and generic websites, some are better than others depending on what your website type.

        • Website Builder Reviews

          GoDaddy

          IM Creator

          Jimdo

          Squarespace

          Voog

          Weebly

          Wix

          WordPress

        • Store Builder Reviews

          BigCommerce

          GoDaddy Store

          Shopify

          Weebly

          Wix

          Yola

        • Comparisons

          Wix vs. Weebly

          Shopify vs. BigCommerce

  • Start A Blog
  • How To Guides
        • With over 500 pages of detailed tutorials and guides, our guides cover a large chunk of online topics.

          Learn crafty tips and tricks to make your time online smooth. Our directory is useful for internet newbies, as well as aspiring website builders.

          Check out the full directory.

        • Building a Website

          How To Build a Website

          Name Your Website – Domain

          Picking a Web Hosting Service

          Content and User Experience

          More

        • Searching and Research

          Searching the Web

          Doing Research Online

          The World of Wiki

          Finding Videos Online

          More

        • E-mails – Basics and Advanced

          Getting Started

          Sending an E-mail Message

          Opening Attachments

          Sending Attachments

          More

        • Social Media & Communication

          Instant Messaging

          Online Networking

          Facebook

          LinkedIn

          More

        • Files, Downloads, Software & Installs

          File Formats and Extensions

          Install Plug-Ins

          How to Download Files

          Downloading Software

          More

        • Making Money Online

          Making Money with Facebook

          Affiliate Marketing

          Virtual Assistant

          Writing Articles

          More

        • Online Shopping

          10 Tips for Smart and Safe Shopping

          Smart Shopping

          Protecting Personal Information

          Looking for Discounts

          More

  • Website Builder Tools Your Business Can’t Do Without (+ Links To Useful Resources)
    • HTML Character Codes
    • Advertiser Tracking Cookies: There ARE Ways To Opt Out – Here’s How
    • Website Glossary
  • Our Blog
        • Recent Posts

          When you have awesome writers, it is easy to spread wisdom. Take a look at some of our recent posts on various internet and website related topics.

          Have any suggestions on topics? Don’t hold back, send us your ideas:

          [email protected]

        • 12 Simple Rules on How to Use E-mail Politely

          Live Chat Software: Is it Worth It? Facebook Says Yes.

          Algorithmic Warfare: Is it the Beginning or the End?

          How to Promote Your Pet Business Online

          DIY Marketing: 7 Steps for any Business Owner

        • 20 Ideas to Generate Your First Online Sale

          Complete Guide to Content Marketing

          8 Best Free Photo Editors for Product Photosraphy

          Press Kits: DIY to Free Media Hype

          Why Backlinks are Essential for SEO – How To Build Them

  • About Us
    • Contact Us
    • FAQ
    • How Did You Make This Site?
    • How the Website Is Funded
    • Our Team
You are here: Home / Anatomy Of A Web Page: What Are All The Individual Elements For?

Anatomy Of A Web Page: What Are All The Individual Elements For?

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

A web page is an electronic document written in a computer language called HTML, short for Hypertext Markup Language. Each web page has a unique address, called a URL or Uniform Resource Locator that identifies on which web server the document resides.

A website has one or more related web pages, depending on how it’s designed. Web pages on a site are linked together through a system of hyperlinks, enabling you to jump between them by clicking on a link.

Contents

  • 1 Home Sweet Home Page
    • 1.1 Site Map
  • 2 Traditional Website Design
    • 2.1 Navigation Bars
    • 2.2 Links
  • 3 Traditional Webpage Design
  • 4 Learn By Doing

Home Sweet Home Page

When you browse the World Wide Web you’ll see the term “home page” often. Think of a home page as the starting point of a website. Like the “Contents at a Glace” of those Dummies books, a good website design will usually provide you with an overview of what you’ll find at the website. On a simple resume site, that overview is all there is. But most sites have many pages. On a larger site, you won’t find links to all the pages on the home page. The websites are more like trees where the home page links to the most important pages, and those pages link to other pages that are are related to them. And on and on.

Site Map

Some websites do have a thorough listing of all the pages on the website. It’s called a site map. It can be formatted in many ways, but it is usually presented in an outline form. As sites have gotten bigger, however, site maps have gone out of fashion because they are unwieldy. An active blog that has been around for a decade can easy have tens of thousands of pages. Thus, most sites provide search functions.

Traditional Website Design

Pro TIp

The footer is the place to look when you’re wondering, “Are these people for real?!”

Websites vary wildly in design and content, but many use a traditional magazine format. At the top of the page is a masthead or banner graphic. This is almost always a link back to the home page — so if you get stuck, you can always click on it. After this is the content of the page. What this consists of will depend upon the kind of page you are on. Home and “section” pages are usually filled with a lot of links to other pages and articles on the site or elsewhere. These links can be text or image based.

In addition to the header and main content, most websites also have a footer. This acts to tie up the site design and to avoid reader confusion because the page looks like it just stopped. But it is also the place to look for important, but less popular information, like company details, usage rules, copyright notices, and contact information. The footer is the place to look when you’re wondering, “Are these people for real?!”

Navigation Bars

Most websites have some kind of navigation bar. This may run horizontally across the top, but is sometimes run vertically along the side of page. Sometimes pages have both — like Learn the Net! These navigation bars allow the user to get to different parts of the website. For example, a news website usually has different areas for domestic news, international news, entertainment, sports, weather, and so on. And once you click to one of these subsections, it will have its own navigation bar. For example, the sports section might have links to NFL, MLB, NHL, and so on.

In addition to the navigation bars, many websites include breadcrumbs, which tell the user where they are in the website. For example, the breadcrumb for this pages would be: Home > Learn to Publish > Anatomy of a Web Page. They offer an easy way to navigate around the section of the website you are visiting. But remember: you can almost always go back to the home page by clicking on the page header.

Links

How can you tell which text are links? Text links appear different from the rest of the text — typically in blue and underlined. When you move your cursor over a text link or over a graphic link, it changes from an arrow to a hand. What’s more, the text of the link often changes in some way — becoming bold or a different color. Also, depending upon the browser, you will be alerted to the website address that the link will take you to.

When you return to a page with a link you’ve already visited, the hypertext words should be in a different color, which indicates that you’ve already been there. But you can certainly go there again by clicking the link.

Traditional Webpage Design

Once inside the website and you go to a page about a specific topic (Like this page!) you will usually find that the page looks much the same. The biggest difference is that these pages have headlines that summarize the content. You will also notice that they look more like a normal magazine article: they have a lot more straight text, and have a single narrative flow.

Learn By Doing

As we’ve noted, different websites do things differently. As a user, the main thing to remember is that websites aren’t fragile. Experiment! Click on different links and see where they take you. You can always use your browser’s “back” button if you get in trouble.

Latest Posts

Hosting

Black Friday 2023: Website Builder & Web Hosting Deals For Webmasters [Updated]

Uncategorized

Why WebsiteBuilders.com Got Hacked (Yes, You Can Blame Social Warfare)

E-mail Internet

E-Mail Etiquette: 12 Basic Rules For Politely Using E-Mail

Marketing social networking

Live Chat Software: Should You Invest In It? (It’s Easier Than You Think)

Computer Science

Never Heard Of Algorithmic Warfare? Then You’d Better Read This

Marketing

How To Successfully Promote Your Pet Business Online With Minimum Effort

Most Popular Reviews

  • Website Builder Reviews
  • Wix
  • Weebly
  • Squarespace
  • GoDaddy Website Builder
  • Shopify

Recent Posts

  • Black Friday 2023: Website Builder & Web Hosting Deals For Webmasters [Updated] November 5, 2019
  • Why WebsiteBuilders.com Got Hacked (Yes, You Can Blame Social Warfare) March 23, 2019
  • E-Mail Etiquette: 12 Basic Rules For Politely Using E-Mail November 15, 2017

About WebsiteBuilders.com

Everything you need to know about the WebsiteBuilders.com team.

About Us

Our Team

How The Website Is Funded

Privacy Policy

© 2017-2022 Website Builders.com | Sitemap