HTML Fundamentals (2)

Structuring HTML

There are many layout HTML elements that helps to structure the file in an ordered manner. Specifically speaking, the most commonly seen ones are:

  • <main> is for content unique to this page. Use <main> only once per page, and put it directly inside . Ideally this shouldn’t be nested within other elements.
  • <article> encloses a block of related content that makes sense on its own without the rest of the page (for example, a single blog post. If you use your dev tool in your browser on this page, you may find the whole blog content is wrapped within a <article> tag.).
  • <section> is very similar to <article>, it is used to group a segment of the page that have a uniform function(like a mini map or a paragraph). You can break <article> up into <section>s and vice versa, depending on the context.
  • <aside>contains supplementary information than is indirectly related to the main content(like glossary entries, author biography or links)

In the MDN web docs you can usually see contribution links wrapped in <aside> at the bottom of the page:

aside_example
  • <header> represents the introductory section of a page or a section. It can contain logos, navigations or headings. If it is a child of <body> it defines the global header of a webpage, but if it’s a child of an <article> or <section> it defines a specific header for that section.

Differing <header> from <title> and headings

  • the <title> is the title of the whole webpage, and is not shown in the body. It is the child of <head>.
  • the headings(<h1> - <h6>) are child of <body>, they can be wrapped in <header>
  • <header> is a semantic container element (just like <div> but with semantic meaning)
  • <nav> contains navigational links of the page, including secondary link.
  • <footer> the footer element of the page

None semantic wrappers

  • <div> is a block level wrapper
  • <span> is an inline level wrapper

They are very convenient to use, but make sure you only use them when there is no better wrapper in place. For readability and search engine compatability, we now promotes semantic html.

<br> and <hr>

  • <br> is a line breaker, it is a self-closing tag.
  • <hr> is a thematic break element，it looks like a horizontal line in the file(just like *** in markdown in this blog). Semantically, it denotes a change of topic or section.
    It is also a self-closing tag.

HTML Tags in Detail

To create a hyperlink, we use <a> with its href attribute:

1
2
3
4
<a href=""> 
    <p>This is a hyperlink</p>
<!--    We can replace the inner html of <a> to almost anything!-->
</a>

We can add hyperlink to almost any element, including block level elements:

1
2
3
<a href="">
    <h1>This is a title with hyperlink</h1>
</a>

title Attribute

We can use the title attribute of <a> to give additional information to the user when the pointer hovers on the link:
like this.

target Attribute

If the link is to open a new site, we can decide whether to navigate the user to a new tab or just open it in the current tab usingtarget attribute:

  • To open links in a new tab, we simply set target="_blank"

download Attribute

Sometimes we want to make the browser download the file in href instead of directing to a new site. To do this, we need to specify the download attribute.

1
<a href="" download="file name">download file</a>
  • The download attribute can be blank, only when there is the download attribute will the browser enforce a download.
  • We can set the default name of the downloaded file.

Filepath

In order to create a hyperlink to one document, we need the filepath of the target.

  • Absolute URL: what we type in the browser to open a website:

    An absolute URL should at least have these parts:

    • Protocol: http:// or https://
    • Domain Name: like github.com
    • Path to specific page: like github.com/about/team.html
    • Query String: like github.com/search?q=emulisy
    • Fragment: github.com/docs/index.html#section1
  • Relative Filepath: A project may have multiple directories. Using relative path, we can reference documents under our project:
    • Lower level directory:
      1
      2
      3
      4
      5
      project/ 
      ├── index.html 
      └── assets/ 
      └── css/ 
      └── themes/

      If the project is shaped like this, inside index.html we want to refer to documents inside css or assets folder, we just type css/document.css or assets/document

      To refer to same or lower directories, we just type in the folder and the document name, separated with /.

    • Higher level directory:
      1
      2
      3
      4
      5
      6
      project/ 
      ├── index.html 
      └── assets/ 
      └── css/ 
          └── style.css
      └── themes/

      If we want to refer to index.html inside the style.css, we can type ../index.html

      To refer to higher level directories, we add ../ to indicate looking up one level. So to go up three levels, we type../../../folder/document

