Welcome to GnomeLedge (39/42)
Mar 2024 Updates - 39 Gnomes remains

Introduction to Building Websites

Section 3: Going Broader with HTML5 - Tags and Attributes

Click Here to Return to the Introduction Page »

Home of QH2301B/N

✨ Seekers of Knowledge ✨


In the Year 2023, 42 gnomes came to Earth.
In the Year 2024, 39 gnomes have risen into the Nimbus.

This is their story.


Click Here to Enter Class' WordPress Blog »

[New] Intelligence by Design

Intent Full Flow to Build Yourself

Click Here to Enter the Learning Module »

12th Jan 2024 - New Miro Board

For Data Visualisation for Business (DVB)

Click Here to Enter the Miro Board »

[New] Code Playground

Version Beta (Supports HTML, CSS, Javascript + JQuery Library)

Click Here to Enter the Code Lab »


In this session, we will help you go broader in understanding more uses of HTML5. You will learn how to setup web pages with HTML5.

Other than theory, you will be required to do some hands-on typing of HTML codes into "Notepad" application. Watch out for "Learn By Doing" exercises to help you connect what you read, with what you have typed.

Building upon Section 2, at the end of this section, you should be able to:

  • Setup more types of text display and layout
  • Understand how to setup the structure of a webpage

Let's begin.

Let's Examine the Tags in More Details

In the image above, you will see the <title></title> tags being dissected.

Character in the brackets are associated with the tag's purpose.

  • In this case, the title tags being placed within the <head></head> can instruct the browser to display relevant text content in the web page's browser tab.

As shown, end tags will have a forward slash in front of the character.

Attributes

Opening tags can carry attributes. Refer to the dissected examples below and you will see that attributes usually contains two parts (name/value pairings):

  • Attribute name: Which indicates the additional information of the element's content.
  • Attribute value: Which are indicated in double quotes, contains the information or setting of the attribute.

Example 1:
<p title=“This is a tooltip”>Example test

Above example shows a paragraph element.

  • Keep in mind this is different from the title element shown in the previous example.
  • The paragraph start and end tags helps defines a paragraph of text in the browser.
  • title as shown in the paragraph start tag is an attribute. When used like this, it is telling the browser that by hovering the mouse over the paragraph text displayed in the browser, the browser has to show the tooltip (attribute title's value) "This is a toolkit".

Example 2:
<a href=“www.google.com”>Click to go Google</a>

Above example shows a hyperlink element.

  • This the <a> tag tells the web browser that the content in <a> element "Click to go Google" is a weblink.
  • The <a> opening tag contains the attribute name href which tells the browser to use its attribute value as the weblink's destination.

Learn By Doing: Exercise 2 - Different Ways of Displaying Text

Click Here to Open Up the Video in a Separate Browser Tab

Test out the following HTML code via the following steps.

Step 1: Open Notepad

Step 2: Type in the following code and [indentation].
Please note that you are not suppose to type the word [indentation]. You may create the action of a [indentation] by clicking on "tab" key.

code

Step 3: Save the file as DisplayDifferentTypesOfText.html > AND select "Save as type:" as "All Files".


Understanding: Exercise 2

The table below unpack how the web browser reads the code and present them as a web page. However there is one point worth highlighting and it is in regards to the use of the headings tags <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

To most web developers starting out, the headings tags tend to be treated as a way to make things big and bold. What most people are not fully aware is that certain HTML tags can contain synatx and semantics.

  • Syntax is the way elements and attributes are setup to create a HTML document recognised by the browser. e.g.,
    • HTML document always begins with the Doctype declarations,
    • tags usually have a start and end.
  • Semantics is the meaning, the purpose behind the elements and attributes, the relationships between different elements and attributes etc.

To the web browser who is reading the code, the headings tags have deeper meanings than just instructions to increase text to a default size and boldness.

  • By assigning the headings tags, you as the web developer is telling the web browser that certain text element is more important than the rest. For instance, <h1> tag is of higher importance than things within <h3> and <h6> tags.

Knowing when to use which headings tag to emphasis and segment information, will be an important design consideration when e.g., packaging HTML content intended for use in screen readers.


More on Display Values and Attributes

An element within the <body> carries with it content display instructions for the web browser to execute. Two display values you should keep aware is:

  • Block elements will always start on a new line and take up the full width available.
    • Examples of block elements are the <p> (paragraph) and <h1>-<h6> (headings) elements which you have already encountered.
  • Inline elements does not start on a new line, instead inline elements only take up as much width as necessary.

As you have seen from previous examples, some attributes can only be applied to specific tags. Other attributes such as those listed, can apply to any tag:

  • Class attribute allows for application of special properties to groups of elements.
    • One common example when used in combination with CSS, a programmer can impose color and font styles to a class containing different elements. All elements under the same class will be affected by the style manipulation.
  • ID attribute allows for one unique id to be assigned to one element on the page.
    • One common example when used in combination with JavaScript, allows a programmer to manipulate a specific element through calling its unique name.

The Division Tag (div) vs. Semantic Elements

<div> is a common tag used in the <body>.

  • Unlike the <p> (paragraph) element which is intended to contain inline elements such as text, images etc.
  • The <div> element is often utilised for containing other HTML elements, including <p>. It is also a block display element.

In HTML5, new semantic elements such as <article>, <section> can be meaningfully applied in page layout territories where <div> used to support. This is to cover the <div> element's lack of semantic meanings.

As per the new guidance, the rule of thumb is always to apply the more appropriate semantic layout elements first, and only use <div> when there is no other more appropriate element.

To read-up more on Semantic Tags and <div> element, click on the link provided.

Let's Observe How DIV and Semantic Elements Are Used to Setup a LIVE Website

Click Here to Open Up the Video in a Separate Browser Tab

Watch the video or click on the link to view HTML5 Herald on your own web browser. Ref: https://www.thehtml5herald.com/

Inspect the Source Code of The HTML5 Herald (as shown below), you will see it is divided up as follows:

  • Header section with a logo and title
  • Navigation bar
  • Body content divided into 3 columns
  • Articles and ad blocks within the columns
  • Footer containing some author and copyright information

Some Best Practices When Writing HTML5 Code

  • Use indentation to enhance readability and avoid your code cluttering together. It is important to write well-formatted code. You will start to appreciate being able to read what you write overtime especially when hunting bugs or you return to an old project.
  • Draw out a basic wireframe of your webpage, this can better let you plan for your code to setup the designed for box structure and more granular level. Always remember that the most important step in web design, is the design.