HTML Lecture Notes

This page is just an information dump for the lecture portion of codecamp courses so far for my own notetaking purposes

1. HTML

2. What role does HTML play on the WEB?

   In this section we learn about the elements

   <p></p>;<img> or <img >; and <img src="" alt="">

3. What are attributes and how do they work?

   In this section we learn about some new elements including:

   <element attribute="value"> ; <a href="website.com">Visit our website</a> ; <input type="checkbox" checked />

4. What is the Role of the Link Element in HTML, and How Can It Be Used to Link to External StyleSheets?

   In this section we learn about the link element ( <link rel="stylesheet" href="./styles.css" /> ) and many various attributes for it such as rel and href. We learn that functionally it links to external resources like stylesheets and site icons.

5. What is an HTML Boilerplate, and Why Is It Important?

   In this section we learn about the ready made template called a boilerplate. It stresses the important of meta commands doctype and basic html structure that you can use as a foundation for all your websites and pages

6. What is UTF-8 Character Encoding, and Why is it Needed?

   In this section we learn about the command <meta charset="UTF-8" /> and how it is important for making sure all characters from all writing systems are included in your page.

7. What are Div Elements and When Should You Use Them?

   In this section we look at a couple different elements used to group elements. The first one that is learned about is the <div> element that you can use to group things together without having a semantic meaning. They compare it to the <section> element which can be used to add in semantic meaning.

8. What are IDs and Classes, and When Should You Use Them?

   This section talks about the id attribute. It talks about how it can be used to reference CSS things and how it should not contain spaces and needs to be unique. It then moves on to contrast that with the class attribute which doesn't need to be unique.

9. What Are HTML Entities, and What Are Some Common Examples?

   In this section it describes entities which can be used to display characters that are reserved by html. This usually starts with & and ends with ;. You can surround lt and gt with those symbols to get HTML element looking text. You can also use these to make copyright/trademark symbols.

10. What is the Role of the Script Element in HTML, and How Can It Be Used to Link to External JavaScript Files?

    In this section they talk a bit about the script element, discuss how you can put a javascript alert in the path, but best practice is to include a .js file that you put all your javascript code in.

11. What is the Role of the Meta Description, and How Does It Affect SEO?

    This section discusses search engine optimization(SEO) and how to use the meta element to get better search optimization. You can set the name attribute to description, and then make sure that you have a short description after content attribute for SEO.

12. What is the Role of Open Graph Tags, and How Do They Affect SEO?

    In this section they talk about how to optimized website appearance across social media. You can change the title displayed using meta properties and you can change the image that represents your page on social media platforms.

13. What Are the Roles of the HTML Audio and Video Elements, and How Do They Work?

    They introduce <audio> element and how you can use the src attribute to play audio on your website. If you add the controls attribute the user can choose to play the music. Loop attribute loops the music, and muted means the user will have to choose to play it using controls. Following this they introduce the <video> element and how you can use the poster attribute to have a chosen picture while the video loads.

14. What Are Common Ways to Optimize Media Assets?

    In this section they talk about optimizing medias by size,format, and compression. It is a brief intro to each and some of the file types of images

15. What Are the Different Types of Image Licenses, and How Do They Work?

    In this section talks about how images are all rights reserved by default. It discussses permissive licenses, and public domain and how to find images of certain licenses

16. What Are SVGs, and When Should You Use Them?

    This section talks about Scalable vector graphics and how they are stored within XML and are perfect for icons and essential logos. They also talk about raster images like PNG/JPG and how they do not scale well because they are based on pixels.

17. What Are Replaced Elements, and What Are Some Examples?

    These elements are decided by an external resource rather than CSS. Common examples are image, iframe, and video elements. Iframe element is introduced and how it is good for embedding videos onto the page. They also discuss the input element and the type attribute.

18. How Do You Embed Videos onto Your Page Using the iframe Element

    The inframe "iframe" element is discussed in much greater depth. Including the attributes for width, height, allowfullscreen, title, and srcdoc for embed directly into the HTML.

19. What Are the Different Target Attribute Types, and How Do They Work?

    This section is about adding target attribute to anchor elements for links. Such as _self, _blank, _parent, _top, _unfencedTop. These are important to consider when adding links.

20. What is the Difference Between Absolute and Relative Paths?

    This differentiate between absolute paths which go to somewhere on the web, and relative paths which is a path in relation to the current file. Absolute for external, relative for internal.

21. What is the Difference Between Slashes, a Single Dot, and Double Dot in Path Syntax?

    The / is for a break between folder or file names. A single dot points to the current directory. Double dots are able to access files outside of the current working directory.

22. What Are the Different Link States, and Why Are They Important?

    Discusses :link state which is the default for a link before clicks. The :visited state which is the default when a link has been clicked. The third is :hover which is when the cursor is over the link. The :focus is when you focus on a link. Then :active is when it is being clicked actively. In CSS the order has to go link,visited,hover,focus, then active.

