HTML Tags
HTML (HyperText Markup Language) is used to give content to a web page and instructs web browsers on how to structure that content. The syntax for a single HTML tag is an opening angle bracket '<' followed by the element name and a closing angle bracket '>' .
Common HTML Tags
| Tag | Name | Description |
|---|---|---|
| <html> | html document root tag | The <html> element will contain all of your HTML code. |
| <head> | head | Information about the web page (metadata), like the title, belongs within the <head> of the page. |
| <title> | title | You can add a title to your web page by using the <title> element, inside of the head. |
| <body> | body | Any visible content should be placed within the opening and closing <body> tags |
| <h1>, <h2>, <h3>... | heading | HTML can use six different levels of heading elements. The heading elements are ordered from the highest level <h1> to the lowest level <h6>. |
| <p> | paragraph | Contains and displays a block of text. |
| <ol> | ordered list | Creates a list of items in sequential order. Each list item appears numbered by default. |
| <ul> | unordered list | Is used to create a list of items in no particular order. Each individual list item will have a bullet point by default. |
| <li> | list item | Creates a list item inside the Ordered List <ol> and Unordered List <ul> |
| <img> | image | Images can be added by linking to an existing source using the src attribute, which is mandatory. <img> is an empty element meaning it should not have a closing tag. |
| <a> | anchor | Is used to create hyperlinks in an HTML document. 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. |
| <div> | division | Short for “division” or a container that divides the page into sections. These sections are very useful for grouping elements in your HTML together. |
| <span> | span | Is an inline container for text and can be used to group text for styling purposes. |
| <br> | line break | Will create a line break in text and is especially useful where a division of text is required, like in a postal address. The line break element requires only an opening tag and must not have a closing tag. |
Semantic HTML Tags
| Tag | Name | Description |
|---|---|---|
| <header> | header | Defines a header for a document; provides basic structure of the webpage and enables screen readers to translate the webpage and improves your website's SEO. |
| <main> | main | Specifies the main content of a document; provides basic structure of the webpage and enables screen readers to translate the webpage and improves your website's SEO. |
| <footer> | footer | Defines a footer for a document; provides basic structure of the webpage and enables screen readers to translate the webpage and improves your website's SEO. |
| <section> | section | Defines elements in a document, such as chapters, headings, or any other area of the document with the same theme. |
| <article> | article | Holds content that makes sense on its own such as articles, blogs, comments, etc. |
| <aside> | aside | Contains information that is related to the main content, but not required in order to understand the dominant information. |
HTML Table Tags
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
| Tag | Attributes | Description |
|---|---|---|
| <table> | The main element of the table. | |
| <thead> | Table Heading Element - Defines the headings of table columns encapsulated in table rows. | |
| <tbody> | Table Body Element - It is a semantic element that will contain all table data other than table heading and table footer content. | |
| <tfoot> | Table Footer Element - Uses table rows to give footer content or to summarize content at the end of a table. | |
| <tr> | Table Row - Is used to add rows to a table before adding table data and table headings. | |
| <th> | colspan, rowspan | Table Heading Element - Is used to add titles to rows and columns of a table and must be enclosed in a table row element <tr>. |
| <td> | colspan, rowspan | Table Data - Can be nested inside a table row element <tr> to add a cell of data to a table. |
HTML Attributes
HTML attributes are values added to the opening tag of an element to configure the element or change the element's default behavior.
Common HTML Attributes
| Attribute | Belongs to | Description |
|---|---|---|
| class | global attribute | Specifies one or more classnames for an element (refers to a class in a style sheet). |
| id | global attribute | When needed, the id value can be called upon by CSS and JavaScript to manipulate, format, and perform specific instructions on that element and that element only. |
| style | global attribute | Specifies an inline CSS style for an element. |
| href | <a>, <link> | The href determines the location the anchor element points to. |
| src | <img>, <input> | Specifies the URL of a media file. |
| type | <a>, <button>, <input>, <link> | Specifies the type of the element; for example, the <input type="text"> specifies that text is to be inputted into a form. |
| alt | <img> | Specifies an alternate text when the original element fails to display |
| target | <a>, <form> | Specifies where a hyperlink should be opened. A target value of "_blank" will tell the browser to open the hyperlink in a new tab in modern browsers. Also specifies where to submit a form. |
| colspan | <th>, <td> | Indicates how many columns that particular cell should span within the table. |
| rowspan | <th>, <td> | Similar to colspan, indicates how many rows that particular cell should span within the table. |