2. Basic Structures of HTML
<!DOCTYPE>
â—¦ tells the web browser which version of HTML the page is written in
â—¦ The <!DOCTYPE> declaration is NOT case sensitive.
<html>
â—¦ root element and it defines the whole HTML document
<head>
◦ The <head> element surrounds all the special “behind the scenes” elements of a web document. Most of these
elements do not get displayed directly on the web page.
<title>
◦ defines what text will show in the web browser’s title bar:
<body>
â—¦ The <body> element surrounds all the actual content (text, images, videos, links, etc.) that will be displayed on our web
page.
3. Tag, Element & Attribute
HTML tags are what defines where an HTML element starts and where it ends.
HTML attribute is what modifies an HTML element. It is usually in the form of unique words that
one inserts inside the opening tag. They control the behavior of the element that follows.
4. Block-level & Inline Elements
Block-level elements
<div>, <p>, <h1> - <h6>, <form>, <ol>, <ul> and <li>, e.t.c.
other elements will be pushed in new line
Inline elements
<img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input> and <button>
5. File Paths
File paths are used when linking to external files, like:
â—¦ Web pages
â—¦ Images
â—¦ Style sheets
â—¦ JavaScripts
Types of file paths
â—¦ Absolute file paths
â—¦ url
â—¦ Relative file paths
7. Lists
Unordered list
â—¦ Item 1
â—¦ Item 2
â—¦ Item 3
Ordered list
1. Item 1
2. Item 2
3. Item 3
Other list
Description list term
– Description list description
10. Class and Id Attribute
Class and Id can both be used to point in a stylesheet. They are also can be used by javascript to
access and manipulate elements.
Difference between Class and ID
â—¦ Classes can be reused and repeated multiple time while Id must always be unique in a page
â—¦ Id can be used for bookmarking and link while classes cannot
12. Layout Elements
<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element
13. Forms
- An HTML form is used to collect user input
- The <form> element is a container for different types of input elements
- The <label> tag defines a label for many form elements.
14. The HTML <form> Elements
<form> - Defines an HTML form for user input
<input> - Defines an input control
<textarea> - Defines a multiline input control (text area)
<label> - Defines a label for an <input> element
<fieldset> - Groups related elements in a form
<legend> - Defines a caption for a <fieldset> element
<select> - Defines a drop-down list
<optgroup> - Defines a group of related options in a drop-down list
<option> - Defines an option in a drop-down list
<button> - Defines a clickable button
<datalist> - Specifies a list of pre-defined options for input controls
15. Input type
button - A push button with no default behavior displaying the value of the value attribute,
empty by default.
checkbox - A check box allowing single values to be selected/deselected.
color - A control for specifying a color; opening a color picker when active in supporting
browsers.
date - A control for entering a date (year, month, and day, with no time). Opens a date picker or
numeric wheels for year, month, day when active in supporting browsers.
datetime-local - A control for entering a date and time, with no time zone. Opens a date picker
or numeric wheels for date- and time-components when active in supporting browsers.
email - A field for editing an email address. Looks like a text input, but has validation parameters
and relevant keyboard in supporting browsers and devices with dynamic keyboards.
16. file - A control that lets the user select a file. Use the accept attribute to define the types of files that the
control can select.
hidden - A control that is not displayed but whose value is submitted to the server. There is an example in the
next column, but it's hidden!
image - A graphical submit button. Displays an image defined by the src attribute. The alt attribute displays if
the image src is missing.
month - A control for entering a month and year, with no time zone.
number - A control for entering a number. Displays a spinner and adds default validation. Displays a numeric
keypad in some devices with dynamic keypads.
password - A single-line text field whose value is obscured. Will alert user if site is not secure.
radio - A radio button, allowing a single value to be selected out of multiple choices with the same name
value.
range - A control for entering a number whose exact value is not important. Displays as a range widget
defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values.
17. reset - A button that resets the contents of the form to default values. Not recommended.
search - A single-line text field for entering search strings. Line-breaks are automatically removed from the
input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a
search icon instead of enter key on some devices with dynamic keypads.
submit - A button that submits the form.
tel - A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic
keypads.
text - The default value. A single-line text field. Line-breaks are automatically removed from the input value.
time - A control for entering a time value with no time zone.
url - A field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard
in supporting browsers and devices with dynamic keyboards.
week - A control for entering a date consisting of a week-year number and a week number with no time
zone.
