HTML Markups

The div and span Markups

The most basic markups with very limited styling in the browser’s own style sheet are the div and span markups. Therefore, they can be used for “anything” because they can be styled as desired.

You can see div as a block element (rendered under each other - by default) and span as an inline element (rendered next to each other - by default).

<div>block of text</div>
<div>block <span>of</span> text with <span>inline</span> elements</div>

The above markups can be optionally added with classes and styled as needed.

Grouping

Typically, you will see div used as a grouping tag (all markups can be used for it - but semantically div is most commonly used).

<div></div>
<div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div>Quia quas ad sunt odit? Cupiditate omnis quod dolores quas sint.</div>
  <div>Voluptates ipsam eos totam laudantium cumque repudiandae.</div>
</div>
<div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <img src="https://picsum.photos/100" alt="Random Image" />
</div>

Texts

Several markups are related to text and basic formatting. However, one should consider doing the latter via CSS.

Remember that everything is pre-styled through the browser’s own “user agent stylesheet”.

Comments

<!-- Comment... -->

<!--

    Multiple comments

-->

Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>

Paragraph

<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit
  dignissimos, aut cupiditate quos, alias maxime reiciendis ipsa esse, eveniet
  repellendus rerum numquam sed consequuntur. Repellendus inventore beatae
  accusamus eveniet maiores.
</p>

HTML Encoding

Code	Explanation
` `	space
`&`	&
`<`	<
`>`	>
`"`	“
`'`	‘
``	Splitting of long words (see also css)
`ø`	ø
`Ø`	Ø
`å`	å
`Å`	Å
`æ`	æ
`Æ`	Æ

Formatting

There are b, i, and u markups but consider using CSS

<p>
  Voluptates <b>ipsam</b> eos <u>totam laudantium</u> cumque <i>repudiandae</i>.
</p>

The above can be changed to:

<p>
  Voluptates <span id="bold">ipsam</span> eos
  <span class="underline">totam laudantium</span> cumque
  <span class="italic">repudiandae</span>.
</p>

after which CSS classes can be added for design control.

Line Breaks and Lines

There are br (line break), and hr (horizontal line) markups but use CSS instead.

<p>lorem <br />ipsum</p>

<p>Lorem</p>
<hr />
<p>Ipsum</p>

Semantics

There are several semantic markups that you can use to create logical structures:

<header></header>
<footer></footer>
<section></section>
<article></article>
<aside></aside>
<nav></nav>

<header>
  <section></section>
  <section></section>
</header>

<section>
  <article></article>
  <article></article>
  <section>
    <article></article>
  </section>
</section>

These markups have no inherent design and follow a few rules in W3C standards. Therefore, there is freedom in their usage. It’s all about semantics.

Lists

There are two types of lists:

Unordered list (ul)
Ordered list (ol)

And items in the list are defined with an li markup.

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ol>

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

It is entirely possible to create a deep list structure (lists within lists…)

<ol>
  <li>item 1</li>
  <li>
    <ul>
      <li>item 1a</li>
      <li>item 1b</li>
      <li>item 1c</li>
    </ul>
  </li>
  <li>item 3</li>
</ol>

Links

Links can either be:

Inline links
External links

Here are a few examples:

<p>Quia <a href="http://www.google.dk">quas ad</a> sunt odit?</p>
<p>Quia <a href="page2.html">quas ad</a> sunt odit?</p>

<p>Quia <a href="#myId">quas ad</a> sunt odit?</p>
<h2 id="myId">Heading</h2>

<!-- Use of target to open in a new tab -->
<p>
  Quia <a href="http://www.google.dk" target="_blank">quas ad</a> sunt odit?
</p>

Images

Images are one of the few markups that do not have actual content - the reference to the image is indicated with a src attribute. Additionally, the alt attribute (what should be displayed if the image does not show) is required according to W3C standards.

<!-- External image -->
<img src="https://picsum.photos/100" alt="Image" />

<!-- Internal image -->
<img src="/Images/lorem.png" alt="Image" />

<!-- Prefer using CSS for size control -->
<img src="https://picsum.photos" height="200" alt="Image" />

<!-- Image as a link -->
<a href="page2.html">
  <img src="https://picsum.photos" alt="Image" />
</a>

In addition to Lorem Picsum, which provides random placeholder images, there are several other popular sites for sourcing images, especially for royalty-free or creative commons images. Some of these include:

Unsplash: A well-known source for high-quality, royalty-free images provided by a community of photographers.
Pixabay: Offers a vast collection of free images, vectors, and art illustrations.
Pexels: Provides free stock photos and videos, contributed by talented creators.
Shutterstock: A comprehensive library of high-quality images, videos, and music, but requires a subscription or purchase.
Getty Images: Known for its extensive collection of editorial and stock photos, but typically requires payment.

