Element syntax

Syntax: <element attribute="value"></element>

Void elements

Does the element hold content? Instead of the opening and closing tags:

<p>Content</p>

Void elements don’t have ‘content’ or closing tags. You can add / but it’s not necessary.

<img /> <input>

Attributes

Special value that adjusts the behavior of the element. For example, src and alt

Two kittens cuddle and sleep on cushions

Boolean attributes

Input elements collect data from the user. Some attributes can be turned on by including their boolean value, like checked and required.

<input type="checkbox" checked />

<input type="text" disabled />

<input type="radio" checked />

Buttons have their own HTML element though:

<button>Click me</button>

The HTML Boilerplate

It all begins with html, head, and body elements.

Head elements

Head elements provide ‘admin’ details and are not rendered on the html

Linking external resources

It’s all in the head, like linking to external resources.

Specify the relationship between the current HTML and the external resource with the rel= attribute.

The location of the external resource is the href= value

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet href="./styles.css" />

    <link rel="icon" href="favicon.ico" />

    <link
      href="https://fonts.googleapis.com/css2?family=Playwright+CU:wght@100..400&display=swap"
      rel="stylesheet"
    />
  </head>
  <body></body>
</html>

Full Boilerplate

It’s the standard, required information that tell browsers about the HTML file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Browser tab name</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body></body>
</html>
  • wrap all the content and specify the language: <html>
  • Metadata goes in the head
    • character encoding
    • social media previews
  • title for the browser tab or window
  • CSS links

Meta description

Attract people to click on your webpage from Google’s search results page with a good meta description.

To remember the meta tag, note it has the same name and content attributes as the viewport meta tag.

<meta
  name="description"
  content="Discover expert tips and techniques for gardening in small spaces, choosing the right plants, and maintaining a thriving garden."
/>

Open Graph (OG) tags and SEO

The Open Graph protocol uses meta tags with the property attribute to define how content appears when shared on social media.

  • property="og:title"
  • property="og:type" (website, articles, video)
  • property="og:image"
  • property="og:url"

For example:

<meta content="freeCodeCamp.org" property="og:title" />

Character Encoding and 8 bits

Text on a webpage is stored as a sequence of characters stored as one of more bytes

(byte is a unit of data with 8 bits of binary digits)

UTF-8 supports every character in the unicode character set (alphabets from most languages and symbols)

Body elements

The Script Tag

Embed or link to a JavaScript file using the <script> tag with src element.

You can place JS code within the script tag, but it’s best practice to link to an external file and maintain a separation of concerns.

The <script></script> element can hold content, which is why it’s not a void element like the <link> element.

<body>
  <script src="/javascript/alert.js"></script>
</body>

The div element

Use the div element to group html elements, typically when they share a set of css styles.

Classes

Other html elements can have classes, not only div elements.

An id is unique to a specific element, where a class can be shared by many elements.

The audio element

It only is visible on the page if you add the controls boolean attribute.

It’s not a void element, audio linked using a src value.

<audio src="https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3" controls></audio>

Other boolean attributes include:

  • loop
  • muted

Use multiple <source> elements to provide the same file in different audio file types. The browser starts with the first one and works down the list to play the first filetype it can.

<audio controls>
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.wav" type="audio/wav" />
  <source src="audio.mp3" type="audio/mpeg" />
</audio>

You can also have <source> elements for video. Don’t forget the weird type syntax with the audio/ or video/ followed by the type.

Video

<!-- display a poster while video downloads -->
<video
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="400"
  loop
  controls
  autoplay
></video>

Content organization

Include the priority content in the <main> element. Organize sections within the <main> element with the <section> element.

<main>
  <section></section>
  <section></section>
</main>

Use the <article> element for blog posts: wrap paragraph and heading tags in it. The <article> element represents self contained content on a web page.

Add contact info below the <main> section with contact info.

