ISP465 Topic 3 HTML Structure Part II PDF

ISP465: Introduction to Front End Web Development HTML STRUCTURE PART II  OUTLINES HTML Semantics HTML Tags, Block Tags, Inline Tags HTML Class and HTML ID Forms HTML SEMANTICS A semantic element clearly describes its meaning to both the browser and the developer....

ISP465: Introduction to Front End Web Development HTML STRUCTURE PART II  OUTLINES HTML Semantics HTML Tags, Block Tags, Inline Tags HTML Class and HTML ID Forms HTML SEMANTICS A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: and - Tells nothing about its content. Examples of semantic elements: , , and - Clearly defines its content. The most common and important semantic elements into four categories: Document structure tags Textual meaning tags Media type tags Correlation tags SEMANTIC ELEMENT CATEGORIES Document Textual Correlation Media Type Structure Meaning Tags -  & The HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements. Although this element is named a , it is not required to be used at the top of the page and can be used in other subsection components such as and. Note: You can have several elements in one HTML document. However, cannot be placed within a , or another element. The HTML element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data, or links to related documents. Typically, only one element is included at the bottom of the document, but we can include one for each or element as long as it does not descend from another or element. Note: You can have several elements in one document.  The HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes. Note: NOT all links of a document should be inside a element. The element is intended only for major block of navigation links. Unless the navigation is exclusive to that page, it should not be placed inside main. The reason for this restriction is because main elements should be unique to each page, whereas headers and footers are often shared throughout similar pages.  The HTML element represents the dominant content of the of a document. The main content area consists of content that is directly related to or expands upon the central topic of a d The content inside the element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms. Note: There must not be more than one element in a document. The element must NOT be a descendant of an , , , , or element.  vs The HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions. The element defines section in a document. A begins a new "sectioning content" region, so it can have its own and/or. The HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). The element specifies independent, self- contained content. Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user- submitted comment, an interactive widget or gadget, or any other independent item of content.  The HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call- out boxes. We can discover content in a sidebar on many websites, which is shown using the aside tag. HTML SEMANTIC EXAMPLES HTML SEMANTIC REAL EXAMPLE: TWITTER HTML SEMANTIC REAL EXAMPLE: DEV.TO SEMANTIC RULE OF THUMB If the contents of the element represent a standalone, atomic unit of content that makes sense syndicated as a standalone piece (e.g. a blog post or blog comment, or a newspaper article), the element would be a better choice. If the contents represent useful tangential information that works alongside the main content, but is not directly part of it (like related links, or an author bio), use an. If the contents represent the main content area of a document, use. If you are only using the element as a styling wrapper, use a. A rule of thumb is that a should logically appear in the outline of a document. WHY HTML SEMANTICS? Searchability Search engines will consider its contents as important keywords to influence the page's search rankings. Accessibility Screen readers can use it as a signpost to help visually impaired users navigate a page. Interoperability Finding blocks of meaningful code is significantly easier than searching through endless with or without semantic or namespaced classes. Help other programmers understand the structure of your webpage Maintainability Suggests to the developer the type of data that will be populated. Semantic naming mirrors proper custom element/component naming.  HTML TAGS: BLOCK TAGS, INLINE TAGS HTML tags HTML tag (either opening or closing) is used to mark the start or end of an element. HTML element is the collection of start tag, its attributes, an end tag Syntax of HTML element Not all elements require the end tag or closing tag to be present. These are referred as empty elements, self-closing elements or void elements HTML elements specifically divided into 3 subcategories: block level elements (block tags) inline level elements (inline tags) empty elements Syntax of empty element Example of Block Example of Inline Example of Empty Elements Elements Elements , , , , , , , , , , , , - , , , , , , , , , , , , , , , , , , , BLOCK LEVEL ELEMENTS A block-level element is an HTML element that takes up the full width of the element that contains it. Block-level elements take up all of the width available to them, as a result, they stack on top of each other, rather than lining up.  INLINE LEVEL ELEMENTS An inline element is an HTML element that only takes up the width that its content takes up. Inline block elements will only take up as much space as their content requires. As a result, they have enough space to form a single line and will not switch to a new line until they run out of space. Because of this behaviour, inline elements are well-suited to being used inside of block-level elements. IINLINE ELEMENTS VS BLOCK ELEMENTS Inline elements can begin within a line of the HTML Blocks cannot begin withina line of the HTML element Inline elements: Block elements: element and it never starts a new line for the HTML. and it always start the new line of the HTML. The width is define only till the tags of inline extends. The width is more than inline and is extended till the Inline elements can break among the lines. parent elements extends. Inline elements can be nested between block and inline Block elements cannot break among the lines. elements. Block elements cannot be nested between inline and Inline elements the content is filled and expanded both block elements. horizontally and vertically - the space allocated to inline Block elements expanded to fill the width of the elements are fully occupied. container vertically though it does not have any data Border and padding is accepted in inline elements. within the elements. Do not allow any line breaks in between elements. Block elements accepts only width, margins, border, height and padding. Inline elements accept only left and right margins - NOT top and bottom margin. Line break are formed in between the elements and files occupy maximum space allocated. Width and heights are not considered in inline elements. Block elements accept all the margins - left, right, top, bottom. Width and heights are considered and they expanded in terms of width, height and borders mainly. HTML DIV The element is a block-level element used almost exclusively to group other elements. The element's purpose becomes much clearer in CSS and JavaScript. By grouping items together, the element enables you to modify only specific areas of your webpage when you want to change their appearance or behaviour. HTML SPAN The element functions much like the element, but for inline elements, rather than block-level. HTML ID ATTRIBUTE The id attribute is a unique identifier which is used to specify the document. It is used by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id attribute is written using # symbol followed by id. You cannot have more than one element with the same id in an HTML document. HTML CLASS ATTRIBUTE The class attribute is used to specify one or more class names for an HTML element. The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. The class name in CSS stylesheet using “.” symbol. HTML FORM Web forms are one of the main points of interaction between a user and a web site or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage or used on the client-side to immediately update the interface in some way. A web form's HTML is made up of one or more form controls (sometimes called widgets), plus some additional elements to help structure the overall form — they are often referred to as HTML forms. The controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the element, although there are some other elements to learn about too. Form controls can also be programmed to enforce specific formats or values to be entered (form validation), and paired with text labels that describe their purpose to both sighted and blind users.  The element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. The attribute is used to specify the data that is passed to and from the form. action: the action attribute defines the location (URL) where the form's collected data should be sent when it is submitted. method: the method attribute defines which HTTP method to send the data with (usually get or post). COMMON ELEMENTS REQUIRED TO DESIGN A FORM : is used to create an HTML form for user input. : is used to group related elements in a form. : defines a caption for the element. : defines a label for input collected by the elements. The for attribute of must be equal to the id attribute of the related element to bind them together. A label can also be bound to an element by placing the element inside the element. : specifies an input field where the user can enter data. It is the most important form element.  1 1 2 3 2 3 4 4  option & option Select input element presents options for the users from which they need to select one of them. With Select, users may have to scan a long list for selecting one of the values Datalist presents a list of suggested values to the associated input form (text) field and users are free to select one of those suggested values or type in their own value. With Datalist, the values are provided as hints and users isn't bound to those values. They are allows to key-in their own inputs.  option & option 1 2 1 2 DATE, DATETIME-LOCAL, TIME 1 1 2 2 3 4 3 4  CHECKBOX & RADIO BUTTON 1 Radio buttons let a user select ONLY ONE of a limited number of choices. Checkboxes let a user select ZERO or MORE options of a limited number of choices 2 1 2  EMAIL, PASSWORD, BUTTON 1 1 2 2 3 4 3 4 INPUT RESTRICTION REQUIRED, PLACEHOLDER ATTRIBUTE Required attribute specifies that an input field is required (must be filled out). Used * to show required field. The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). RULE OF THUMB Before you begin writing the code, it's always a good idea to take a step back and consider your form. Creating a quick mockup will assist you in defining the correct set of data to request from your user. From a user experience (UX) perspective, it's critical to remember that the larger your form, the more likely you are to frustrate users and lose them. Keep it simple and focused: request only the information you absolutely require. THANK YOU