Things I Learned from Learn to Code HTML & CSS, Lesson 10

Here are some things I learned from Lesson 10: Building Forms of Learn to Code HTML & CSS by Shay Howe.

Text Fields & Textareas

Text Fields

It is best practice to give an <input> element a name attribute.

Below is a list of the new HTML5 input types:

  • color
  • email
  • range
  • time
  • date
  • month
  • search
  • url
  • datetime
  • number
  • tel
  • week

Textarea

The <textarea> element has start and end tags that can wrap plain text. Because it only accepts one type of value, the type attribute doesn’t apply here.

The <textarea> element has two sizing attributes: cols for width in terms of the average character width and rows for height in terms of the number of lines of visible text. The size of a textarea, however, is more commonly identified with CSS.

Multiple Choice Inputs & Menus

Radio Buttons

Each radio button element should have the same name attribute value so that all of the buttons within a group correspond to one another.

To preselect a radio button for users we can use the Boolean attribute checked.

Drop-Down Lists

The name attribute resides on the <select> element, and the value attribute resides on the <option> elements.

Drop-down menus can use the selected Boolean attribute to preselect an option for users.

Multiple Selections

The Boolean attribute multiple allows a user to choose more than one option from the list at a time. Additionally, using the selected Boolean attribute on more than one <option> element will preselect multiple options.

The size of the <select> element should be adjusted appropriately to allow for multiple selections. It may be worthwhile to inform users to use the Shift and Ctrl keys when making multiple selections.

Form Buttons

Submit Button

As an <input> element, the submit button is self-contained and cannot wrap any other content. If more control over the structure and design of the input is desired, the <button> element may be used.

By default, the <button> element acts as if it has a type attribute value of submit.

Other Inputs

Hidden Input

Hidden inputs provide a way to pass data to the server without displaying it to users. They are typically used for tracking codes, keys, or other information that is helpful when processing the form. This information can be found by viewing the source code of the page. It should therefore not be used for sensitive or secure information.

File Input

Styling an <input> element that has a type attribute value of file is a tough task with CSS. Each browser has a default input style. JavaScript and other solutions can be employed to allow for file input, but they are more difficult to construct.

Organizing Form Elements

Label

The value of the for attribute should be the same as the value of the id attribute on the form control the label corresponds to. This allows users to click on the <label> element to bring focus to the proper form control.

The <label> element may also wrap form controls. Doing so allows omission of the for and id attributes.

Fieldset

Fieldsets group form controls and labels into organized sections. The <fieldset> is a block-level element that wraps related elements inside a form for better organization. By default, they include a border outline which can be modified using CSS.

Legend

A legend provides a caption, or heading, for the <fieldset> element. The <legend> element wraps text describing the form controls that fall within the fieldset. The markup should include the <legend> element directly after the opening <fieldset> tag. On the page, the legend will appear within the top left part of the fieldset border.

Form & Input Attributes

Disabled

The disabled Boolean attribute turns off an element or control so that it is not available for interaction or input. It also won’t send any value to the server.

Applying the disabled Boolean attribute to a <fieldset> element will disable all of the form controls within the fieldset.

Required

Error message styles are controlled by the browser and cannot be styled with CSS. Invalid elements and form controls, on the other hand, can be styled using the :optional and :required CSS pseudo-classes.

Validation also occurs specific to a control’s type. For example, an element with a type attribute value of email will require not only that a value exists within the control, but also that it is a valid email address.

Additional Attributes

Other form and form control attributes include the following:

  • accept
  • autocomplete
  • autofocus
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • max
  • maxlength
  • min
  • pattern
  • readonly
  • selectionDirection
  • step

Things I Learned from Learn to Code HTML & CSS, Lesson 9

Here are some things I learned from Lesson 9: Adding Media of Learn to Code HTML & CSS by Shay Howe.

Adding Images

Sizing Images

Specifying either a width or a height will cause the other dimension to adjust automatically to maintain the aspect ratio of the image.

Positioning Images

By default, images arepositioned as inline-level elements.

Inline Positioning Images

The height of the line in which an image appears will be changed to match the height of the image.

Adding Audio

Unlike the <img> element, the <audio> element requires both opening and closing tags.

Audio Attributes

The most common <audio> attributes include autoplay, controls, loop, and preload.

The first three are Boolean attributes, so they don’t require a stated value.

By default, the <audio> element isn’t displayed on a page. To display the element, the controls Boolean attribute is necessary.

The preload attribute helps identify what information about the audio should be loaded before the clip is played. It accepts three values:

none
No information is preloaded
auto
All information is preloaded
metadata
Any available metadata is loaded, such as the length of the file

When the preload attribute isn’t present, all information is loaded. For this reason, using the preload attribute with a value of metadata or none is a good idea when an audio file is not essential to the page. It’ll help to conserve bandwidth and allow pages to load faster.

Audio Fallbacks & Multiple Sources

Different browsers support different audio file formats, the three most popular of which are ogg, mp3, and wav. For the best browser support we’ll need to use a handful of audio fallbacks, which will be included inside an <audio> element’s opening and closing tags.

To begin, we’ll remove the src attribute from the <audio> element. Intead, we’ll use the <source> element, with a src attribute, nested inside the <audio> element to define a new source.

We can list one audio file format after the other. We’ll use the type attribute to quickly help the browser identify which audio types are available. When a browser recognizes an audio file format it will load that file and ignore all the others.

