Common Tags & Elements
| Format | Name | Description |
|---|---|---|
| <body> | Body Element | This element represents the content of an HTML document. Content inside these tags are rendered on the web browsers. There can be only one in a document. |
| <h1> - <h6> | Heading Elements | HTML can use six different levels of heading elements. Starting at the largest, '<h1>', and ending at the smallest, '<h6>'. |
| <div> | Div Element | Short for "division," this element is used as a container that divides an HTML document into sections. |
| <p> | Paragraph Element | The paragraph element contains and displays a block of text. |
| <span> | Span Element | The span element is a generic inline container for text and can be used to group text for styling purposes. |
| <em> | Emphasis Element | The emphasis element emphasizes text and browsers will usually italicize text by default. |
| <strong> | Strong Element | The strong element highlights important, serious, or urgent text and browsers will normally render this highlighted text in bold by default. |
| <br> | Line Break Element | The line break element will create a line break in text and must not have a closing tag. |
| <hr> | Horizontal Rule Element | Short for "horizontal rule," this element is used to insert a thematic break in an HTML page to divide or separate document sections. |
| <ul> | Unordered List Element | The unordered list element is used to create a list of items in no particular order. List item will have a bullet point by default. |
| <ol> | Ordered List Element | The ordered list element creates a list of items in sequential order. List item appears numbered by default. |
| <li> | List Item Element | The list item element creates list items in the '<ul>' and '<ol>' elements. |
| <a> | Anchor Element | The anchor element creates hyperlinks. The hyperlinks can point to other webpages, files on the same server, a location on the same page, or any other URL via the hyperlink reference attribute, '<href>'. |
| <href> | Hyperlink Reference Attribute | Short for "hyperlink reference," this attribute determines the location the anchor element points to. |
| <target> | Target Attribute | The target attribute on an anchor element specifies where a hyperlink should be opened. A target value of "_blank" will render a new tab in modern browsers, or in a new window, depending on browser settings. |
| Relative File Paths | A relative file path links to a local file in the same folder or on the same server, for example: ./style.css. Relative file paths begin with ./ followed by a path to the local file. | |
| HTML Comments | In HTML, comments can be added between an opening <!-- and closing -->. Content inside of comments will not be rendered by browsers, and are usually used to describe a part of code or provide other details. Comments can span single or multiple lines. | |
Semantic Tags
Semantic HTML introduces meaning to the code we write.
| Format | Name | Description |
|---|---|---|
| <article> | Article Element | The '<article>'element specifies independent, self-contained content. An article should make sense on its own, and it should be possible to read it independently from the rest of the web site. |
| <aside> | Aside Element | The '<aside>' element defines some content aside from the content it is placed in (like a sidebar). The '<aside>' content should be related to the surrounding content. |
| <details> | Detail Element | The '<details>' tag specifies additional details that the user can open and close on demand. The '<details>' tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within. Any sort of content can be put inside the '<details>' tag. |
| <figcaption> | Figure Caption Element | The '<figcaption>' element defines a caption for a '<figure>' element. |
| <figure> | Figure Element | The '<figure>' element is used to encapsulate media such as an image, diagram, or code snippet. |
| <footer> | Footer Element | The '<footer>' element defines a footer for a document or section. A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc. You may have several '<footer>' elements in one document. |
| <main> | Main Element | The '<main>' element specifies the main content of a document. The content inside the '<main>' 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. |
| <mark> | Mark Element | The '<mark>' element defines marked or highlighted text. |
| <nav> | Navigation Element | The '<nav>' element defines a set of navigation links. |
| <section> | Section Element | The '<section>' defines elements in a document, such as chapters, headings, or any other area of the document with the same theme. A home page could normally be split into sections for introduction, content, and contact information. |
| <summary> | Summary Element | The '<summary>' element defines a visible heading for the '<details>' element. The heading can be clicked to view/hide the details. |
| <time> | Time Element | The '<time>' element defines a specific time (or datetime). |
Note: Definitions don't decide how to nest the '<section>' and '<article>' elements. You will find HTML pages with '<section>' elements containing '<article>' elements, and '<article>' elements containing '<section>' elements. You will also find pages with '<section>' elements containing '<section>' elements, and '<article>' elements containing '<article>' elements.
Note: There must not be more than one '<main>' element in a document. The '<main>' element must NOT be a descendant of an '<article>', '<aside>', '<footer>', '<header>', or '<nav>' element.
Note: NOT all links of a document should be inside a '<nav>' element. The '<nav>' element is intended only for major block of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
Note: The '<summary>' element should be the first child element of the '<details>' element.
Note: The time element does not render as anything special in any of the major browsers.
Table Elements
HTML tables allow web developers to arrange data into rows and columns.
| Format | Name | Description |
|---|---|---|
| <table> | Table Element | In HTML, the table element has content that is used to represent a two-dimensional table made of rows and columns. |
| <tr> | Table Row Element | The table row element is used to add rows to a table before adding table data and table headings. |
| <td> | Table Data Element | The table data element can be nested inside a table row element to add a cell of data to a table. |
| <tbody> | Table Body Element | The table body element is a semantic element that will contain all table data other than table heading and table footer content. If used, tbody will contain all table row elements, and indicates that '<tr>' elements make up the body of the table. '<table>' cannot have both '<tbody>' and '<tr>' as direct children. |
| <thead> | Table Head Element | The table head element defines the headings of table columns encapsulated in table rows. |
| <tfoot> | Table Footer Element | The table footer element uses table rows to give footer content or to summarize content at the end of a table. |
| <th> | Table Heading Element | The table heading element is used to add titles to rows and columns of a table and must be enclosed in a table row element. |
| colspan Attribute | This attribute on a table header or table data element indicates how many columns that particular cell should span within the table. The colspan value is set to 1 by default and will take any positive integer between 1 and 1000. | |
| rowspan Attribute | Similar to colspan , the rowspan attribute on a table header or table data element indicates how many rows that particular cell should span within the table. The rowspan value is set to 1 by default and will take any positive integer up to 65534. | |
Form Elements
An HTML form is used to collect user input. The user input can then be sent to a server for processing.
| Tag Name | Description |
|---|---|
| <form> Element | The HTML form element is used to collect and send information to an external source. '<form>' can contain various input elements. When a user submits the form, information in these input elements is passed to the source which is named in the 'action' attribute of the form. |
| Submitting a Form | Once we have collected information in a form we can send that information somewhere else by using the 'action' and 'method' attribute. The 'action' attribute tells the form to send the information. A URL is assigned that determines the recipient of the information. The 'method' attribute tells the form what to do with that information once it’s sent. An HTTP verb is assigned to the 'method' attribute that determines the action to be performed. |
| <input> Element | The HTML '<input>' element is used to render a variety of input fields on a webpage including text fields, checkboxes, buttons, etc. '<input>' element have a 'type' attribute that determines how it gets rendered to a page. The example code block will create a text input field and a checkbox input field on a webpage. |
| <label> Element | The HTML '<label>' element provides identification for a specific '<input>' based on matching values of the '<input>' 'id' attribute and the '<label>'s 'for' attribute. By default, clicking on the '<label>' will focus the field of the related '<input>'. |
| <input> name Attribute | In order for a form to send data, it needs to be able to put it into key-value pairs. This is achieved by setting the 'name' attribute of the <input> element. The 'name' will become the 'key' and the 'value' of the input will become the 'value' the form submits corresponding to the key. It’s important to remember that the name is not the same as the ID in terms of form submission. The ID and the name of the input may be the same, but the value will only be submitted if the 'name' attribute is specified. |
| <input>: Text Type | The HTML '<input>' elements can support text input by setting the attribute type="text". This renders a single row input field that users can type text inside. The value of the '<input>’s' 'name' and 'value' attribute of the element are sent as a key-value pair when the form is submitted. |
| <input>: Email Type | The input type="email" is used for input fields that should contain an e-mail address. Depending on browser support, the e-mail address can be automatically validated when submitted. Some smartphones recognize the email type, and add ".com" to the keyboard to match email input. |
| <input>: Password Type | The HTML <input> element can have the attribute type="password" that renders a single row input field which allows the user to type censored text inside the field. It is used to type in sensitive information. The value of this '<input>’s' 'name' and 'value' (actual value and not the censored version) attribute of this element are sent as a key-value pair when the form is submitted. |
| <input>: Number Type | These input fields allow the user to enter only numbers and a few special characters inside the field. When the input field is a part of a form, the form will receive a key-value pair with the format: 'name: value' after form submission. |
| <input>: Range Type | A slider can be created by using the type="range" attribute on an HTML input element. The range slider will act as a selector between a minimum and a maximum value. These values are set using the 'min' and 'max' attributes respectively. The slider can be adjusted to move in different steps or increments using the 'step' attribute. |
| <input>: Checkbox Type | When using an HTML 'input' element, the type="checkbox" attribute will render a single checkbox item. To create a group of checkboxes related to the same topic, they should all use the same 'name' attribute. Since it’s a checkbox, multiple checkboxes can be selected for the same topic. |
| <input>: Radio Button Type | HTML '<input>' elements can be given a type="radio" attribute that renders a single radio button. Multiple radio buttons of a related topic are given the same 'name' attribute value. Only a single option can be chosen from a group of radio buttons. The value of the selected/checked '<input>'s' 'name' and 'value' attribute of this element are sent as a key-value pair when the form is submitted. |
| <input>: Submit Type | HTML <input> elements can have a type attribute set to submit, by adding type="submit". With this attribute included, a submit button will be rendered and, by default, will submit the <form> and execute its action. The text of a submit button is set to Submit by default but can also be changed by modifying the value attribute. |
| <input>: Reset Type | This attribute defines a reset button which resets all form values to its initial values. |
| <input>: Color Type | The input type="color" is used for input fields that should contain a color. Depending on browser support, a color picker can show up in the input field. |
| <input>: File Type | The input type="file" defines a file-select field and a "Browse" button for file uploads. |
| <input>: Telephone Type | The input type="tel" is used for input fields that should contain a telephone number. |
| <select> Element | The HTML <select> element can be used to create a dropdown list. A list of choices for the dropdown list can be created using one or more <option> elements. By default, only one <option> can be selected at a time. The value of the selected <select>’s 'name' and the <option>’s 'value' attribute are sent as a key-value pair when the form is submitted. |
| <datalist> Element | When using an HTML input, a basic search/autocomplete functionality can be achieved by pairing an <input> with a <datalist>. To pair a <input> with a <datalist> the <input>’s list value must match the value of the id of the <datalist>. The datalist element is used to store a list of <option>'s. The list of data is shown as a dropdown on an input field when a user clicks on the input field. As the user starts typing, the list will be updated to show elements that best match what has been typed into the input field. The actual list items are specified as multiple option elements nested inside the datalist. datalist’s are ideal when providing users a list of pre-defined options, but to also allow them to write alternative inputs as well. |
| <textarea> Element | The textarea element is used when creating a text-box for multi-line input (e.g. a comment section). The element supports the rows and cols attributes which determine the height and width, respectively, of the element. When rendered by the browser, textarea fields can be stretched/shrunk in size by the user, but the rows and cols attributes determine the initial size. Unlike the input element, the <textarea> element has both opening and closing tags. The value of the element is the content in between these tags (much like a <p> element). |
| multiple Attribute | The input 'multiple' attribute specifies that the user is allowed to enter more than one value in an input field. The 'multiple' attribute works with the following input types: email, and file. |
| title Attribute | The 'title' attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. The 'title' attribute can be used on any HTML element. |
| placeholder Attribute | The input 'placeholder' attribute specifies short a hint that describes the expected value of an input field (a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value. The 'placeholder' attribute works with the following input types: text, search, url, tel, email, and password. |
| autofocus Attribute | The input 'autofocus' attribute specifies that an input field should automatically get focus when the page loads. |
| HTML Form Validators: HTML forms allow you to specify different kinds of validation for your input fields to make sure that data is entered correctly before being submitted. HTML supports a number of different validators, including things like minimum value, minimum/maximum length, etc. The validators are specified as attributes on the input field. | |
| required Attribute | In HTML, input fields have an attribute called 'required' which specifies that the field must include a value. |
| min Attribute | In HTML, input fields with type number have an attribute called 'min' that specifies the minimum value that can be entered into the field. |
| max Attribute | HTML <input>'s of type number have an attribute called 'max' that specifies the maximum value for the input field. |
| minlength Attribute | In HTML, an input field of type text has an attribute that supports minimum length validation. To check that the input text has a minimum length, add the 'minlength' attribute with the character count. |
| maxlength Attribute | In HTML, input fields with type text have an attribute called 'maxlength' that specifies the maximum number of characters that can be entered into the field. |
| pattern Attribute | The input 'pattern' attribute specifies a regular expression that the input field's value is checked against, when the form is submitted. The 'pattern' attribute works with the following input types: text, date, search, url, tel, email, and password. |
| readonly Attribute | The input 'readonly' attribute specifies that an input field is read-only. A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it). The value of a read-only input field will be sent when submitting the form! |
| disabled Attribute | The input 'disabled' attribute specifies that an input field should be disabled. A disabled input field is unusable and un-clickable. The value of a disabled input field will not be sent when submitting the form! |
Media Elements
| Format | Name | Description |
|---|---|---|
| <img> | Image Element | HTML image '<img>' elements embed images in documents. The src attribute contains the image URL and is mandatory. '<img>' is an empty element meaning it should not have a closing tag. |
| alt attribute | An '<img>' element can have alternative text via the alt attribute. The alternative text will be displayed if an image fails to render due to an incorrect URL, if the image format is not supported by the browser, if the image is blocked from being displayed, or if the image has not been received from the URL. The text will be read aloud if screen reading software is used and helps support visually impaired users by providing a text descriptor for the image content on a webpage. | |
| <video> | Video Element | The <video> element embeds a media player for video playback. The src attribute will contain the URL to the video. Adding the controls attribute will display video controls in the media player. |
| <audio> | Audio Element | The <audio> allows us to implement audio into our website. |
| <embed> | Embed Element | The <embed> can be used to implement any type of media. |
| <track> Tag | The <track> tag specifies text tracks for <audio> or <video> elements. | |
Note: The content inside the opening and closing tag is shown as a fallback in browsers that don’t support the element.
CSS Selectors
CSS, or Cascading Style Sheets, is a language that is used in combination with HTML that customizes how HTML elements will appear. CSS can define styles and change the layout and design of a sheet.
CSS code can be applied to an HTML file in three ways:
1. Directly added to HTML elements by using the 'style' attribute in the element’s opening tag. Each style declaration is ended with a semicolon. Styles added in this manner are known as inline styles.
2. Internal CSS: written in the actual HTML document by enclosing the code in '<style>' tags.
3. External CSS: written in its own files to keep it separate from the HTML code. The extension for CSS files is .css. These can be linked to an HTML file using a '<link>' tag in the '<head>' section.
It is common practice to separate content code in HTML files from styling code in CSS files. This can help make the code easier to maintain, by keeping the syntax for each file separate, and any changes to the content or styling can be made in their respective files.
| Selectors and Rules | Description |
|---|---|
| Selector Chaining | CSS selectors define the set of elements to which a CSS rule set applies. For instance, to select all <p> elements, the p selector can be used to create style rules. |
| CSS Type Selectors | CSS type selectors are used to match all elements of a given type or tag name. Unlike for HTML syntax, we do not include the angle brackets when using type selectors for tag names. When using type selectors, elements are matched regardless of their nesting level in the HTML. |
| CSS class selectors | The CSS class selector matches elements based on the contents of their 'class' attribute. CSS classes can be reusable and applied to many elements. To select elements with a specific 'class', write a period ('.') character, followed by the class name. |
| HTML attributes with multiple values: HTML attributes can have multiple attribute values. Multiple attribute values are separated by a space between each attribute. | |
| CSS ID selectors | The CSS ID selector matches elements based on the contents of their 'id' attribute. The values of a 'id' attribute should be unique in the entire DOM. To select an element with a specific 'id', write a hash ('#') character, followed by the id of the element. |
| Selector Specificity | Specificity is a ranking system that is used when there are multiple conflicting property values that point to the same element. When determining which rule to apply, the selector with the highest specificity wins out. The most specific selector type is the ID selector, followed by class selectors, followed by type selectors. |
| Chaining Selectors | CSS selectors can be chained so that rule sets apply only to elements that match all criteria. |
| CSS descendant selector | The CSS descendant selector combinator is used to match elements that are descended from another matched selector. They are denoted by a single space between each selector and the descended selector. All matching elements are selected regardless of the nesting level in the HTML. |
| !important Rule | The CSS !important rule is used on declarations to override any other declarations for a property and ignore selector specificity. !important rules will ensure that a specific declaration always applies to the matched elements. However, generally it is good to avoid using !important as bad practice. |
| Groups of CSS Selectors | Match multiple selectors to the same CSS rule, using a comma-separated list. |
| CSS declarations | In CSS, a declaration is the key-value pair of a CSS property and its value. CSS declarations are used to set style properties and construct rules to apply to individual or groups of elements. The property name and value are separated by a colon, and the entire declaration must be terminated by a semi-colon. |
| CSS Rule Sets | A CSS rule set contains one or more selectors and one or more declarations. The rule set is the main building block of a CSS sheet. |
Note: id names and class names cannot start with a number!
Common CSS Properties
| Style Name | Description |
|---|---|
| CSS Comments | Comments are used to explain the code, and may help when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment starts with /* and ends with */ . You can add comments wherever you want in the code. Comments can also span multiple lines. |
| Font Family | The font-family CSS property is used to specify the typeface in a rule set. Fonts must be available to the browser to display correctly, either on the computer or linked as a web font. If a font value is not available, browsers will display their default font. When using a multi-word font name, it is best practice to wrap them in quotes. |
| Font Size | The font-size CSS property is used to set text sizes. Font size values can be many different units or types such as pixels. |
| Font Weight | The font-weight CSS property can be used to set the weight (boldness) of text. The provided value can be a keyword such as bold or normal. |
| Text Align | The text-align CSS property can be used to set the text alignment of inline contents. This property can be set to these values: left , right , or center. |
| Foreground Text Color | Using the color property, foreground text color of an element can be set in CSS. The value can be a valid color name supported in CSS like green or blue . Also, 3 digit or 6 digit color code like #22f or #2a2aff can be used to set the color. |
| Color Name Keywords | Color name keywords can be used to set color property values for elements in CSS. |
| Background Color | The background-color CSS property controls the background color of elements. |
| Opacity | The opacity CSS property can be used to control the transparency of an element. The value of this property ranges from 0 (transparent) to 1 (opaque). |
| Background Image | The background-image CSS property sets the background image of an element. An image URL should be provided in the syntax url("moon.jpg") as the value of the property. |
| Resource URLs | In CSS, the url() function is used to wrap resource URLs. These can be applied to several properties such as the background-image. |