Your documents different sections should be marked up according to their content and their functionality<\/p>\n\n\n\n
<nav><\/code>\u00a0– navigation bar, main navigation functionality for the page<\/li>\n\n\n\n<header><\/code>\u00a0– introductory content<\/li>\n\n\n\n<footer><\/code>\u00a0\u00a0– group of end content for a page<\/li>\n\n\n\n<main><\/code>\u00a0– main content: \u00a0content that\u2019s unique to this page, use only once per page, has many subsections that can be used inside:\n\n<article><\/code> block of related content, stands on its own<\/li>\n\n\n\n<section><\/code> grouping together a part of a page that constitutes a single piece of functionality<\/li>\n\n\n\n<aside><\/code> sidebar: content that\u2019s not directly related to the main content but can provide additional indirect information<\/li>\n\n\n\n- non-sematic subsections<\/em> (only use if you can\u2019t think of a better semantic text element)<\/li>\n\n\n\n
<span><\/code> inline element<\/li>\n\n\n\n<div><\/code> block element, container<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\nSEO (Search Engine Optimization)<\/strong>: a page\u2019s search ranking can be affected by the use and content of certain tags including <br> and <hr> tags. These tags control readability of a site, which plays a part in SEO. More information on SEO will be included in Module 4. <\/p>\n\n\n\n<br><\/code> line break: creates a line break, moving the following content down a line<\/p>\n\n\n\n<hr><\/code>\u00a0horizontal rule: creates a horizontal line between two elements, denotes a thematic change in the text<\/p>\n\n\n\nFORMS<\/h2>\n\n\n\n\n- FORMS FUNDAMENTALS\n
\n<form><\/strong><\/code>\u00a0– container element for the form<\/li>\n\n\n\naction=\"www.url.com\"<\/strong><\/code>\u00a0– defines the location (URL) where the form information goes once submitted<\/li>\n\n\n\nmethod=\"get, post\"<\/strong><\/code>\u00a0– defines which HTTP method to send the data with\n\n\u201cpost\u201d<\/code> appends form-data inside the body of the HTTP request, has no size limitations, are never cached, cannot be bookmarked<\/li>\n\n\n\n\u201cget\u201d<\/code>\u00a0appends form-date into the URL in name\/value pairs, never use to send sensitive data, better for non-secure data, length restrictions, can be cached, can be bookmarked<\/li>\n\n\n\n- Labels<\/strong> – how to link a label to a form widget by referencing the widget\u2019s id. Allows users to click on the label to activate the corresponding widget
<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n- INPUT
<input type=\u201cemail, text, password\"><\/code>\n\n- Text input: basic single-line text field, accepts any kind of text input.<\/li>\n\n\n\n
- Email input: single-line text field, only accepts email addresses.<\/li>\n\n\n\n
- Password input: single-line text field<\/li>\n\n\n\n
- Search input: similar to text field but is usually rendered with different style and values can be saved to autofill across multiple pages<\/li>\n\n\n\n
<textarea><\/code> text box larger than 1 line, different from normal text input because it can be adjusted to be larger and instead of using a value attribute, the text between the opening and closing tags is the default value\n\n- cols attribute= width of the text control<\/li>\n\n\n\n
- rows attribute= # of text lines<\/li>\n\n\n\n
- wrap attribute= (hard\/soft) indicates how the control wraps text<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n
<fieldset><\/code> element: way to group widgets that share the same purpose, styling and semantic purposes<\/li>\n\n\n\n<legend><\/code> element: formally describes the purpose of the <fieldset><\/code> and acts as a label, inside of the <fieldset><\/code> element<\/li>\n<\/ol>\n\n\n\n\n- FORM ATTRIBUTES\n
\n- Autofocus: specification to the element that should automatically have input focus when the page loads<\/li>\n\n\n\n
- Disabled: prevents the user from interacting with the element<\/li>\n\n\n\n
- Required: required fields are followed by
<abbr title=\"required\">*<\/abbr><\/code> so that the user sees the star character (*) and knows it\u2019s required, cannot be submitted without being completed<\/li>\n\n\n\n- Name: name of the element, submitted with the form data<\/li>\n\n\n\n
- Values: the element\u2019s initial value<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- DROPDOWN CONTENT\n
\n- Autocomplete: suggested, automatically-completed values<\/li>\n\n\n\n
- Checkable Items: check box & radio buttons, values only sent only if they are checked<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- ADVANCED FORM WIDGETS\n
\n- Placeholder: this is the text that appears inside the text input box before something is entered by the user<\/li>\n\n\n\n
- Sliders: a way to pick a number by using a slider, used when the exact valie isn\u2019t necessarily important,
<input type=\u201drange\u201d min=\u201d0\u201d max=\u201d500\u201d><\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n- DATE & TIME PICKER\n
\n- Created using the
<input><\/code> element<\/li>\n\n\n\n- Specify using the
type=<\/code> attribute\n\n\u201cdatetime-local\u201d<\/code> widget that displays a date with time (no time zone info)<\/li>\n\n\n\n\u201cmonth\u201d<\/code> widget that displays a month with a year<\/li>\n\n\n\n\u201ctime\"<\/code> widget that displays an hours and minute, optionally seconds<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n- COLOR PICKERS\n
\n- Created using the <input> element<\/li>\n\n\n\n
- Set the type attribute to \u201dcolor\u201d<\/li>\n\n\n\n
- Warning! color widget support is currently not good.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- FILE PICKER\n
\n- Widget that allows the user to choose 1+ files to send<\/li>\n\n\n\n
- Create using the
<input><\/code> element<\/li>\n\n\n\n- Specify its type attribute set to \u201cfile\u201d<\/li>\n\n\n\n
- Accept attribute constrains the types of files that are accepted\n
\n\u201cimage\/*\u201d<\/code> for images<\/li>\n\n\n\n\u201cfile\/*<\/code> for doc files<\/li>\n<\/ol>\n<\/li>\n\n\n\n- including the multiple attribute allows the user to pick more than one file<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
\n- HIDDEN CONTENT\n
\n- convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user<\/li>\n\n\n\n
- create using the
<input><\/code> element<\/li>\n\n\n\n- specify its type attribute to \u201chidden\u201d<\/li>\n\n\n\n
- required to set it\u2019s name and value attributes, ex:
name=\"timestamp\u201d value=\u201dthe hidden data you want to include when the form\u2019s submitted\u201d<\/code><\/li>\n\n\n\n- Note: do not rely on hidden inputs as a form of security, the page\u2019s content is still visible using the browser\u2019s developer tools<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- IMAGE BUTTON\n
\n- an image where when the user clicks on it, it behaves like a submit button<\/li>\n\n\n\n
- created using the
<input><\/code> element<\/li>\n\n\n\n- specify its type attribute to
type=\u201cimage\u201d<\/code><\/li>\n\n\n\n- If the image is used to submit the form, it submits the x & y coordinates of the click relative to the image<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
DOCUMENT & WEBSITE STRUCTURE Your documents different sections should be marked up according to their content and their functionality SEO (Search Engine Optimization): a page\u2019s search ranking can be affected by the use and content of certain tags including <br> and <hr> tags. These tags control readability of a site, which plays a part in … Continue reading Course Notes: More HTML<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3682,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3720","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/comments?post=3720"}],"version-history":[{"count":8,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3720\/revisions"}],"predecessor-version":[{"id":4074,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3720\/revisions\/4074"}],"up":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3682"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/media?parent=3720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}