Practice Tasks

  • Create a basic HTML page with boilerplate code (from memory) and add inputs and other elements to the body.
  • Create an html page with
    • boilerplate
    • meta description for SEO
    • Open Graph tags for SEO
    • divs with class and id attributes to organize repeated (and unique) style elements. Similar to freeCodeCamp’s ‘Bookstore’ page workshop.
    • buttons

Images

Optimize images

Scale images. Prevent your users from downloading unnecessary data by matching the dimensions of the image on the page with the image asset that is served. It’s wasteful to serve a 1920 x 1080 (pixel) image if it’s going to be displayed as 640 x 480 on the site.

Image formats. Consider using modern images formats such as WEBP and AVIF because the are more optimized than PNG and JPG.

Compression. Reduce the file size of images by compressing them. However, JPEG is not lossless and compressing them will reduce the image quality.

Image licenses

By default, images have an “All Rights Reserved” license, meaning that they are copyright protected and the creator (or publishes) holds all rights to the image. You can only use these images on your website if you:

  • get written permission from the copyright owner
  • purchase a license from the copyright owner
  • use it in a ‘fair use’ way (limited and transformative) by modifying or commenting on image, such as creating a parody

You can use “Creative Commons-” and “BSD-” licensed images if you follow the license agreements which may include making your website open source or not modifying the image.

Find images that are in the ‘public domain’ – meaning that no license restrictions apply.

  • “Creative Commons 0” is a public domain license.

Filter Google Images and websites like Unsplash and Pixabay for free-to-use images so you can be confident you’re not violating any copyright.

SVGs

Scalable Vector Graphic (SVG) images use paths and equations to define points, lines, and curves of the image. The vector-based format scales well as a result meaning that you can increase the scale of the image without it looking blurry and pixelated.

In contrast are raster-based images, like PNG and JPEG, which consist of pixels. The pixel data holds the color value. Raster images do not scale well, as all you get is a larger dot of a particular color and are limited to that geometry.

SVGs are cool and store data in XML format – add them to HTML and modify values like fill="red" to change the color of the image.

The <SVG> element is the drawing container of the image. Each SVG has attributes that control its position and appearance within the drawing area.

Yellow smiley face example:

<svg
  width="100"
  height="100"
  viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg"
>
  <!-- the face circle -->
  <circle
    cx="50"
    cy="50"
    r="45"
    stroke="black"
    stroke-width="4"
    fill="yellow"
  />
  <!-- two eyes -->
  <circle cx="35" cy="40" r="5" fill="black" />
  <circle cx="65" cy="40" r="5" fill="black" />
  <!-- draw the curved smile -->
  <path d="M35 65 Q50 80 65 65" stroke="black" stroke-width="4" fill="black" />
</svg>

Use SVGs for icons (like social media icons), styled bullet points, and logos.

Create an SVG heart icon

  1. Add the <svg> element with width and height attributes. 2 The viewbox=" x y a b attribute defines the starting co-ordinates (point) and dimensions of the visible part of the SVG.

    - the first two values are the x, y co-ordinates of the starting point of the viewbox – `0 0` being the top-left corner.
- the next two values are the width and height of the viewbox

  2. Draw the path as a d attribute value. The letters represent commands like ‘move to’, ‘draw line’, and ‘close’. The numbers represent co-ordinates.

  3. Change the color of the heart from the default black to red with fill="red".

<svg width="24" height="24" viewBox="0 0 24 24" fill="red">
  <path
    d="M12 21s-6-4.35-9.33-8.22C-.5 7.39 3.24 1 8.4 4.28 10.08 5.32 12 7.5 12 7.5s1.92-2.18 3.6-3.22C20.76 1 24.5 7.39 21.33 12.78 18 16.65 12 21 12 21z"
  ></path>
</svg>

Replaced elements

Replaced elements are rendered by the browser based on external content (like <img> or <video>). Their internal content can’t be styled directly with CSS, but their box model (width, height, margin, border) can be styled. For example, a map with an h1 element that you can’t change the color or font-family of.

Modified elements:

