Coding Notes

HTML

By Rae

HTML

Hypertext Markup Language

Used for standard document design in websites

Notes

  • Add <title></title> Tags
    • Defines the documents title.
    • Displayed as browsers tab.
    • Good for SEO.
    • Should be concise, descriptive, and unique.
    • Only one allowed per HTML Doc.
  • Add html lang attribute to your header <html lang="en"> to set the language of the content on the page.
  • Following heading structure <h1>, <h2>, <h3>, ext. is good for Accessibility (it's what the screen-readers expect) and SEO.
  • Tags that don't require closing tags can be "closed" by ending it in /. This is benificial for other developers coming in and reading your code. <img src="/imgsrc" />
  • Width is an attribute that can be added outside of the style attribute, this is not valid HTML. <div width="250px">
  • srcset helps render different images per browser size. <picture> <source media="(min-width:650px)" srcset="/imgsrc"> <img src="/imgsrc"> </picture>
  • Input has type attributes checkbox, color, date, text, password, time, file, ext.
  • Input has a placeholder attribute. <input placeholder="text">
  • Head holds metadata, styles, titles, scripts.
  • <link rel="stylesheet" href="styles.css"> links to an external css file and goes in the head.
  • Metadata controls what is seen when a user shares the link.
  • <!doctype html> specifies html version (html 5)
  • dl, description list, is used as a contianer for a list of terms, it encloses a list of groups of terms, and is commonly used to implement a glossory or display metadata (as key-value pairs).
  • Why write Alt Text?
    • Makes site more accessible.
    • Fallback incase the image doesn't load.
    • Helps the site rank higher on google.
  • Rules to writing alt text:
    • Don't use "image of".
    • Be concise (less than 125 characters), a lot of screen readers will cut off after 125 characters.
    • How would you describe the image over the phone?
  • Setting the Viewport tells the computer not to shrink the website. <meta name="viewport" content="width=device-width, initial-scale=1.0">.
  • When using the meta tag, never set user-scalable to no, it will make the site un-zoomable which will make the site inaccessable.
  • Web Applciation Manifest. manifest.json
    • Tells chrome the info it needs to hook program into chrome.
    • Tells name, version, icon, ect.
  • <article> A piece of content on your page that can stand on it's own. E.g. a product card, a blog post etc.
  • <section> Represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it.
  • <fieldset> is a child of a form
    • It is used to group several controls within a web form.
    • Visually, it wraps the controls with a border.
    • Add the <legend> to add a caption for the fieldset.
    • There can be multiple fieldsets per form.
  • <details> and <summary> create a clickable accordon.
    • However it is not accessible.
    • style the marker with ::marker
  • <picture>
    • Has more flexibility in specifying image sources than using <img src="URL">
    • Uses multiple images to fill the browser viewport more responsively.
    • Contains two tags, one or more source tags (with media and srcset attributres), and one img tag (for browsers that don't support the picture tag).
    • <source media="(max-width: 600px)" srcset="url"> is the mobile image.
    • <source media="(min-width: 601px)" srcset="url"> is the desktop image.
    • <img src="URL"> is the fallback image
  • <header> is for the site title, logo and nav.
  • <footer> is for copyright, terms and conditions.
  • <main> is for a pages unique content.
  • Use buttons for actions that affect the front-end or back-end (think JS) interaction.
  • Use links for navigation to somewhere on the same page, within the site, or elsewhere on the internet.
  • Use correct button vs link for accessibility.
  • Having too many font weight options when selecting a font can slow the site down.
  • Linking the form label to the form input will make the input field focused when you click the label.
  • Validation Attributes
    • required
    • min-length="number"
    • max-length="number"
    • min="number"
    • max="number"
    • pattern="[allowed characters (example: [a-zA-Z0-9]+(allowing a string of any length, without you only allow 1 character))"
    • adding {total number you want} instead of + makes the user have to add a specific number to the field.
  • Most HTML files load from top to bottom, put script tags for JS at bottom of the file, below the main tag, so the DOM elements have loaded.
  • Add aria-label when you have inputs but don't want labels.
  • To connect a label and input write <label for="name"><</label><input value="name" />
  • To write a radio btn write <label for="name"><label?><input value="name" name="connectingRadioBtns"/>
  • To write a checkbox btn write <input type="checkbox" id="idName">.
  • To write a dropdown (the select element) write <label for="name"></label> <select id="name" size="3"(opens dropdown) multiple(not accessible)> <optgroup label="groupOneLabel"> <option value="optionOne" selected>optionOne</option> <option value="optionTwo">optionTwo</option> <option value="optionThree">optionThree</option> <optgroup> <optgroup label="groupTwoLabel"> <option value="optionOne" selected>optionOne</option> <option value="optionTwo">optionTwo</option> <option value="optionThree">optionThree</option> <optgroup> </select>
  • textarea
    • A multiline input field.
    • <textarea placeholder="" id=""></textarea>
    • The closing tag has to be on the same line as the end of the start tag.
  • Semantic HTML
    • Out of the box functionality
    • Enhances developers experience
    • Helps with accessibility
    • Helps SEO
  • The <time datetime="yyyy-mm-dd"> element represents a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.
  • The <address> element indicates that the enclosed HTML provides contact inforamtion for a person or people, or for an organization.
  • The <em> Tag
    • Short for empahsis
    • It's used for words or phrases that would be stressed when spoken.
    • Important for assistive technologies.
  • The <strong> Tag
    • Used for importants, seriousness, or urgency.
    • Bolds the text to make the meaning visually clear.
    • Important for assistive technologies.

Resources

Netlify
Deploys a version of your code to a site for free.
Kevin Powel - Conquring Responsive Layouts
Free 21 day course about responsive design.
Favicon Converter
Converts images to .io for favicon use.
Download all files onto website, has multiple sizes for clear for image quality.
Copy and paste link text beneath title tag.
site.webmanifest lets us show the image on the home screen of our phones when creating a quicklink.
Font Awesome
A CDN that allows you to use a ton of pre-made icons (some are free).
The MDN Web Docs of every HTML tag
A document writing all the HTML tags and their associated uses.

Definitions

<ol>
Ordered List
<ul>
Unordered List
<li>
List Item
<dl>
Description List
The parent element that encloses the list of terms and descriptions.
<dt>
Description Term
The child element that specifies a term in a description list, must be used inside a dl tag.
<dd>
Description Details
The child element that provides the description, definition, or value for the proceding dt tag in a dl tag.
Web Standards
Guidlines and practices for the creation and delivery of content on the world wide web.
These standards are crucial for ensuring web content is accessible, reliable, and compatable, across different devices and platforms.
The primary organization responsible for web standards is the world wide web consortium (w3c).
Core HTML Tags
<a> for a link.
<b> to make bold text.
<strong> to make bold text with screen-reader emphasis.
<body> for the main HTML part.
<br> to make a break.
<div> is a division or part of an HTML document.
<h1> is for titles.
<i> to make italic text.
<img> for images in the document.
<ol> is an ordered list.
<ul> is an unordered list.
<li> is a list item.
<p> for paragraph
<span> to style part of the text inline.
Nesting
Tags inside other tags (ul, li) creating the tree structure of html tags.
Document Structure
The pattern the HTML document should follow (html, head, body, header, main, footer)
<modal> / dialog
A popup that appears on top of the current page.
The modal takes priority and prevents interactions with the rest of the page.
The HTML Document Tree
A way to map out the elements relationships to eachother. Written like a family tree, with ancestors, descendant, parents, children, and siblings.
Can be refered to as a document tree.
The ancestor is any element that is connected but further up the document tree.
The descendant is an element that is connected but lower down the document tree.
The parent element is an element that is directly above an element in the document tree.
The child element is directly below an element in the document tree.
The sibling is an element that shares the same parent with another element.
Div
A tag.
<div>
Short for divider
Hotlinking
Bad, don't do it.
Using an image from a remote source.
Replaced Elements
Elements whose content are not affected by CSS

Questions

  • Why is it target="_blank"?
  • What does rel mean?
  • Is there a way to make VS Code not auto finish my quotes when I type one?
  • Should class or ID go first?
  • Same class and id Yes or No?

Opinions

  • Having the same class and id on an element makes it easier to relate the css and js, especially if you avoid using divs in css.