Research/HTML
HTML_Elements
RIEM
2023. 5. 2. 18:52
HTML Elements
We already know how HTML elements are made.
| <tagname> Content </tagname> |
Empty Elements
Sometimes, you don’t need to close tag like <br>. It is called empty element.
| <br> <br> |
<br> offers a line break in text. See how it works below.
| <body> <h1>Hello, this is heading1</h1> <br> <h2>This is heading2</h2> <br> <p>Paragraph starts here</p> </body> |
Nested HTML Elements
HTML elements can be contained in other elements. We call it nested HTML elements. All HTML documents made up of nested HTML elements. Look at the basic structure of HTML.
| <!Doctype> <html> <head> <title></title> </head> <body> <h1>Hello, this is heading1</h1> </body> </html> |
The <html> element is the root element. It defines the entire HTML document. It starts with <html> and ends with </html>. Between the two tags, there are <head>, <title>, <body>, <h1> tags. We can say 4 tags are nested in <html> tag.
HTML Element Reference
Ok. We know what is a HTML element, how its structure looks like and what is the concept of the nested element. Now, let’s have a look at a variety of element references.
| Tag | Description |
| <!-- … --> | create a comment |
| <!DOCTYPE> | defines the document type |
| <a> | defines an anchor for hyperlink |
| <abbr> | show an abbreviation or an acronym |
| <address> | defines contact information for the author/owner of a docs |
| <area> | defines an area inside an image map. You track and offer different link depending on coordinates |
| <article> | defines an article |
| <aside> | defines content aside from the page content |
| <audio> | defines embedded sound content |
| <b> | defines bold text |
| <base> | Specifies the base URL/target for all relative URLs in a docs |
| <bdi> | bidirectional algorithm. Isolates a part of text that might be formatted in a different direction from other text outside it |
| <blockquote> | defines a action that is quoted from another source |
| <body> | defines the document’s body |
| <br> | creates a single line break |
| <button> | creates a button user can click |
| <canvas> | used to draw graphics, on the fly, via scripting with JS(usually) |
| <caption> | defines a table caption |
| <cite> | defines the title of a work |
| <code> | defines a piece of computer code |
| <col> | specifies a column properties for each column within a <colgroup> element |
| <colgroup> | specifies a group of one or more columns in a table for formatting |
| <data> | adds a machine-readable translation of a given content. Browser doesn’t display number |
| <datalist> | specifies a list of pre-defined options for input controls |
| <dd> | defines a description/value of a term in a description list |
| <del> | define text that has been deleted from a docs |
| <details> | create additional details button that the user can view or hide |
| <dfn> | specifies a term that is going to be defined within the content |
| <dialog> | defines a dialog box or window |
| <div> | defines a section in a document |
| <dl> | defines a description list |
| <dt> | defines a term/name in a description list |
| <em> | defines emphasized text |
| <embed> | defines a container for an external application |
| <fieldset> | Groups related elements in a form |
| <figcaption> | defines a caption for a <figure> element |
| <figure> | specifies self-contained content |
| <footer> | defines a footer for a document or section |
| <form> | defines an HTML form for user input |
| <h1>...<h6> | defines HTML headings |
| <head> | contains metadata/information for the document, for example, title, style, base, link, meta, script, noscript. |
| <header> | defines a header for a document or section |
| <hr> | defines a thematic change in the content. It display single line |
| <html> | defines the root of an HTML document |
| <i> | defines a part of text in an alternate voice or mood |
| <iframe> | defines an inline frame |
| <img> | defines an image |
| <input> | defines an input control |
| <ins> | defines a text that has been inserted into a document |
| <kbd> | defines keyboard input |
| <label> | defines a label for an <input> element |
| <legend> | defines a caption for a <fieldset> element |
| <li> | Defines a list item |
| <link> | Defines the relationship between a document and an external resource(most used to link to style sheets) |
| <main> | Specifies the main content of a document |
| <map> | defines an image map |
| <mark> | defines marked/highlighted text |
| <meta> | defines metadata about an HTML docs |
| <meter> | create display of a scalar measurement within a known range(a gauge) |
| <nav> | defines navigation links |
| <noscript> | defines an alternate content for users that do not support client-side scripts |
| <object> | defines a container for an external application |
| <ol> | defines an ordered list |
| <optgroup> | defines a group of related options in a drop-down list |
| <option> | defines an option in a drop-dwon list |
| <output> | defines the result of a calculation |
| <p> | defines a paragraph |
| <param> | defines a parameter for an object |
| <picture> | defines a container for multiple images resources |
| <pre> | defines a preformatted text |
| <progress> | represents the progress of a task |
| <q> | defines a short quotation |
| <rp> | defines what to show in browsers that do not support ruby annotations |
| <rt> | defines a explanation/pronunciation of characters (for East Asian typo) |
| <ruby> | defines a ruby annotation(for East Asian typo) |
| <s> | defines text that is no longer correct |
| <samp> | defines sample output from a computer program |
| <script> | defines a client-side script |
| <section> | defines a section in a document |
| <select> | defines a drop-down list |
| <small> | defines smaller text |
| <source> | defines multiple media resources for media elements(<video> and <audio>) |
| <span> | defines a section in a document |
| <strong> | defines import text |
| <style> | defines style information for a document |
| <sub> | defines subscripted text |
| <summary> | defines a visible heading for a <details> element |
| <sup> | defines superscripted text |
| <svg> | defines a container for svg graphics |
| <table> | defines a table |
| <tbody> | groups the body content in a table |
| <td> | defines a cell in a table |
| <template> | defines a container for content that should be hidden when the page loads |
| <textarea> | defines a multiline input control(text area) |
| <tfoot> | groups the footer content in a table |
| <th> | defines a header cell in a table |
| <thead> | groups the header content in a table |
| <time> | defines a specific time (or datetime) |
| <title> | defines a title for the docs |
| <tr> | defines a row in a table |
| <track> | defines text tracks for media elements |
| <u> | defines some text that is unarticulated and styled differently from normal text |
| <ul> | defines an unordered list |
| <var> | defines a variable |
| <video> | defines embedded video content |
| <wbr> | defines a possible line-break |