My Intro to Markup and Typography for the Web

Dressed up skeletons have found their place on the web. We call these dressed up skeletons websites with the skeleton being the underlying HTML tags and CSS composing of its aesthetic looks. Both of these technologies provide an essential piece to creating and designing websites and contribute to the ever growing global expression of a connected presence.

HTML is the skeleton of a website. HTML achieves laying out the framework and content for a website by designating specific HTML tags to generate a desired place and way that content should be represented in a mostly raw form. A few of the common HTML tags are the <html>, <body>, <p>, <h1>, <div>, <ol>, and <table> tags. The <html> tag is often used to tell a browser or program that the document is an html document and should be interpreted as such. The <body> tag is a tag that displays the content contained within it on the webpage. The <p> tag can also be referred to as the “paragraph tag” and is often used to designate paragraphs on a webpage. The <h1> tag is often used to create a header for content and is the largest header of six header tags with <h6> being the smallest. The <div> tag is often used to designate a space for content on a webpage that has its own division of space and groups all the content within the specific <div> together to allow for use or modification of all of the content under one div id. The <ol> tag is used for creating an ordered list on a webpage and is used in part with <li> tags to designate the list items. The same applies to <ul> tags with the difference being that <ul> tags designate an unordered list. The <table> tag is useful when trying to display a table of content on a webpage and is used with common table tags like <td>, <tr>, and <th>. More information on table tags can be found online at websites like w3schools.com.

CSS is used in conjunction with HTML as a means of rendering how html elements should be represented on a webpage. This is important as it can help make websites more user friendly, improve usability, and overall make a website look better (or not). From personal experience one of the neatest things I have seen CSS used for is creating drop down lists from unordered list elements. I did an example of this years ago and was surprised to find out that it used CSS instead of javascript or a designated HTML tag.

White space plays a very important role in many applications. White space is represented differently throughout a variety of programs. Examples of white space are word spaces, non-breaking word spaces, tab spaces, hard line breaks, and carriage returns. Word spaces in HTML are represented through simply pressing the spacebar, but are not the immediate go to for all formatting as attempting to use this for such would result in unpredictability when, for example, displaying a website on different sized screens. Non-breaking word spaces are designated by inserting &nbsp; in the HTML document. Tab spaces are not accepted in HTML documents for whitespace interpretation. Hardline breaks are designated in HTML via the <br /> tag and carriage returns are inferred after content contained between the open and closing <p> tag.

HTML, CSS, and the way white space is interpreted are all essential components to use and consider when creating a website. Having a good understanding of each of these components is essential to achieve the look at feel of the site as designed on paper. Javascript is the next piece in helping our dressed up skeletons become more life like.

Like what you read? Give Liam a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.