These file path is very important when creating links or adding images, audios and videos, as these resources are usually not presented directly in the html file.

Image <img>

This is a void element, so it can’t have any child or closing tag, unlike <a> you can put almost anything in it.

Using <img> we need two essential properties:

  • src=: the source root of the image
  • alt=: dictates the content of the image, and is shown when the image can’t be loaded.

Tip: Don’t point the src of the image to another website without permission, as this cost extra bandwidth to others when delivering the image to your page. Also, doing so leaves you no control over the image you referred to.

width and height

Usually we may want to start handling the visual effect of the page in CSS, however it is best practice to set the size of the image directly using width and height properties as they provide the aspect-ratio and enforce the browser to reserve space for the image.

Captions <figure> and <figcaption>

Although we can import the image and use <p> to write captions for the figure, it is hard for screen reader to associate the figure with the caption. However, it can be done using <figure> and <figcaption> element.

1
2
<img src="figure.jpg" alt="figure" width="400" height="400">
<p>This is the caption</p>
1
2
3
4
<figure>
  <img src="figure.jpg" alt="figure" width="400" height="400">
  <figcaption>This is the caption</figcaption>
</figure>

Videos <video>

This element is very much like the img, it also needs a src= attribute to find the video document.

controls: Usually we want the user to be able to control the video itself, to do so we only need to add the controls attribute, and the browser will render the video with controls for us.

1
2
3
4
<video src="file.mp4" controls>
  <p>Your browser doesn't support this video, 
    <a href="url.com">here</a> is a link to the original video.</p>
</video>

You may notice the paragraph inside <video>, this is a fallback content. It works just like the altin <img>, when the video is not supported, these contents will be shown on the page.

Multiple Format Support

For videos and audios, they need to be encoded using different codecs, and not all browsers support the same codecs, therefore we end up with compatability issues that some video and audio format may not be available on certain browsers.

1
2
3
4
5
6
7
8
9
<video controls>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
<!--  The type attribute is optional, but it is better practice to include it-->
  <p>
    Your browser doesn't support this video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>

To resolve compatability issues, we can introduce multiple formats by extracting the src= attribute. We can put the different source roots in separate <source/> tags.

In this case, the browser will play the first one that it has a supporting codec, and eventually print the fallback text if no such codec is available.

Other attributes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<video
  controls
  width="400"
  height="400"
  autoplay
  loop
  muted
  preload="auto"
<!--  Buffering large files, you can choose "auto", "none" or "metadata"-->
  poster="poster.png"> 
<!--  display the image before the video-->
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support this video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>

Audios <audio>

Introducing audios are almost the same as introducing videos:

1
2
3
4
5
<video controls>
  <source src="example.mp4" type="video/mp4" />
  <source src="example.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish" />
</video>

You can provide transcript of the audio using <track>

Tables <table> <th> <td> <tr>

We can create tables in this format:

1
2
3
4
5
6
7
8
9
10
11
12
<table>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>(1,0)</td>
    <td>(1.1)</td>
    <td>(1,2)</td>
  </tr>
</table>

Each row of the table is wrapped inside a <tr> table row, and within each row we can put in cells, which is wrapped in <td> table data.

<th> is a special table data, as they are usually the first row of the table, table headers. By default, they are bold and centered.

Tables of different shape

Sometimes, we want the table to shape differently, not just one column with several corresponding rows. We want rows or columns to span multiple cells.
To do so, we need rowspan and colspan attributes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table>
  <tr>
    <th colspan=2>Animals</th>
  </tr>
  <tr>
    <th colspan=2>Hippopotamus</th>
  </tr>
  <tr>
    <th rowspan=2>Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th colspan=2>Crocodile</th>
  </tr>
  <tr>
    <th rowspan=2>Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

