2. HTML Basics

HyperText Markup Language - that's what HTML stands for. It builds the fundamental structure of a webpage for you, just like the bones in your body.

Before we start... / HTML tags/elements / Revisite your first index.html / Add some spices / The building blocks / Formatting source codes / Inline elements / HTML and W3C Standards / Making a blueprint / Finalize the draft / For the next unit...

Before we start...

What's your most and least favorable website?
Have you found your favorable color combination(s)?

HTML tags/elements

Every webpage is a structured HTML document translated by your Web browser properly into the layout you see on a computer screen.

An HTML element is like <html>, with the name of the element enclosed in two angle brackets < and >. In an HTML file, you usually see two types of HTML elements. One marks up a scope of contents in an HTML document, which determines how these contents are represented in a webpage; for instance:

<html>some contents</html>

In the above example, you see the tag representing the beginning of the element without a slash as well as the tag representing the end of the element with a slash. The other HTML element type is itself presented as a single object in a webpage; for instance:

<br/>

In the above example, you only see one tag that will be interpreted as a line break element (thus its "br" name), which ends with a slash in it.

You will also see some other markups that are not HTML elements themselves but have some special meanings. For example, we will use <!DOCTYPE> to declare the document type for a webpage, and we also use  to add some important notes just for our own reference.

Revisite your first index.html

With the above overview, let's revisit your first index.html inside the analysisdemo folder to explain the HTML elements and structure necessary for a Web browser to parse the structure of a webpage and then present it.

As noted earlier, you need to tell your Web browser the type of the document it needs to present, we always have <!DOCTYPE> at the beginning of a document. But since we are composing an HTML file, we needs to specifically declare the document as HTML with:

<!DOCTYPE HTML>

Following the declaration of the document type, you would naturally see the element representing the HTML document, which are represented with <html></html>.

