Anatomy of a Web Page

Anatomy of a Web Page

The deisgn of a web page can utilise many elements. From the Header at the top of the page to the Footer at the bottom, and the Headings, Paragraphs, Gallerys, Lists, Columns, Sliders and other elements that make up the page. The Anatomy of a Web Page is vital for the look and performance of a web page.

Hero Section

The Hero Section is the top section of a page. It is the first main section of your page that a visitor would see along with the header at the top of the page. It contains the headline for your site or page as a heading. This Heading would be used by search engine “crawlers”, bots or automated software that scour websites to index content for search engines to reference. The “Hero” image, must be optimised to load quickly or the sites search engine ranking may suffer. The text used would be brief, (much shorter than what you can see here) and keyword rich allowing search engines to index secondary phrases that fit with your site. There would also be a Call To Action button leading visitors to where you want them to go.

FIND OUT MORE

Header

The Header at the top of the page is the first thing a visitor will see, along with the Hero section, and can contain a range of information. In the case of this site, there are three rows with the top row containing extrernal links to our service site and a Social Menu. The second row contains the a Logo, Site Title and Tagline. The last row contains the Site Menu and a Call to Action (CTA) button, this row is “Sticky”. This means that it will remain at the top of the screen as the visitor scrolls down. Some companies like to include their contact information in the header and the background can be altered to include images or gradients of colour.

Heading

Separate from the Header is the Heading. The Header could be the headline of your page or used to split your page into sections. Web crawlers will use heading to index a page for search engines. There are several levels of Heading from H1 to H6. The site should onyl have one H1 section, as this focuses the crawlers to the topic of the page. In this case, the Hero Section title uses the H1 tag. H2 to H6 are for page sections and sub sections. Page Readers for the visually impaired also use Headings to navigate a web page easier.

Paragraph

This is the body text for your page. The paragraph should contain terms that link to the subject of your page. The paragraphs should also contain the keywords you are using for your page. Paragraphs nust also be easy to read and not overly complex. If you present a visitor with a large amount of text to sell your services, it may put them off. You can also include lists.

  • Lists of text
  • Can show many services
  • or products
  • in an easy to read list

Sidebar

The Sidebar is to the right of this page if you are viewing it on a desktop or laptop. The screen is not wide enough on a mobile or tablet. Sidebars are not as common now as many sites are aimed at mobile browsing. They can hold a range of information. In the case of this site, it lists the most recent articles to be published. The sidebar could be used to sort information or act as a second or side menu bar.

Images

Images can serve two functions. They can highlight the topic of your page and draw the visitors eye to where you want them to look. At the same time, a well set up image can have a text component such as this which gives a crawler text to index for the site. The description can also be added to help the visually impaired.
Images can serve two functions. They can highlight the topic of your page and draw the visitors eye to where you want them to look. At the same time, a well set up image can have a text component such as this which gives a crawler text to index for the site. The description can also be added to help the visually impaired.

Gallery

Images can serve two functions. They can highlight the topic of your page and draw the visitors eye to where you want them to look. At the same time, a well set up image can have a text component such as this which gives a crawler text to index for the site. The description can also be added to help the visually impaired.
Images can serve two functions. They can highlight the topic of your page and draw the visitors eye to where you want them to look. At the same time, a well set up image can have a text component such as this which gives a crawler text to index for the site. The description can also be added to help the visually impaired.
Personal Computing
Drop Shipping
https://pixabay.com/photos/modem-antenna-wire-cable-router-5436144/

A simple gallery can display products or a portfolio in a simple and easy to see way. Images can be set to show text when the mouse is hovered over it or set below each image. This will allow visitors and crawlers to gain further information about the images shown. The images can also be set to link to separate pages should a visitor want to see more. Gallery’s can be altered further as seen by the one below which has many more aesthtic additions.

Images can serve two functions. They can highlight the topic of your page and draw the visitors eye to where you want them to look. At the same time, a well set up image can have a text component such as this which gives a crawler text to index for the site. The description can also be added to help the visually impaired.
Digital Business Transfer with Kestal Solutions
Keep Safe Online
Drop Shipping
Personal Computing
Web design
Speeding up a slow PC

Sliders and Carousels

Sliders

Sliders can give you a range of options to post content that can slide to the next post automatically or manually using the arrows

You can include text or images

Title

Or titles and calls to action as in the button below

Read More

Or with borders, icons and background images

A carousel could be used to show posts or images utilsiing one image or post at a time as above or several as below. The speed can be changed. The scrolling can stop if the visitor hover over the post.

Images can serve two functions. They can highlight the topic of your page and draw the visitors eye to where you want them to look. At the same time, a well set up image can have a text component such as this which gives a crawler text to index for the site. The description can also be added to help the visually impaired.
Digital Business Transfer with Kestal Solutions
Speeding up a slow PC
SEO
Unveiling the Dangers of Online Scams

See More

To see an example of how the elements can fit together click on the link

See More