23. When Should You Use the Emphasis Element Over the Idiomatic Text Element?

    Discusses an old element of i which would be used for italics. It also compares it to the em element which is a sematic element for emphasis. Also if the text doesnt have a purpose just use CSS for italics.

24. When Should You Use the Strong Element Over the Bring Attention To Element?

    Dicusses the old element b which is used to bring attention to specific words. It also compares it to the strong element which is used to emphasize something that is critical or important. Visually they are both pretty similar, but their meaning differs

25. What Are Description Lists, and When Should You Use Them?

    Talks about description lists and how they are perfect for presenting terms and definitions in an organized way. You will end up using 3 elements for a description list the dl element to start, dt for the term, and dd for the definition or description. They can be used for some other things that have two related pieces of information.

26. How Do Block and Inline Quotes Work in HTML?

    Talks about blockquote element for extendeded quotations. You should use the cite attribute to specify the source materials. If you are citing a smaller quote you should use the q element for inline quotation and it will add quotation marks automatically.

27. How Do You Display Abbreviations and Acronyms in HTML?

    Talks about using the abbr or abbreviation element and how you can use title to show the expanded form. Good for acronyms/abbreviations that may be unclear and need additional context.

28. How Do You Display Addresses in HTML?

    Talks about the address element and how the br element is used to add line breaks for division between street name and city etc. For phone numbers use the anchor element with "tel:+" at the start of the number. It also talks about using the "mailto:" in front of emails but that it will typically get flagged as spam this way.

29. How Do You Display Times and Dates in HTML?

    Talks about the time element and the attribute datetime that has to be in the format of year,month,local date, global date. Good for representing events or appointments.

30. How Do You Display Mathematical Equations and Chemical Formulas in HTML?

    Talks about using the sup element for exponents. Also talks about using the sub element to represent subscript for formulas, footnotes, etc.

31. How Do You Represent Computer Code in HTML?

    Talks about the code element which can be used to represent only a single line of code. You can also use the pre element before it and it is important to be mindful of spacing because it will display.

32. What Are the U, S, and Ruby Elements Used For, and How Do They Work?

    Talks about u element for underlining for inline text, spelling errors. The s element for strikethrough when a text is no longer accurate or relevant. The ruby element for pronunciation of East Asian characters. The rp element as a fallback for browsers that do not support it. The rt element for text used for ruby annotation.

33. How Do Forms, Labels, and Inputs Work in HTML?

    In this section they discuss the form element and how it can be used to gather user information like names or addresses. The action attribute tells where the data is sent and the input element can be used to define the data type. You can use the label element in order to establish an implicit association or you can use the for attribute with the input label to explicitly associate. The placeholder attribute can be used with input to give the user hints about the expected input.

34. What Are the Different Types of Buttons, and When Should You Use Them?

    This section talks about the button element and how the type attribute controls the behavior when activated. You can use the button type but by default the button will not do anything unless you use JavaScript code. You can also use the submit type which will submit data to be processed. The third type is reset which resets the data inputted. You can also use input element for buttons and the same types but input is a void element.

35. What is Client-Side Form Validation in HTML Forms, and What are Some Examples?

    Talks about client side vs server side. Also talks about the required attribute for input which makes a section required in order for a form to be submitted. Also talks about the type email and how it comes with some built in requirements. You can use the minlength/maxlength attributes for more validation.

36. What Are the Different Form States, and Why Are They Important?

    Talks about different form controls like focused,readonly, disabled, or default. Default is before any information, focused is when it is clicked or tabbed to. Disabled shows when the input cannot be focused or activated. Readonly is when the user cannot edit the area it can be focused.

37. What are HTML Tables Used For, and What Should They Not Be Used For?

    This section talks about how tables should only be used for tabular data, and not for positioning things on a webpage anymore. Also talks about the many elements of a table including table, thead, tbody, tfoot. These are then broken down into table rows or tr element, each tr can have a header or th, and can contain cells of data with the element td.

38. What Is an HTML Validator, and How Can It Help You Debug Your Code?

    This introduces you to some various HTML validator tools. The most widely accept w3.org, and jsonformatter.org and how to validate on those websites.

39. How to Use the DOM Inspector and DevTools to Debug and Build Your Projects

    This talks about how to debug code using DOM inspector and developer tools.

40. What is Accessibility

    Explains that accessibility is making websites inclusive to all disabilities. The 4 design principles of POUR - perceivable, operable, understandable, robust.

41. What Are Screen Readers, and Who Uses Them?

    Talks about screen readers and that they do text to braille and speech. Gives shortcuts for accessing voiceover built in for mac/ios/linux/android. Talks about the importance of acessibility

42. What Are Large Text or Braille Keyboards, and Who Uses Them?

    Talks about keyboard features for being more accessible