These sites are commonly used by designers, developers, and content creators for a wide range of projects.

Picture

The <picture> tag is used to offer multiple versions of an image, allowing the browser to choose the most appropriate one based on factors like screen size or resolution. This provides better control over image display, particularly for responsive designs.

The <picture> element works with the <source> element to define different image sources:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive Image">
</picture>

In this example, the browser selects the image based on the screen width: large.jpg for screens wider than 800px, medium.jpg for screens wider than 400px, and small.jpg as a fallback.

You can choose to use both <img> or <picture> tags, depending on your specific requirements and the level of control you need over image display - here is a comparison:

<img>: Displays a single image source.
<picture>: Offers multiple sources, enhancing responsiveness and optimization.

While the <img> tag is simpler, the <picture> tag provides greater flexibility for responsive design, making it ideal for modern web development.

Warning

Always include an alt attribute for images to ensure accessibility and SEO best practices.

Figure

The <figure> tag is used to group content like images, diagrams, illustrations, or code snippets along with their captions. It helps to associate these elements meaningfully within a document, making it easier for both users and search engines to understand the context.

The <figure> tag is typically paired with the <figcaption> tag, which provides a caption or description for the content:

<figure>
  <img src="image.jpg" alt="A beautiful landscape">
  <figcaption>A beautiful landscape in the mountains.</figcaption>
</figure>

In this example, the image and its caption are grouped together within the <figure> tag, creating a self-contained unit that can be referenced or styled independently. This is particularly useful for complex documents where images and their descriptions need to be clearly linked.

The <figure> tag is a semantic HTML element, meaning it enhances the meaning of the content within it, making it more accessible and easier to understand for both users and search engines.

Tables

The table markup is still used in HTML, but consider using CSS Grid or similar technologies for more complex layouts.

table = table
tr = rows
th/td = header cell/cell
ideally include
- thead = encompasses header
- tbody = encompasses body

Here is a simple example:

<table>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

And here is a slightly more complex table:

<!-- A more complete table -->
<table>
  <thead>
    <tr>
      <th>Hd 1</th>
      <th>Hd 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Foot 1</td>
      <td>Foot 2</td>
    </tr>
  </tfoot>
</table>

Regarding tools for creating tables, there are various options available:

Visual Studio Code (VSC): With HTML snippets and extensions, creating tables is made more efficient in VSC. There are specific extensions for HTML table generation that can speed up the process.
Online HTML Table Generators: There are various online tools that allow you to create HTML tables visually and then generate the code. These tools are user-friendly, especially for those who prefer not to write the markup by hand.
Spreadsheet Software: Applications like Microsoft Excel or Google Sheets can be used to design tables, which can then be converted to HTML using built-in features or third-party tools.

These tools can be especially helpful for those who are new to HTML or prefer a more visual approach to creating table structures.

Media

The video and audio markups can be used for various types of media, completely replacing other technologies (such as Flash, Java Applets, etc.).

Examples of Video

<video
  src="https://samplelib.com/lib/preview/mp4/sample-15s.mp4"
  controls
  autoplay
></video>

<video width="320" height="240" controls>
  <source src="https://samplelib.com/lib/preview/mp4/sample-15s.mp4" type="video/mp4" />
  <source src="https://samplelib.com/lib/preview/mp4/sample-15s.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

Examples of Audio

<audio controls="" preload="none" controls>
  <source
    src="https://samplelib.com/lib/preview/mp3/sample-12s.mp3"
    type="audio/mpeg"
  />
  <source src="https://samplelib.com/lib/preview/mp3/sample-12s.ogg" type="audio/ogg" />
  Your browser does not support the audio element.
</audio>

These HTML5 media elements provide a native way to embed video and audio content directly in web pages, offering greater accessibility and compatibility across different browsers and devices.

Forms

In HTML, forms can be composed of:

Textboxes
Lists
Buttons
etc.

Controls can optionally be surrounded by a form tag, so the browser knows where to send the data:

<form method="POST" action="https://httpbin.org/post"></form>

Data can also be sent to the server using JavaScript.

Here is an example of a form with a couple of text boxes, a checkbox, radio buttons, and a button.

<!-- Controls are typically placed in a form with a submit button -->
<form method="POST" action="https://httpbin.org/post">
  Name <input type="text" name="name" /> Age
  <input type="text" name="age" /> Active
  <input type="checkbox" name="active" /> Male
  <input type="radio" name="gender" value="male" /> Female
  <input type="radio" name="gender" value="female" /> Send
  <input type="submit" value="Send data" />
