Hint to Understanding Proper Element Positioning
Hypertext Markup Language (HTML) & Cascading Style Sheets (CSS) are two of the internet’s most used programming languages, its greatest translators and presenters of information.
Image of HTML & CSS coding
Both languages used in unison to turn this image above into what seems a lot more familiar to the lot of us.
Image of a mock-up of ‘Microsoft.com’ dated: 9/20/2019
Getting started
Choosing an Integrated Development Environment (IDE)
First, you’re going to need an application that takes your typed text and provide various automated tasks. Auto-completing the syntax of code, supplying a list of possible values to an attribute or to increase readability. All for the sake of simplifying or rather speeding up the process of coding, à la IDE.
Which IDE do I use?
Honestly, there are a good many IDEs available to use out there with various pros and cons but for the sake of keeping it simple, I will mention three (3): Brackets, Visual Studio Code (VSCode) and Atom. All free to use software.
Personally, I have the three of these IDEs installed but for the bulk of my work I usually just use Brackets.
Within your IDE
Now that you have your preferred IDE installed and opened, you will want to set your project folder within your IDE to the folder you intend to be working in.
For the sake of simplicity Lets just assume you created your project folder on the desktop. So, within Brackets you would:
Video shows how to set the project folder and creating the index.html in which the website coding will occur
Now that you have your project folder and index.html file (also known as the home page) created let’s get to coding.
Code required within every HTML document
HTML CODE BLOCK
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <link rel="stylesheet" href="css/reset.css">
7 <link rel="stylesheet" href="css/main.css">
8 <title>Building Confidence in Programming</title>
9 <link rel = "icon" type = "image/png" href = "images/ms_logo_icon.png">
10 </head>
11 <body>
12 <header>
13 <nav></nav>
14 </header>
15 <main></main>
16 <footer></footer>
17 </body>
/HTML CODE BLOCK
For every HTML file that you create, for the most part, the general layout provided in the code above should be used.
<!DOCTYPE html>
Line 1 — This declares the html file as an html 5 document and it instructs the browser about which version of html the page is written in. More info available at w3Schools.com
<html lang=”en”>
Line 2 — This defines the language the html document is written in. More info at w3Schools.com
<head></head>
Line 3, 10 — A container for all head elements. Which includes but isn’t limited to, a title for the document, scripts, styles and meta information. More info at w3Schools.com
<meta charset=”utf-8">
Line 4 — This specifies the character encoding for the HTML document. UTF-8 — Character encoding for Unicode. More info at w3Schools.com
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
Line 5 — Definitely going to need this line of code if you intend on building media query responsive web pages. More info at W3schools.com
<link rel=”stylesheet” href=”css/reset.css”>
Line 6 — Links to the reset.css stylesheet which will be used to reset all margins, paddings, headers…etc. to 0 for cross browser styling. CSS Reset Sheet can be downloaded here.
<link rel=”stylesheet” href=”css/main.css”>
Line 7 — Links to custom made CSS stylesheet. More info on the <link> tag found here.
<title>Building Confidence in Programming</title>
Line 8 — the shown title of the web-page as displayed in the browser’s tab associated with the html file.
<link rel = “icon” type = “image/png” href = “images/ms_logo_icon.png”>
Line 9 — provides a file reference to an image that serves as a tab icon within the browser.
<body>
The <body></body> tag encompasses the actual content of the HTML page.
<header>
The <header></header> tag, which can be used multiple times within various elements, contains the top-level elements, or rather the more important elements within its parent container. The <body></body> element is the parent container for the <header></header> element.
<nav>
The <nav></nav> element contains all navigation-related elements, those usually placed at the top of a page.
<main> and <footer>
The <main></main> element tag encloses all of the page’s main content and the <footer></footer> tag holds all other relevant information about its containing element (the <body></body> element in this case). Just like the <header></header> tag the <footer> tag can be used multiple times but within different parent container elements. More info on <footer> tag at W3schools.com
Supplemental CSS code to help with element positioning
Before we move on to how to order our div elements within our index.html to form our page lets create our main.css file, which will hold all of this page’s CSS related information.
Note: I generally tend to name the CSS file which will be used across all the HTML pages as main.css but for page-specific CSS if needed I would create a separate CSS file just for that HTML page.
CSS CODE BLOCK
1 *, *::before, *::after { box-sizing: border-box; }
2
3 /* Used for Debugging purposes */
4 * {
5 -webkit-transition-duration: 0.25s;
6 -moz-transition-duration: 0.25s;
7 transition-duration: 0.25s;
8 }
9 .*:hover { outline: 1px blue solid; }
/CSS CODE BLOCK
The aforementioned bit of code has helped me greatly in understanding element positioning and how much space an element is taking up within its parent div or just on the page in general.
After creating the new main.css file, in generally the same way you created the index.html file (as shown in the previous video up above), you can simply copy and paste the CSS code above into the CSS file you just created.
The *, *::before, *::after { box-sizing: border-box; } block of code causes the element’s padding and border to be calculated within the element’s width and height. This keeps the element’s actual width and height specified even if you decide to add padding to it. Without setting an element’s box-sizing to border-box adding to its padding property would cause the actual size of the element to increase creating design distortions. More info at W3Schools BoxSizing
The .*:hover { outline: 1px blue solid; } block of code adds a blue outline to every element once hovered over by the mouse. I find this to be a simple and effective way to understand just how all the elements added to your page are interacting with one another.
Proper HTML document structure
Recently added to HTML in version 5 are new semantic tags which help with document outline and structure. Tags such as <main>, <nav>, <header>, <footer>, <section>, <article>, <aside>, <figure> and <figcaption>, just to name a few. Some of the tags mentioned has already been introduced to you up above. A less compact list of the new semantic tags available in HTML5 can be found at: https://www.w3schools.com/html/html5_new_elements.asp
Online Document Outliner Tool
A good online tool to check the document outline structure of your web pages can be found here.
For the sake of easy to follow examples the Document Outliner Tool will be used on the sample website’s live link.
Document Outliner Tool used on example website
You should also go to this GitHub repository here and take note of the index.html file to follow along.
Important HTML5 semantic tags<section>
As aforementioned, the <main> tag contains the majority of a web page’s content so within this tag, using this element as a container element we would start each page off by sectioning off the various parts of the web-page. In doing so, this is where the <section> tag becomes relevant.
The <section> element, well, does pretty much exactly as it implies it groups all of its child elements into a section. Essentially speaking, it can be imagined as a chapter in a book. A good thing to note is that a <section> tag can exist within another <section> tag and also that each <section> container requires a header (<h*> tag)
Note: * representing numbers 2–6 interchangeably.
Document outline of the site found at GitHub repository link
<article>
The <article> element, like the <section> element requires a header. This element acts as a container for information which can stand alone by itself and make complete sense. Articles are generally seen as independent blog posts, stand-alone topics or news stories.
Document outline of the site found at GitHub repository link
<aside>
The aside tag is used as a container for supplementary text containing information related to its surrounding container. The HTML5 doctor gives a pretty good explanation of its use but to sum it up the aside tag provides complementary information about a topic and only provides additional insight. That being said the aside tag supplies optional information that even if removed shouldn’t affect the topic discussed at hand.
<figure> and <figcaption>
The <figure> tag is used to enclose various blocks of information illustrations, diagrams, photos, code listings, etc. The information within this tag is generally explained as self-contained content.
The <figcaption> tag is used within the figure element as a container for the captioned text describing the image or ‘figure’ in question.
Useful Additional Resources:
HTML Color Picker
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript…www.w3schools.com
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript…www.w3schools.com