Inside <html></html>, you then see the element <head></head>, where the metadata is located. The metadata is not part of the webpage itself; you can consider it to be the description of the webpage. That explains why you see the element <title></title> in this section; the title of a webpage is part of its metadata. When we incorporate some external files or codes into the webpage (we'll talk about it later), we put them here as well to make sure they are loaded first.

After </head>, you would see the <body></body> element. This is where the contents that will be presented in a webpage go.

Add some spices

Now that we understand how HTML tags work in our first index.html, we have to make some additional tweaks to optimize the decoding of your HTML document in different Web browsers.

First, let's change <html> to:

<html lang="en-us">

In this change, we add the attribute lang to the <html> element and enclose the value of the attribute with double quotation marks. An attribute assigns a property to a specific element. In the above change, the value en-us of the lang attribute explicitly requires the browser to arrange texts following US English. When your webpage goes bilingual, then the value of this attribute for your Taiwan Mandarin webpages should be zh-Hant-TW (rather than just zh-tw).

Next, inside <head></head>, let's add the following line after </title>:

<meta charset="UTF-8">

This <meta> element is obviously adding some metadata to our HTML document, and the attribute charset is specified with UTF-8, which tells a Web browser to treat the contents as Unicode texts, so texts could be encoded properly even if they are from different languages. You can't imagine how hard it was to get foreign websites encoded properly 20 years ago. Most of modern Web browsers set UTF-8 encoding as their default, but it doesn't hurt to always have this by default just in case.

The Building Blocks

Now it's about the time to introduce elements that are commonly used inside <body></body>, that is, the content of your webpage. Let's start with some building blocks.

<nav></nav> - This is a block for you to put your NAVigation pane into (just like the menu you see on the left of this website.
<article></article> - If you have an article in a webpage, you probably want to put this article in this block.
<section></section> - Well, if you have multiple sections in an article, it's convenient for you to put each individual section in separate <section> blocks.
<p></p> - It is natural that each section comes with multiple paragraphs, which should reside in separate <p> blocks.

To see how these tags work, we can find an article from an English website and divide it into a structured webpage using the above tags.

OK. You've tried, but the texts put into different blocks do not seem to differ in their style at all! What's going on!? Don't panic. This behavior is in fact absolutely normal. Once we get to the CSS part, we'll learn how to style these individual blocks, but at this time, if we just put some texts into these blocks, they are presented in the same way.

Why do we need these building blocks, then?

Before I answer this question, let me introduce another building block to you:

<div></div> - A block that represents one DIVision in your webpage.

Let's try to find one extra short text paragraph, throw it into a <div> block, and append this block to the end of the body...and still, the texts are just like those in other building blocks we added earlier.

Semantic vs. non-semantic elements

While the <div> block seems to work in the same way as other blocks do, <div> is non-semantic, whereas other blocks are semantic. When you see the name of a semantic element, you know what the contents of this element could be (article, section, paragraph, and so on), which is not possible when you use a non-semantic one (unless you use some other attributes to make it special; we'll get there soon). In HTML5, you're encouraged to use semantic elements and avoid non-semantic ones. This strategy brings benefits to your design process - for example, you can choose to directly style a <section> element, rather than an <div> element that is specified as a section. Note that it is absolutely possible to achieve the same visual representation of a webpage even if you only use <div>, but its maintainence is going to be difficult. Finally, this is not saying that you cannot use <div> at all - if you need a block that does not fit the semantics of the aforementioned elements, just use <div>.

Here are some other common semantic building blocks:

<header></header> - Appear at the top of a webpage and is usually used as a navigation pane (thus include <nav>).
<footer></footer> - Appear at the bottom of a webpage and is usually used to present copyright or contact information.
<ol></ol> - An unordered list.
<ul></ul> - An ordered list.
<li></li> - A list item.

Note that <header> and <footer> cannot contain each other.

A heading for each semantic block

When you has a sementic block, the Web browser expects it to have a heading. Thus, a proper heading for a sementic block helps a Web browser parse the structure of a webpage. You can use <h1></h1> for a first-level heading or <h6></h6> for a sixth-level heading (and of course, everything in between). The level of a heading for a parent block should be higher than that for a child block. See Section & Rank for more info. Again, it is not fatal even if you don't follow this suggestion, but it's going to be helpful in many ways.

Formatting source codes

In the source code, you can see that lines inside an element are indented. This is a convenient way of understanding the relationship between elements in the so-called Document Object Model (DOM). Lines aligned together may represent elements that are sibilings; the indented lines would denote child elements of their parent elements that include them. This is the reason why a good text editor like Sublime Text indents lines of child elements automatically for you.

You can also check the structure of your HTML document in the Developer Tools of your Web browser. In Windows, you can always press the F12 key in any Web browser to use the tool. For Mac users, you need to press Command+Option+C for Chrome, and here's the instruction for Safari.

It is true that even if you remove all indentions, the webpage remains unchanged (try it!), because a Web browser does not understand the relationship between elements based on line indentions. However, you should always indent lines in your source codes whenever appropriate. It not only means you understand the structure of your webpage, it makes your codes easier to read for others. You'll also need a similar mindset when we get to the JavaScript tutorials.

Inline elements

The elements introduced above are...blocks. It means that they all occupy a paragraph-like area that is separate from the texts before and after it. For instance, if you add the following line inside <body></body>, you will see that the texts inside <div></div> are forced to form an independent paragraph itself:

This sentence is going to be broken by <div>this block</div> into three parts.

To the contrary, inline elements do not break the text flow, just like the following line that includes an <em> element:

This sentence won't be broken by <em>this inline element</em> into different parts!

There are quite a number of frequently used inline elements listed below, most of which are for text decoration or represent an object in a webpage:

<a></a> - Marks up a hyperlink which is underlined by default.
<b></b> - Marks up special but unimportant texts and make them bold by default.
<em></em> - Marks up emphasized texts and make them italic by default.
<mark></mark> - Marks up and highlight texts.
<sub></sub> - Marks up subscript texts.
<s></s> - Strikes out marked texts.
<u></u> - Marks up underlined texts.
<img/> - Insert an image.
<br/> - Insert a line break.
<input/> - Insert an input field.

See this W3CSchool page for a more complete list of block-level and inline elements. Note that this default block vs. inline contrast from the elements is not absolute. We'll learn how to change this property when it comes to CSS.

HTML and W3C standards

The most updated version of HTML is HTML5, which has been developed following the W3C (World Wide Web Consortium) standards. With the standards, same HTML tags should be compatible to different browsers - but you have to be careful! Some old HTML tags might have become deprecated/obsolete, while newly introduced HTML tags might be more or less experimental and are thus not fully supported by all mainstream browsers.

If you want to use a tag that you have never seen before and it seems useful, check some reliable sources to see if it support the majority of Web browsers, such as MDN web docs. In this course, we will just check our webpage using Google Chrome, but in reality, you should test your webpage in all different kinds of Web browsers.

In this course, we will try not to go wild, but use some common HTML tags to construct our websites. Neither will I go through old and new browser wars - google it if you're interested.

Making a blueprint

OK. I know you've been waiting for this moment. But let's do something real to help develop your personal website, and we would start with its layout. When you make slides for your presentation, you also need to choose a template, don't you?

We need to consider the layout of two basic blocks in your website: a <nav> block and a container of the main contents, perhaps inside a <div> block, and there are two options.

The first common option is to put <nav> at the top:

nav

div

In this layout, you will have the full page width at your disposal for rich contents, but you will have to think about how to present your <nav> block when you scroll down to the bottom of the page. Another common choice is to juxtapose <nav> with the main container (<nav> to the left in this example):

nav

div

The benefit of this layout is rather obvious: The navigation pane would be more spacious for menu items (as if we have lots to say in our personal website!), and the presentation of the navigation pane do not interfere with that of the main contents. The drawback is also obvious; the space for the main contents would be much narrower.

We also have the third option: To create a hidden menu as in the demo website - We won't do it now since you need to be more familiar with CSS/JavaScript, but we'll get there. Alright! Let's add these two blocks into <body> of the index.html in your project directory!

Finalize the draft

Hold on! You just added the two blocks, but they were always presented vertically following their order in <body>! This is exactly the way how HTML elements are presented by default in a Web browser. We have not yet learned how to position an element, which will come next in the CSS tutorial. For now, we live with the default presentation.

Now, supposed that you already have some items in your navigation pane, how can someone use them to walk through your website? Easy - just mark up each individual item as a hyperlink using <a>, as if a item is linked to one of the webpages in the website. Crucially, we need the href attribute for this element to specify the path of the hyperlink, as in:

This is a <a href="/somepath/">hyperlink</a>!

With the path specified in the above example, the hyperlink will direct a Web browser to the somepath directory under the root directory (because the path begins with /). You can also specify a complete Web address for this attribute for an external link. Although you probably do not have the webpage that the individual menu items should be linked to, it's not a bad idea to think about the path to each webpage in advance, and then use the path as the name of the directory for each webpage later.

We have our menu ready, and it's time to add some general personal info to the container! We will need <article> (since it's an article about your personal info), <section> (since there could be different categories of your personal info), and <p> (since different entries of the same type of info may need an indepent paragraph). Remember, the Web browser expects a heading for every <article> and <section>!

Text alignment using an invisible table

At this point, we don't have many choices when trying to align out texts; we simply add <br/> to create a line break an thus align different lines of texts to the left edge of a page. But a <table>element would be a great choice if we want us to effeciently use the space in our webpage to organize our texts. The crucial elements relevant are as follows:

<table></table> - A table block.
<thead></thead> - A table header block.
<tbody></tbody> - A table body block.
<tfoot></tfoot> - A table footer block.
<tr></tr> - A table row.
<th></th> - A table header cell.
<td></td> - A table value cell.

Supposed that our contact information includes both mobile number and e-mail, we can have a 2x2 table, in which the first row is the header of the info (such as tel and e-mail), and the second row contains the corresponding information. This way, the header will be align perfectly with their information to the on separate lines. The example below is not magic, and let's give it a try!


						
							
								Mobile E-mail
							
							
								+886-936-123456 chen.ty@mx.nthu.edu.tw

Mobile	E-mail
+886-936-123456	chen.ty@mx.nthu.edu.tw

The draft of your personal website is now ready. It's certainly not pretty at all, but it will be given some new life soon!

For the next unit...

For the next unit, you will have to complete the following task:

Modify the index.html inside your personal directory to have necessary HTML elements and add an English autobiography no longer than 250 words.
Please complete it before Oct 1, 2021. It's not an assignment, but it will be taken into consideration in my assessment of your personal website project.