For browsers that do not support HTML5, we can provide a link to download the audio file after any <source> elements within the <audio> element.

<audio controls>
  <source src="jazz.ogg" type="audio/ogg">
  <source src="jazz.mp3" type="audio/mp3">
  <source src="jazz.wav" type="audio/wav">
  Please <a href="jazz.mp3" download>download</a> the audio file.
</audio>

Adding Video

Unlike <audio> elements, the video will display even if the controls Boolean attribute is not specified. However, the best practice is to include the controls Boolean attribute unless there is a good reason not to allow users to start, stop, or replay the video.

It’s good to specify the width and height properties of a video element in CSS.

Poster Attribute

The <poster> attribute allows us to specify an image, in the form of a URL, to be shown before a video is played.

Video Fallbacks

Video fallbacks work the same way as audio fallbacks.

One additional fallback option that could be used in place of a plain text fallback is to use a YouTube or Vimeo embedded video.

Adding Inline Frames

Pages referenced within the src attribute of an <iframe> element play by their own rules, as they don’t inherit any styles or behaviors from the page they are referenced on. Additionally, links within the page referenced within the <iframe> element will open inside that frame, leaving the page that contains the <iframe> element unchanged.

Semantically Identifying Figures & Captions

With HTML5 also came the introduction of the <figure> and <figcaption> elements. These were created to semantically mark up self-contained content or media, commonly with a caption. Before HTML5 this used to be done using an ordered list, but that was not semantically correct.

Figure

The <figure> block-level element is used to identify and wrap self-contained content, often in the form of media. It may surround images, audio clips, videos, blocks of code, diagrams, illustrations, or other self-contained media. More than one item of self-contained content may be contained within the <figure> element. If the <figure> element is moved from the main portion of a page to another location, it should not disrupt the content or legibility of the page.

Figure Caption

To add a caption or legend to the <figure> element, the <figcaption> element is used. It may appear at the top of, bottom of, or anywhere within the <figure> element; however, it may only appear once. It will serve as the caption for all content within the <figure> element.

Additionally, the <figcaption> element may replace an <img> element’s alt attribute if its content provides a useful description of the visual content of the image.

Not all forms of media need to be included within a <figure> element or include a <figcaption> element; only those that are self-contained and belong together as a group.

Things I Learned from Learn to Code HTML & CSS, Lesson 8

Here are some things I learned from Lesson 8: Creating Lists of Learn to Code HTML & CSS by Shay Howe.

Ordered Lists

Start Attribute

The start attribute defines the number from which an ordered list should start (default: 1).

The start attribute accepts only integer values, even though ordered lists may use different numbering systems, such as roman numerals.

Reversed Attribute

The reversed attribute allows an ordered list to appear in reverse order.

The reversed attribute is a Boolean attribute, and as such it doesn’t accept any value. False is the default value; the value becomes true when the attribute name reversed appears on the <ol> element.

Value Attribute

The value attribute may be used on an individual <li> element within an ordered list to change its value within the list. The number of any list item appearing below a list item wih a value attribute will be recalculated accordingly.

Description Lists

Description lists are used to outline multiple terms and their descriptions, as in a glossary, for example.

The description list, <dl>, requires two block-level elements: the description term element, <dt>, and the description element, <dd>.

A description list may have multiple terms per description, as well as multiple descriptions per term.

The <dt> element must come before the <dd> element.

By default, the <dl> element will include vertical margins, just like the <ul> and <ol> elements. Additionally, the <dd> element includes a left margin by default.

Nesting Lists

Every list may be placed within another list. However, lists should still be reserved specifically for where they hold the most semantic value.

The only element we can place as a direct child of the <ul> and <ol> elements is the <li> element.

Once inside the <li> element, the standard set of elements may be added, including any <ul> or <ol> elements.

List Item Styling

List Style Type Property

Any list-style-type property value can be added to either unordered or ordered lists. In other words, it’s possible to use a numeric list item marker on an unordered list and a nonnumeric marker on an ordered list.

List Style Type Values
List Style Type Value Content
none No list item
disc A filled circle
circle A hollow circle
square A filled square
decimal Decimal numbers
decimal-leading-zero Decimal numbers padded by initial zeros
lower-roman Lowercase roman numerals
upper-roman Uppercase roman numerals
lower-greek Lowercase classical Greek
lower-alpha / lower-latin Lowercase ASCII letters
upper-alpha / upper-latin Uppercase ASCII letters
armenian Traditional Armenian numbering
georgian Traditional Georgian numbering

Using an Image as a List Item Marker

We can place a background image on each <li> element within a list.

The process includes removing any default list-style-type property value and adding a background image and a padding to the <li> element.

List Style Position Property

The list-style-position: outside default property value places the list item marker to the left of the <li> element and doesn’t allow any content to wrap below the list item marker. The inside property value (which is rarely used) allows content to wrap below it as needed.

Shorthand List Style Property

For example:

ul {
  list-style: circle inside;
}

Horizontally Displaying Lists

Displaying List

The quickest way to display a list on a single line is to give the <li> elements a display property value of inline-block (or inline).

The list item marker is automatically removed.

Floating List

If the list item marker is needed, floating each <li> element is a better option.

When floated, the list item marker will sit on top of the <li> element. To prevent this, a horizontal margin or padding should be added.

Remember to clear the floats with clearfix.