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. Search engine crawlers and automated bots use this heading to understand and index your content for search results, helping them decide what the page is about.

If the hero image isn’t optimised to load quickly, slower performance can hurt the site’s ranking in search engines. 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. Headers can include contact information with the background 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

You’ll see the sidebar on the right‑hand side of the page when viewing the site on a desktop or laptop. On mobile phones and tablets, the screen isn’t wide enough to display it.

Many modern websites no longer rely on sidebars because they prioritise mobile browsing. When used well, though, a sidebar can still be useful. On this site, it displays a list of the most recently published articles. A sidebar can also help organise information or act as a secondary navigation menu.

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 displays products or portfolio items in a clear, easy‑to‑view layout. You can show text when visitors hover over an image, or place it beneath each one. This gives both visitors and search engine crawlers more information about what’s on display.

Images can also link to separate pages if someone wants to explore further. Galleries don’t have to stay basic either. As shown below, you can enhance them with additional design features to create a more visually engaging experience.

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

Carousels and 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