Having a basic understanding of the HTML language, we should know that HTML pages are divided into two parts: the header and the body. The header includes information about the page itself, such as its title and language. The body of the page includes all its content, such as text paragraphs and images.
The body contains everything the user sees on their screen, and the header (called head in English) contains everything that is not seen (with the sole exception of the page title, which browsers display as their window title).
Rules:
- Tags must be closed in the order they are opened.
- Tag and attribute names are always written in lowercase.
- Attribute values are always enclosed in quotes.
- Attributes cannot be compressed.
- All tags must always be closed
The <br> tag, for example, is used to indicate the start of a new line, as will be seen later. Due to its characteristics, the <br> tag never encloses any text content.
Instead of opening and closing the tag consecutively (<br></br>), you can use the <br/> syntax to indicate that it is an empty tag that opens and closes at that same point.
Furthermore, in XHTML...
- Before accessing an attribute value, all whitespace characters before and after the value are removed. Furthermore, all extra whitespace characters inside an attribute value are removed. In other words, if multiple consecutive whitespace characters are included inside an attribute, all except a single space character used to separate different words are removed.
- When talking about the
<script>tag, JavaScript code must be enclosed within special tags ( <![CDATA[ and ]]> ) to prevent the browser from misinterpreting characters like & and < .
- XHTML pages must dispense with the name attribute to uniquely identify elements. Instead, the id attribute must always be used. In fact, in version 1.0 of the XHTML standard, the name attribute has been deprecated for the a, applet, form, frame, iframe, img, and map tags.
Concepts
<html>
: indicates the beginning and the end of an HTML document
<head>
: delimits the header part of the document.
<body>
: delimits the body of the HTML document.
The inline elements defined by HTML are: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.
The block elements defined by HTML are: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-cript, ol, p, pre, table, ul.
The following elements are also considered block elements: dd, dt, frame-set, li, tbody, td, tfoot, th, thead, tr.
The following elements can be inline or block depending on the circumstances: button, del, iframe, ins, map, object, script.
Basic attributes
- id=”text” : Sets a unique identifier for each element within an HTML page
- : Sets the CSS class applied to the element's styles.
- style=”text” : Sets the CSS styles of an element directly.
- title="text" : Sets the title of an element (improves accessibility and browsers display it when the user hovers over the element)
Internationalization attributes
- lang = "language code" : Indicates the element's language using a predefined code.
- xml:lang = "language code" : Indicates the element's language using a predefined code
- dir : Indicates text direction (useful for languages written from right to left)
Event attributes
- Onblur: Deselect text.
- Onchange: Deselect an element that has been modified.
- Onclick: Click and release the mouse.
- Ondblclick: Double-click with the mouse.
- Onfocus: Select an element.
- Onkeydown: Press a key (without releasing).
- Onkeypress: Press a key.
- Onkeyup: Release a pressed key.
- Onload: The page has completely loaded.
- Onmousedown: Press (without releasing) a mouse button.
- Onmouseout: The mouse "leaves" the element (passes over another element).
- Onmouseover: The mouse "enters" the element (passes over the element).
- Onmouseup: Release the mouse button that was pressed.
- Onreset: Reset the form (clear all its data).
- Onresize: The browser window size has been changed.
- Onselect: Select text.
- Onsubmit: Submit the form.
- Onunload: The page is left (for example when closing the browser).
Focus attributes:
- accesskey = "letter" : Sets a shortcut key for an HTML element
- tabindex = "number" : Sets the position of the element in the page's tabbing order. Its value must be between 0 and 32,767
- onfocus, onblur : Control the JavaScript events executed when the element gains or loses focus
Elements:
| Element | Definition | Common attributes | Element types | Own attributes |
|---|---|---|---|---|
<p> | Delimits the content of a text paragraph | Basic, internationalization, and events | Block | - |
<h1> ... <h6> | Defines the titles of the most important sections of the page. | Defines the titles of the most important sections of the page | Block | - |
<em> | Emphasizes the importance of the enclosed text (italics) | Basic, internationalization, and events | Inline | - |
<strong> | Emphasizes with maximum importance the enclosed text (bold) | Basic, internationalization, and events | Inline | - |
<ins> | Used to mark a modification in the original content consisting of inserting new content | Basic, internationalization, and events | Block and inline | cite = "url" → Indicates the URL of the page where more information can be obtained. datetime = "date" → Specifies the date and time the change was made |
<del> | Used to mark a modification in the original content consisting of deleting certain content | Basic, internationalization, and events | Block and inline | - cite = "url" - datetime = "date" |
<blockquote> | Used to indicate that the enclosed text is a verbatim quotation from another external text | Basic, internationalization, and events | Block | - cite = "url" |
<abbr> | Used to mark abbreviations in the text and provide their meaning | Basic, internationalization, and events | Inline | - title = "text" Indicates the full meaning of the abbreviation |
<acronym> | Used to mark acronyms in the text and provide their meaning | Basic, internationalization, and events | Inline | - title = "text" |
<dfn> | Used to mark definitions of certain terms and provide their meaning | Basic, internationalization, and events | Inline | - Title = "text" |
<cite> | Used to mark a citation or reference to other sources | Basic, internationalization, and events | Inline | - |
<br> or (<br />) | Forces the browser to insert a new line | Basic | Inline and empty tag | - |
<pre> | Displays the enclosed text exactly as written (respecting whitespace) | Basic, internationalization, and events | Block | - |
<code> | Delimits text considered a source code snippet | Basic, internationalization, and events | Inline | - |
<a> | Used to link all types of resources | Basic, internationalization, events, and focus | Inline | - name = "text" - href = "url" - hreflang = "language_code" - type = "content_type" - rel = "relation_type" - rev = "relation_type" - charset = "charset_type" |
<script> | Used to link or define a code block (usually JavaScript) | - | Block and inline (can also be an empty tag) | - src = "url" - type = "content_type" - defer = "defer" - charset = "charset_type" |
<link> | Used to link and establish relationships between the document and other resources | Basic, internationalization, and events | Empty tag | - charset, href, hreflang, type, rel, and rev - media = "media_type" |
<ul> | Used to define unordered lists | Basic, internationalization, and events | Block | - |
<li> | Used to define list items (ordered and unordered) | Basic, internationalization, and events | Block | - |
<ol> | Used to define ordered lists | Basic, internationalization, and events | Block | - |
<dl> | Used to define definition lists | Basic, internationalization, and events | Block | - |
<dt> | Used to define terms for definition list items | Basic, internationalization, and events | Block | - |
<dd> | Used to indicate definitions of definition list items | Basic, internationalization, and events | Block | - |
<img> | Used to include images in documents | Basic, internationalization, and events | Inline and empty tag | - src = "url" - alt = "text" - longdesc = "url" - name = "text" - height = "unit_of_measure" - width = "unit_of_measure" |
<map> | Used to define image maps | Basic, internationalization, and events | Block and inline | - name = "text" |
<area> | Used to define the different areas that make up an image map | Basic, internationalization, events, and focus | Empty tag | - href = "url" - nohref = "nohref" - shape = "default | rect | circle | poly" - coords = "list of numbers" |
<object> | Used to embed objects in documents | Basic, internationalization, and events | Block and inline | - data = "url" - classid, codebase, codetype - type - height = "unit_of_measure" - width = "unit_of_measure" |
<param> | Used to specify parameter values for the object | id | Empty tag | - name = "text" - value = "text" |
<embed> | Used to embed objects in documents | Basic, internationalization, and events | Block | - src = "url" - type = "content_type" - height = "unit_of_measure" - width = "unit_of_measure" |
<table> | Used to define data tables | Basic, internationalization, and events | Block | - summary = "text" |
<tr> | Used to define each row in data tables | Basic, internationalization, and events | Block | - |
<td> | Used to define each cell forming table rows, i.e., table columns | Basic, internationalization, and events | Block | - abbr = "text" - headers = "id_list" - scope = "col, row, colgroup, rowgroup" - colspan = "number" - rowspan = "number" |
<th> | Used to define header cells for a row or column in a table | Basic, internationalization, and events | Block | - abbr = "text" - headers = "id_list" - scope = "col, row, colgroup, rowgroup" - colspan = "number" - rowspan = "number" |
<caption> | Used to define the caption or title of a table | Basic, internationalization, and events | Inline | - |
<thead> <tbody> <tfoot> | Used to group multiple rows into a header (thead), footer (tfoot), or section (tbody) of a table | Basic, internationalization, and events | Block | - |
<form> | Used to insert a form on the page | Basic, internationalization, and events | Block | - action = "url" - method = "POST or GET" - enctype = "application/x-www-form-urlencoded or multipart/form-data" - accept = "content_type" - Others: accept-charset, onsubmit, onreset |
<input> | Used to insert a control into a form | Basic, internationalization, events, and focus | Inline and empty tag | - type = "type" - name = "text" - value = "text" - Initial control value - size = "unit_of_measure" - maxlength = "number" - checked = "checked" - disabled = "disabled" - readonly = "readonly" - src = "url" - alt = "text" |
<fieldset> | Used to logically group multiple form fields | Basic, internationalization, and events | Block | - |
<legend> | Used to define the title or legend for a set of form fields grouped with the fieldset tag | Basic, internationalization, and events | Inline | - |
<label> | Used to define the title or legend of fields defined in a form | Basic, internationalization, and events | Inline | - for = "element_id" - Indicates the ID of the form field for which this element serves as title - Others: accesskey, onfocus, and onblur |
<textarea> | Used to include a text area in a form | Basic, internationalization, events, and focus | Inline | - rows = "number" - cols = "number" - Others: name, disabled, readonly, onselect, onchange, onfocus, onblur |
<select> | Used to include a drop-down list in a form | Basic, internationalization, and events | Inline | - size = "number" - multiple = "multiple" - Others: name, disabled, onchange, onfocus, onblur |
<option> | Used to define each element in a drop-down list | Basic, internationalization, and events | - | - selected = "selected" - value = "text" - Others: label, disabled |
<optgroup> | Used to define a logical grouping of options in a drop-down list | Basic, internationalization, and events | - | - label = "text" - Others: disabled, selected |
<div> | Groups block elements | Basic, internationalization, and events | Block | - |
<head> | Defines the HTML document header | Internationalization | </td> <td width="26%"> - profile = "url" - lang = "language_code" | |
<title> | Defines the HTML document title | Internationalization | </td> <td width="26%"> - lang = "language_code" | |
<meta> | Allows defining the value of metadata that makes up the document metainformation | Internationalization | </td> <td width="26%"> - name = "text" - content = "text" - http-equiv = "text" - scheme = "text" | |
<noscript> | Defines an alternative message displayed to the user when their browser does not support script execution | Basic, internationalization, and events | Block | |
<iframe> | Used to include a frame on the page displaying another HTML document | Basic | Block and inline | ```xml |
src = "url"
height = "longitud"
width = "longitud"
name = "texto"
longdesc = "url"
scrolling = "yes | no | auto"
`` |
| <address> | Defines contact information for a document | Basic, internationalization, and events | Block | - |
|
` | Allows inserting a horizontal dividing line | Basic, internationalization, and events | Block | - |
Special characters:
| Entity | Character | Description |
|---|---|---|
| < | < | less-than sign |
| > | > | greater-than sign |
| & | & | ampersand |
| " | " | double quotes |
| | (whitespace) | whitespace |
| ' | ' | apostrophe |
The complete list can be found here.
TAGS:
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame,frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var.
DEPRECATED TAGS
Of all available tags, the following are considered deprecated and cannot be used:
applet, basefont, center, dir, font, isindex, menu, s, strike, u.
If you detect any errors, feel free to comment.