These all use the src attribute to specify the location of the external object. The also have width and height.

  • <img>
  • <video>
  • <embed>(interesting, not familiar with this one)
  • The image type of input elements is a replaced image but other types like text and email are not. <input type="image" src="#" alt="alt description">
  • <iframe>, used to embed a
    • video
    • map
    • web page
    • HTML element

The <iframe> element

Standing for ‘inline frame’ the iframe element embeds HTML content directly within the HTML page.

Use the srcdoc attribute instead of src to embed HTML directly in the iframe element.

<iframe
  width="400"
  height="400"
  src="https://www.youtube.com/embed/PkZNo7MFNFg?si=-UBVIUNM3csdeiWF"
  title="Learn JavaScript - Full Course for Beginners (YouTube video)"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
  picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin" allowfullscreen ></iframe
>

Notes:

iframes are not void elements but I don’t know what content might go between the opening and closing tags.

The YouTube URL has /embed/ instead of watch?=asdfa....

The allow values are separated by a semi-colon (:) or simply a space.

  • accelerometer lets the iframe use motion sensors so it can detect things like device tilting and rotation.

  • autoplay lets the video start playing automatically, and

  • clipboard-write lets the iframe write data to the user’s clipboard.

  • encrypted-media allows the use of encrypted media extensions to protect the video.

  • gyroscope grant access to the device’s motion and orientation sensors

  • web-share allow sharing the iframe content through the device’s sharing native share dialogs

  • referrerpolicy="strict-origin-when-cross-origin" allows sharing of the full address on the same site, only the site name on other sites, and nothing on insecure sites. (controls what information about the current page (the “referrer”) is sent to the iframe’s URL via the Referer HTTP header.)

  • the allowfullscreen is a boolean attribute

Target attribute values

Anchor tags have can contain target attributes with four possible values that determine where the link opens. They all start with an underscore.

  • target="_blank" : open link in a new browser tab
  • target="_self" : (default) same tab
  • target="_parent" : (for iframe) open the link in the parent of the iframe - the same website tab/window instead of the iframe
  • `target=“_top” : open in the ‘parent of the parent’ - nested iframe links will open on the website’s tab/window

Absolute vs relative paths

Use absolute paths for:

  • Resources on an external website
  • When you need a link to work regardless of location

Absolute paths include:

  • the protocol like https:// for websites
    • and file:// for files on your local machine.
  • the domain name
  • folders and the file name
  • a leading slash for a root-relative path (/public/styles.css)

Example of an absolute link to a file:

<a
  href="https://design-style-guide.freecodecamp.org/img/fcc_secondary_small.svg"
>
  View fCC Logo
</a>

Use relative path links for:

  • linking to resources within the same site
  • to keep code cleaner and easier to maintain during development
  • during local testing to ensure links work (without an internet connection)

Example of a relative link to a file:

<p>
  Read more on the
  <a href="about.html">About Page</a>
</p>
  • Path separator : / or \ depending on operating system
  • Single dot . : points to the current directory in relative paths but it’s common to omit ./
  • Double dot .. : point to the parent directory in relative paths

File tree example

```
my-app/
├─ public/
│  ├─ favicon.ico
│  ├─ index.html     # link to ./favicon.ico
                     # link to ../src/index.css
├─ src/
│  ├─ index.css
│  ├─ index.js
```

A link that turns purple after you click it because the state of the link has changed.

These are pseudo CSS classes that can be referenced in CSS to apply custom styles to different link states, like:

a:visited {
  color: brown;
}

In CSS, style rules should be in the following order

  • :link is the default state, before you click a link
  • :visited after you click a link
  • :hover mousing over the link
  • :focus link is selected by keyboard by pressing tab or programmatically, often styled to have a border around it
  • :active link is being clicked (that is, the left mouse button is down)

Resources

freeCodeCamp review page: https://www.freecodecamp.org/learn/responsive-web-design-v9/review-basic-html/basic-html-review