</form>

Input Controls

There are various types of input controls:

<input type="text" />
<input type="number" />
<input type="color" />
<input type="date" />
<input type="datetime" />
<input type="email" />
<input type="month" />
<input type="search" />
<input type="tel" />
<input type="time" />
<input type="url" />
<input type="week" />
<input type="range" />

Many of these have different user interfaces and validation.

Lists

Lists can be created with select and option tags:

<select>
  <option>Item 1</option>
  <option>Item 2</option>
  <option>Item 3</option>
</select>

These form elements and controls are essential for gathering user input and interacting with users on web pages.

Output

The <output> tag is used to display the result of a calculation or user action within a form. It connects to form elements through the for attribute, which specifies the IDs of the input elements involved in the calculation.

Here’s how it works:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="10">
  <input type="number" id="b" value="20">
  <output name="result" for="a b">30</output>
</form>

In this example, the oninput attribute updates the value of the <output> tag whenever the user changes the values in the input fields. The for="a b" attribute in the <output> tag links it to the input elements with IDs a and b, indicating that these inputs are part of the calculation. The result is displayed directly within the <output> element, automatically updating as the user interacts with the form.

Dialog

The <dialog> tag is used to create a dialog box, such as a pop-up or modal window, within your HTML document. A dialog box can contain any content, like text, images, or forms, and it can be shown or hidden using JavaScript.

To create a simple dialog:

<dialog id="myDialog">This is a dialog box!</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

In this example, clicking the button will open the dialog box. The showModal() method makes the dialog appear as a modal, meaning it requires the user to interact with it before they can return to the main content. The <dialog> element is a handy way to create custom pop-ups without relying on external libraries.

Template

The <template> tag is a powerful tool for web developers, especially when working with JavaScript frameworks or custom scripts. It allows you to define reusable chunks of HTML that aren’t rendered directly on the page but can be dynamically inserted and manipulated using JavaScript.

For example:

<template id="myTemplate">
  <p>This is a reusable template.</p>
</template>

In a JavaScript framework, you can use the content of the <template> tag to create and display multiple instances of a particular element or structure without duplicating HTML code. This tag is particularly useful for scenarios where you need to generate HTML content dynamically based on user interactions or data fetched from a server.

Here is a summary:

The content inside a <template> tag is not displayed when the page loads.
You can access and use this content in your JavaScript code to clone and insert it into the DOM as needed.

A simple example (using JavaScript):

let template = document.getElementById('myTemplate');
let clone = document.importNode(template.content, true);
document.body.appendChild(clone);

This example shows how to clone the content of the <template> and append it to the document body.

The <template> tag is especially useful in JavaScript-heavy applications where you need to manage and insert HTML elements dynamically. It’s not usually useful in static HTML documents without JavaScript.

Including CSS and Script

There is a best practice for how CSS and scripts are attached to an HTML page.

CSS

The attachment of CSS typically always occurs in the header:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>my page</title>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.css"
  />
  <link rel="stylesheet" href="style.css" />
</head>

Script

The attachment of scripts typically always occurs at the bottom (above /body):

    <!-- ... -->
    <script src="/script/app/app.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.js"></script>

</body>

This approach ensures that CSS styles are loaded before the page content is rendered, and JavaScript files are loaded after the HTML content, which can improve page load times and user experience.

Code	Explanation
` `	space
`&`	&
`<`	<
`>`	>
`"`	“
`'`	‘
``	Splitting of long words (see also css)
`ø`	ø
`Ø`	Ø
`å`	å
`Å`	Å
`æ`	æ
`Æ`	Æ

Code	Explanation
` `	space
`&`	&
`<`	<
`>`	>
`"`	“
`'`	‘
``	Splitting of long words (see also css)
`ø`	ø
`Ø`	Ø
`å`	å
`Å`	Å
`æ`	æ
`Æ`	Æ

HTML Markups

The div and span Markups

Grouping

Texts

Comments

Headings

Paragraph

HTML Encoding

Formatting

Line Breaks and Lines

Semantics

Lists

Links

Images

Picture

Figure

Tables

Media

Examples of Video

Examples of Audio

Forms

Input Controls

Lists

Output

Dialog

Template

Including CSS and Script

CSS

Script

Challenges

Code	Explanation
` `	space
`&`	&
`<`	<
`>`	>
`"`	“
`'`	‘
``	Splitting of long words (see also css)
`ø`	ø
`Ø`	Ø
`å`	å
`Å`	Å
`æ`	æ
`Æ`	Æ