On the topic of Wireframing, and the use of HTML to assemble webpages
HTML is one of the three core languages that the internet and webpages use, alongside Javascript, and CSS.
HTML is used for formatting and arranging aspects of your website in a modular, and highly customizable way.
HTML, at its most basic, will allow you to sort elelments of your webpage into catagories, and format them according to your specifications using tags, such as Header, Footer, Main, Nav, and about 100 others. Let’s discuss the basics, and what they’re used for.
<Header>
Header is used for the top of your page, and is inteded to be fitted with things such as:
- A logo
- The name or topic of the current page
- The author of the article below
- Any other “introductory” aspects to the page.
<Nav>
Nav and Header are easy to get confused, as they both tend to be placed at the top of a page, and can have a fair bit of overlap in use cases. however, while <header> is used for the top, introductory aspects of your page, nav is focused more on, well, navigational, aspects of your website. Nav is intended to be used for making a section at the top of your page that assists a viewer in navigating to other pages, as well as orienting them on what page they are currently on. Examples of Nav use cases are:
- A link to the index page of your website
- Links to the Next or Previous page in a site with webpages inteded to be read in a specific order
- An index and quick links to specific sections of your webpage if it is particularly long.
There are literally more than 100 HTML tag types, so I encourage you to research further to find what suits your needs best.
But what is a Wireframe?
Wireframes, or Wireframing, is the act of sketching out a concept of how you want your final HTML webpage to look, as a method of organizing, and preparing for assembling your HTML. Think of it as concept art for you page, a wireframe can be a hand drawn rough draft of what your page will look like in terms of layout, formatting, relative sizes of elements, and the goals for what a visitor should be able to do on your page.
Ultimately, a wireframe is a rough draft for your webpage, to illustrate to yourself and others what your final page will end up looking like.