HTML
HTML (HyperText Markup Language) is a web language used to make web pages. HTML elements define the content of a web page. The tree of nested elements that make up a web page is called the Document Object Model.
An important property of elements is their display property. There are several ways an element could display on the page. This is often changed in CSS. Some possible values are:
- None - Does not display at all. Used to hide elements from CSS.
- Block - Will create a new line and expand horizontally as much as possible. Most block display elements cannot be nested, even if changed to inline with CSS. Elements such as span and div are considered grouping elements which can be nested. Setting display in CSS does not change this. (The HTML syntax is never altered by CSS.)
- Inline - Does not create a new line. Only takes as much space as needed and is part of the normal text flow.
- Flex - Makes the element a block-level flexible box (flexbox) container. A flexbox element will attempt to align and resize its contents across a set axis according to set parameters and proportions. The links at the top of this page are inside a flexbox container that aligns them horizontally with equal space between them. This property is set using CSS.
- Table, table-cell, table-column, table-row, etc. make the elements display as if they were in a table.
HTML elements, aside from their standard behaviour and CSS properties, have semantic meaning. The nav element, for example, is used for the navigation section (links to other pages). Even though this element is identical to a div in the browser, it is useful for other programs which are attempting to extract data from the web page, such as screen readers and search engines.
Most elements could be implemented using divs, spans, CSS and sometimes JavaScript, but it is better to use elements with the proper semantic meaning. Sometimes these elements have behaviour which cannot be completely replicated with JavaScript, but even when they don't it is important for code readability - if you see a "nav" element you immediately know what it is for, unlike a div with some CSS styling - and accessibility - screen readers often have to rely on semantic tags and the general structure of a web page to extract information from it. It is very hard for a program to parse a website which uses nonstandard "faked" elements, such as a div with a click handler which changes color when clicked instead of a button. This would not be recognised as an interactive element and would not be accessible by keyboard users either. Using HTML attributes such as tabindex="0", role="button", some of these issues can be resolved, however this will not support enter/space key presses, is unnecessarily complicated and therefore error-prone.
| Tag(s) | Description | Example |
|---|---|---|
| html | Page root. All other elements are contained in the html element. | N/A |
| body | Contains visible elements. | N/A |
| head | Contains metadata elements. | N/A |
| title | Sets the page title. | <title>HTML - Web Languages</title> |
| link | Links resources such as page icons or CSS files to the page. | <link rel="stylesheet" href="style.css"> |
| meta | Contains misc. metadata. | <meta charset="utf-8"> |
| div | Bundles elements placed inside into a single element. Very common. Has no meaning in pure HTML; Is used with CSS or JavaScript. | <div> <p>Text 1</p> <p>Text 2</p> </div> |
| nav | Represents the navigation section of a website. | <nav> <a href="index.html">Home Page<a> </nav> |
| main | Represents the main section of a website. | <main>Text.....</main> |
| caption | The caption of a table. Is displayed above the table, but the tag is inside it. | <table> <caption>Empty Table</caption> </table> |
| a | Links to the address specified by the element's "href" attribute. | <a href="index.html">Home Page</a> |
| h1 h2 h3 h4 h5 h6 | The elements h1, h2, ..., h6 define levels of page headings. h1 is the largest and h6 is just bold text. | <h1>Felines</h1> <h2>Cats</h2> <h3>Persian</h3> <h4>Persian Kittens</h4> <h3>Siamese</h3> <h2>Big Cats</h2> <h3>Lions</h3> <h1>Canines</h1> |
| p | Defines a block-level paragraph. | <p>Text goes here.</p> |
| strong | Makes text bold. Signifies importance. | This document is about <strong>HTML</strong>. |
| del | Used for deleted text. | Last updated in <del>2010</del> 2020 |
| table tr td th | The table element is the root element of an HTML table. Rows are defined using tr ("table row") and th ("table header"). Cells are defined by the td ("table data") element. | <table> <th> <td>Cell 1 Header</td> <td>Cell 2 Header</td> </th> <tr> <td>Cell 1 Row 1</td> <td>Cell 2 Row 1</td> </tr> </table> |
| br | Inserts a page break. Page breaks and multiple spaces directly in HTML do nothing unless using the preformatted text element or CSS white-space property. | Text 1<br>Text 2 |
| span | Does nothing. Useful for isolating text from paragraphs to style with CSS. Grouping element. | <p> normal text <br> <span class="red">red text</span> <br> normal text </p> |
| button | Makes a button. | <button onclick="start();"> Start </button> |
| script | Used to add JavaScript to a page. | <script> console.log("test"); </script> <script src="script.js"></script> |
| ul ol li | Used to define lists. li is a block-level list item. ol and ul correspond to ordered (with numbers) and unordered lists. | <ul> <li>List item</li> <li>Another list item</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> </ol> |
| input form label | Defines ways to input information such as checkboxes, text inputs, submit buttons, etc. The form element can send all data from the input elements inside it to a server when submitted without JavaScript. | <form action="purchase_processing.php"> <label> <input type="checkbox" name="purchase"> Agree to purchase? </label> <input type="submit" value="Submit"> </form> |
| img | Inserts an image, as well as alternative text for screen readers or if a network error blocks the image. | <img src="cat3.png" alt="A black cat."> |
| iframe | Embeds another document within the current page. Iframes from the same domain can be accessed by JavaScript. Many servers are configured to tell browsers not to embed their pages in foreign websites, since iframes embedding login/payment pages can be made invisible to trick the user into clicking an "Accept" button. | <iframe src="index.html"></iframe> |
Note: The radio buttons work by assigning CSS classes with JavaScript.