This table looks like this:

special table

Button <button>

A single button is created using <button>:

1
<button>This is a button</button>

Usually the button itself is meaningless, so we need to use form or javascript to add certain effect to the button. like

1
2
3
4
const button = document.querySelector(button);
button.addEventListener(click, () => {
    butthon.innerText = "You clicked me!!!";
})

Form

A basic form contains several elements:

  • A <form></form> that wraps everything. Any data inside this is considered from the same form.
  • Some <label> <input> or <select> element that allows the user to choose or input data.
  • A <button> to submit the data

Tip: we can use <section> <div> or even <li> to group the form elements, but a specialized wrapper for the job is <filedset>

<form>

This tag have two frequently used attributes:

  • action: contains path to the page where we want to submit the data
  • method: contains the HTTP request method for the data transmission, like get post

<input>

This void element enables user to input data.

1
<input type="text" name="name" id="name" value="please type here" required />
  • type: there are MANY types of input, ranging from text, passwords to checkboxes, dates or even range widget. You can visit here for the complete options.
  • name id: they are all identifiers for the data to be submitted
  • required: decide whether the form can be submitted with or without this input
  • value: The initial state of the input element, varies according to the type. like for “text” or “password”, this defines the pre-filled text. But for “button” or “checkbox”, this defines the label of the input.

<label>

<label> provides extra information, notably identifiers for the input. They are associated with certain inputs explicitly or implicitly.

  • Explicit:
    1
    2
    <label for="name">Name (required):</label>
    <input type="text" name="name" id="name" required />
    The label associate with the input via for attribute and id of the input element.
  • Implicit:
    1
    2
    3
    4
    <label>
    Name (required):
    <input type="text" name="name" required />
    </label>
    The input are nested inside the label.

<button>

When a button is inside a form, the default behaviour is to submit the form.

Just like the <input>, button also have type attribute:

  • type="submit": since this is the default behaviour you don’t really have to specify this.
  • type="reset": reset the form to initial state, doing so erases all user input.
  • type="button": makes the button the same as the button outside the form, clicking it have no effect.

<select> <option>

These tags are for creating drop-down menus:

1
2
3
4
5
6
7
8
<label for="portion">Portion size:</label>
<select id="portion">
  <option selected>Please select a portion size</option>
<!--  Add selected if you want the option to be selected upon page load-->
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Other form items:

  • Multiline text input:

    1
    2
    <label for="comments">Any other comments:</label>
    <textarea id="comments" name="comments" rows="5" cols="33"></textarea>

    Using <textarea>, they behave just like <input type="text">, but allows multiline entry.

  • Radio buttons:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <fieldset>
      <legend>Education level</legend>  
    <!--    Use this to add subtitle for the form selector-->
      <input 
          type="radio"
          id="choice1"
          name="education"
          value="bachelor"
          checked />
    <!--  use checked if you want this to be selected initially-->
      <label for="choice1">Bachelor</label>
      <input 
          type="radio"
          id="choice2"
          name="education"
          value="master" />
      <label for="choice2">Master</label>
      <input 
          type="radio"
          id="choice3"
          name="education"
          value="doctor"
          disabled />
    <!--  Use disabled to make this option unselectable-->
       <label for="choice3">Doctor</label>
    </fieldset>
    radio form image

  • Checkbox:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <fieldset>
      <legend>To do list</legend>
      <input 
          type="checkbox"
          id="choice1"
          name="feedCat" />
      <label for="choice1">Feed my cat</label>   
       <input 
          type="checkbox"
          id="choice2"
          name="playWithCat" />
      <label for="choice2">Play with my cat</label>   
      <input 
          type="checkbox"
          id="choice3"
          name="work" 
          checked />
    <!--  Use checked to pre-select the box-->
      <label for="choice3">Go to work</label>   
    </fieldset>
    checkbox form image