6 HTML for Structure
Separation of concerns is a key principle in software development. The idea is that a large project should be divided into sections or modules that each take care of a different concern. In a Three Tier Architecture, the Presentation Tier limits its concern to user interaction, the Logic Tier deals with concerns around data processing and implementing the logic of the web app, and the Data Tier concerns itself with the efficient storage and retrieval of data. Each of the tiers can be worked on separately from the others, and software developers can work on one tier without necessarily needing to know the details of the software in the other tiers.
The Role of HTML and CSS
Even within each tier, there can be a further separation of concerns. In the Presentation Tier, that separation is reflected in the different roles assigned to the languages used. HTML concerns itself purely with the structure and logical layout of a document. For example, HTML code is used to identify paragraphs, headings, lists, and sections on a web page. CSS concerns itself with how a web page should appear to the user. For example, CSS code determines the font used for a heading, the background color of a section, and the margins and borders of a paragraph.
This chapter concerns HTML only. But all browsers contain built-in CSS code that is used to provide default styles even on a web page that has no CSS of its own. This default CSS code puts bullets on list items, makes headings larger than paragraphs, puts a margin around the page, and so on.
You will start customizing the look of your pages soon enough, but in the meantime, it is important to remember that you will eventually have control over every aspect of how the page looks. You should never make choices in HTML based on the browser’s default styles. For example, if you have a list of items, you should mark it in HTML as a list. If you don’t like the default bulleted, one line per item style that most browsers apply, you can change it later.
Connections
Programming languages can be used to solve computational problems. Languages like Python, C, and Java do enable a programmer to describing exactly how a computational problem should be solved (using loops, if statements, variables, etc.)
HTML is a markup language, not a programming language. It allows a designer to specify tags that mark up a text document. These tags tell the browser what things are but don’t tell the browser how to react.
HTML Tags and Elements
HTML stands for HyperText Markup Language. A markup language specifies the structure of a text document by including special tags to identify elements of the document. In HTML this is done using opening and closing angle-bracket tags, like this:
<p>This is a paragraph.</p>
The <p> tag specifies the start of a paragraph element, and the </p> tag specifies the end of that paragraph. The tags plus the text in between constitute an element of the document. So the above is an element of type p with contents, “This is a paragraph”.
Tags are like brackets enclosing different parts of an expression. In their most generic form, most elements look like this:
<tagname>...contents...</tagname>
The tag name must be a single word, and the end tag is the same as the start tag but with a / character before the tag name.
You can also nest elements within one another, like this:
<div> <h2>This is the heading</h2> <p>This is a <strong>paragraph</strong></p> </div>
The matching tags are color coded for easy identification. This code defines a single division element (div). Inside that element are a second level heading element (h2) and a paragraph element (p). inside the paragraph element is an emphasis element (strong).
Connections
Just like in Java, C, and Python, you have to be careful with nesting. For example, this is a syntax error in Python:
print(a[5)]
The problem is incorrect nesting. The square brackets should have been closed before the round ones. Here’s the corrected version:
print(a[5])
Similarly, HTML tags must be nested properly. The line below is an HTML syntax error because the </strong> tag should come before </p>:
<p>This is a <strong>paragraph</p></strong>
But unlike programming languages, this will not cause the browser to crash. Rather, it forces the browser to make some decisions about how to interpret the badly nested code. The decisions it makes may or may not match what you had in mind…
Do it Yourself
Go to any website in Chrome, right click, and select “view page source” to see the HTML code that the browser interpreted in order to create the page you are looking at.
It’s quite likely that the HTML code is not laid out for easy reading by humans, but see if you can find a div, p, and strong element on the page somewhere. Make sure you identify the start tag, contents, and correctly matching end tag that define the entire element.
Note that the start tags you find might have attributes inside them. For example, the blue text shown here is an attribute inside the start tag: <div id=”heading”> contents here </div>
An HTML Template
A properly formatted HTML element starts with a special doctype tag that indicates the HTML version we are using.
The standard doctype tag for the latest version of HTML looks like this:
<!doctype html>
This is followed by a single html element. The html element contains a head and a body element. The head element contains other elements that provide information about the document. Elements inside head should not cause anything to appear on the page when you view it in a browser. The body element mostly contains elements that will cause something to appear on the page.
Do it Yourself
Use a text editor or a code editor such as Visual Studio Code to create the HTML template shown below and save the result in a file called template.html. Or you can download a copy from the Full Stack Example Pack repository.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title Goes Here</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>
When you’re done, you can open the file in a browser by double-clicking or dragging it into the browser’s main content area. Right click and use “view page source” to compare the source code to what appears in the browser’s viewing window.
Note: The meta tag and tells the browser what character encoding format the page is using. It’s a required tag but you shouldn’t ever have to change it, so just get used to including it.
Follow-up Question: What did the browser do with the information in the title element?
Connections
Like Java and C (but unlike Python), the indenting and spacing in the code template shown above is not meaningful to the browser. You could enter the code all on one line and the browser would interpret it in exactly the same way. But indenting makes the code much easier for a human to read.
When to indent is a matter of personal taste, but most developers would indent the contents of a complex element (like the div element in the template) while leaving simpler elements all on one line (like the p and h2 elements). To avoid excessive indenting, the contents of the html, element are usually not indented.
If you use a code editor such as Visual Studio Code it should contain a hotkey (such as Alt-Shift-F) that will auto-indent and space out the code for you. The template above represents the default Visual Studio Code auto-indent.
Some Basic Elements
The <p> … </p> tags are used to create paragraph elements. If you want to create heading elements , you can use the tags <h1> … </h1> through <h6> … </h6>. Use h1 for a top level heading, h2 for a subheading, h3 for a sub-subheading, and so on. The <div> … </div> tags are used to mark out a logical division in a document (i.e., a section, a sidebar, an example, etc.)
By default, all these elements have a block style. This means that there are line breaks between them, even if you didn’t put line breaks in the source code. So this:
<div><h1>heading 1</h1><p>paragraph</p><h2>heading 2</h2></div>
Will end up looking something like this:
heading 1
paragraph
heading 2
There are also a number of elements with inline style by default. These can be used to mark out text inside block elements without causing line breaks. The strong element is for emphasized text (usually in bold by default), while the i element is for text in an alternate voice or mood (usually in italics by default).
So this:
<p>That textbook by <strong>Sam Scott</strong> is <i>really good</i>.</p>
Will end up looking something like this:
That textbook by Sam Scott is really good.
You can also create unordered and ordered lists with the ul and ol elements. In both cases, you must nest list item elements (li) within the ul or ol element. By default, all these elements have block style. Unordered lists will be bulleted while ordered lists will be numbered. But you can change all that with CSS.
Here’s an example of how to specify an unordered list:
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
And here’s what it might look like:
- item 1
- item 2
- item 3
Attributes
Elements can also contain attributes that modify them, mark them, or further specify their behavior. Attributes are included inside the start tag of an element, after the tag name, and usually have the form name=”value”. For example, the title attribute can be used to make a tooltip appear when the mouse is hovered over the element.
<div title="Read this for more context">
<h3>This is a sidebar.</h3>
<p>Here's some more info.</p>
</div>
If you have a mouse that can hover, you can see the result by hovering over the text below:
This is a sidebar.
Here’s some more info.
Creating Links
It’s the links (a.k.a. hyperlinks) in a document that turn plain text into the hypertext that gives Hypertext Markup Language (HTML) it’s name. A link is an anchor (a) element with an href (hyperlink reference) attribute that tells the browser what page to load when the link contents are clicked. By default, anchor elements have inline style so you can include them inside paragraphs and other elements.
Here’s an example:
<p>Click <a href="https://google.ca">here</a>.</p>
In a document, it will look something like this (depending on how links are styled with CSS):
Click here.
By default, most browsers will open the link in the current tab. If you want the link to open in a new tab, use the target attribute with a value of “_blank”, like this:
<p>Click <a href="https://google.ca" target="_blank">here</a>.</p>
Here’s what that code produces. You’ll have to click the link to see the difference:
Click here.
Relative vs. Absolute Links
If you specify a full URL in the href attribute, starting with a protocol such as https://, the link is an absolute link. Absolute links to direct the user outside of your website by causing the browser to launch a request to a new web server.
When you don’t include the protocol in the href value, the browser interprets the link as a relative link. It will send a request based on the URL that is currently being displayed. This is useful because websites often consist of more than one page that link to one another. Relative links mean that you can create navigation links within your website without having to specify the full URL.
For example, if the user is looking at https://localhost/hello/index.html and they click on a link with href=”page2.html”, the browser will send a request for that file using what it takes to be the current folder (https://localhost/hello/) as a base and the request will be for https://localhost/hello/page2.html. An Apache server will, by default, look in the hello subfolder of its public web folder for page2.html.
Here’s another example. If the user clicked a link with href=”utilities/calc.html”, the request would be for the URL https://localhost/hello/utilities/calc.html. The server would look inside the hello folder for a utilities subfolder and then look in that subfolder for calc.html.
For more on how Apache servers are set up, see the chapter entitled Get Your Own Web Server.
Gotcha: Absolute Links
If you fail to include the protocol in an absolute link (e.g., href=”google.ca”) the link will probably not work the way you wanted it to. The link below was made without specifying the protocol:
- Click here.
What happens when you click the link above? What do you see in the address bar of the browser? Does it make sense to you?
Images
What would a web page be without images and other media?
You can place an image into a document using the <img> tag. Here’s an example:
<img src="images/macaw.jpg">
Unlike most of the tags we’ve seen so far, the img element is an empty element. It has no contents and does not require a closing tag. Instead, you use a src attribute to specify the location of an image file. Just like with the href tag, your location can be absolute or relative. Most of the time you will probably want to use relative locations to load images that are stored locally, as part of your web site. If you link to images on somebody else’s web site, they may take them down or move them and break your page.
The tag shown above will load a jpg image from the images subfolder of the current location. Website designers often create an images or media folder to store all the images in, leaving the html files in the top level folder.
The img element has inline style by default, which can make it difficult to work with in the absence of CSS style rules. You can enclose it in a <div> element to display it in its own block, and you can use the width attribute to limit its size (you specify the width, and the height is then calculated based on the original aspect ratio). Here’s what that might look like:
<div> <img src="images/macaw.jpg" width="200"> </div>
Do it Yourself
This quick intro to HTML as been deliberately brief. The coverage of HTML will expand as needed throughout the rest of the book, but the information here should be enough to get you going for now.
There are lots of great online sources of info about HTML if you want to dive deeper into the language right away. The w3schools website is one good place to go (get an ad blocker first!).
In addition to tutorials, w3schools also contains a list of all supported HTML tags with deprecated tags listed in red. It’s a good idea to bookmark that page if you’re looking up how to do things on line. If you come across a tag you don’t recognize check it against the list first to see if you can use it. If it’s deprecated, it may still work for now, but you shouldn’t use it.
<exercises chapter=”HTML”>
- Create the beginnings of a portfolio, online CV, or professional social media website.
- Create a new folder called “portfolio” and a file within it called index.html. If you downloaded XAMPP already (see Get Your Own Web Server), create it in the htdocs folder. Otherwise, you can put it wherever you want.
- Copy the template.html code from the Full Stack Example Pack into index.html using a text editor or a code editor like Visual Studio Code.
- Use HTML tags inside the body element to create the structure for a web-based portfolio. The portfolio should use headings, paragraphs, lists, divs, and other elements to add structure to information about you and your work. It might be helpful to try to think of what information would be included on a professional social media site like LinkedIn.
- Include at least one image element that loads a locally-stored image. You can copy images from elsewhere and save them into a portfolio/images folder. Position and resize it as best you can using the tools you’ve learned so far.
- Include some external links. For example, you could link to your social media pages, pages for projects you were involved in, pages relevant to your hobbies and interests, etc. Here’s a tip: Use <a href=”mailto:my@address.com”> … </a> to create a link that the reader can click to send you an email.
- Change the title element to something appropriate for your portfolio.
- Include at least one link to another HTML file in the portfolio folder. This file can be anything – a joke, a bit of further information, an image gallery, etc.
- Load the page in a web browser (by opening it directly from the index.html file or by going through http://localhost using XAMPP). Make sure everything seems to work ok. Note that it’s not going to look great yet. We’ll get to that!