43. What Are Alternative Pointing Devices Such as Trackballs, Joysticks, and Touchpads Used For?

    Talks about alternatives to mice. Trackballs, joysticks, and touchpads specifically.

44. What Are Screen Magnifiers Used For?

    Talks about how screen magnifiers can enhance scale by more than 200%. Importance of using scalable fonts, adapting to screensizes, high contrast color schemes, non sticky and tiny navbar, using html text over images, feedback next to elements. Built in magnifiers in OS, and third party ones.

45. What is Voice Recognition Software Used For?

    Allows users to use voice to pass commands instead of inputs like keyboard/mice. Lists disabilities helped by voice recognition. Gives examples, Voice Control, Voice Access, Windows Speech Recognition, Dragon by Nuance.

46. What Are Some Common Accessibility Auditing Tools to Use?

    Accessibility auditing tools like google lighthouse can be used to find ways to improve accessibility, but should not be depended upon solely. You can use it by pressing F12 in your devtools. You can also use pagespeed.web.dev as a web source, WAVE, IBM equal accessibility checker.

47. How Does Proper Heading Level Structure Affect Accessibility?

    Proper headings give structure as far as how to navigate a website. They should present a logical flow from 1-6. Use clear descriptive text

48. What Are Best Practices for Tables and Accessibility?

    Talks about how tables may be harder to navigate for people with disabilities. Talks about how you need to use a caption items so users can understand purpose and content. Talks about how using the scope attribute to distinguish between row headers or column headers.

49. Why Is It Important for Inputs to Have an Associated Label?

    Talks about importance of labels to input fields. Proper labels also benefits SEO.

50. What Is the Purpose of WAI-ARIA, and How Does It Work?

    WAI-ARIA = Web Accessibility Initiatve - Accessible Rich Internet Applications. It works by a set of attributes you can add to elements to provide semantic information. Aria-labelledby attribute lets you connectan element to a specific label.

51. What Are ARIA Roles?

    ARIA Accessible Rich Internet Applications. They specify the semantic meaning of html elements. To specify the ARIA role of an element use the role attribute like role="aria role". 6 categories - Document Structure Roles, Widget Roles, LandMark Roles, Live Region Roles, Window Roles, Abstract Roles.

    Document Structure Roles - define structure of a webpage. Specify roles that dont have semantic elements such as toolbar, tooltip, feed, math, presentation, note. Widget roles are scrollbar, searchbox, separator, slider, spinbutton, switch, tab, tabpanel,treeitem. Landmarks classify and label primary sections ex. banner, complementary, contentinfo, form, main, navigation, region, search. Live Regions define elements that change dynamically including alert, log, maruqee, status, timer. Window Roles - alertdialog and dialog it is considered best practice to use dialog and the JavaScript methods. Abstract roles help organize a document.

52. What Are the Roles of the area-label and aria-labelledby Attributes?

    Aria-label is for interactive elements it adds a text label that screen readers can read. Aria Labeledby does the same thing but you use texst that already exists on the page. Dangers of labeledby over label - sometimes its not translated. It can provide a mismatch between the label text and the invisible label. It can create complex invisible labels. Never use both together.

53. What is the aria-hidden Attribute, and How Does It Work?

    Aria hidden is good for when you want to display content but keep it hidden from screen readers. Good for icons and images for decoration, and duplicated content. Never use hidden on something that is focusable with a keyboard. Hidden is not necessary when already using a hidden attribute, if it is display none or visibility hidden.

54. What is the aria-describedby Attribute, and How Does It Work?

    Provides additional information about an element by referencing content on the page. Most common uses associating instructions or error messages with form inputs. Such as password requirements or warnings about deletion.

55. When Is the alt Attribute Needed, and What Are Some Examples of Good Alt Text?

    Stresses that alt texts are the only way that people with disabilities will understand an image. alt texts need to be extra descriptive to give a visual of important images. Alt text needs to be short but detailed enough to understand the image. Don't describe all details, if there is similar text don't write it twice, end alt text with period. If its just for decoration you can have a null alt.

56. What Are the Accessibility Benefits for Good Link Text, and What are Examples of Good Link Text?

    Helps users to know how to find information quickly. Make sure links are visually distinct, avoid generic links, aim for concise descriptive links, don't repeat the same link text for different places, make it make sense.

57. What Are Good Ways to Make Audio and Video Content Accessible?

    You can add captions or subtitles to content by using the track element inside your video or audio elements. Kind attribute is used to tell how the track element shoudl be used valid values include captions, subtitles, chapters, and metadata. Providing a transcript is also important you can add these below the content. Some places have automatic captions like youtube or vimeo, but you can also use veed, rev, amara, descript.

58. What Are Some Ways to Make Web Applications Keyboard Accessible?

    Tab index can help to change focus order. Accesskey will make activation easier.