HTML Sections & Outlines
1. Understanding Structural Markup
Structural markup defines the structure of a document
Presentational markup defines the appearance of a document
Mixing structural and presentational markup
Old HTML used a mixture of structural and presentational markup
Current web standards have removed presentational markup from HTML
HTML is used for document structure, CSS is used for document presentation
Problems with using presentational markup
The use of presentational elements hinders accessibility
Higher maintenance costs
Document size bloat
Block-level elements and inline-level elements
Block-level elements: Paragraph elements that cause line breaksInline-level elements: Part-of-line elements that do not cause line breaks
2. Section Elements in HTML5
HTML Navigational Element (
<nav>)defines a section that contains navigation links that appear often on a site.
You can have primary and secondary menus, but you never nest, or put a
<nav>element inside a<nav>element.
HTML Article Element (
<article>)defines a piece of self-contained content.
It does not refer to the main content alone and can be used for comments and widgets.
HTML Section Element (
<section>)defines a section of a document to indicate a related grouping of semantic meaning.
Utilize the section element providing extra context from the parent element makes sense.
HTML Aside Element (
<aside>)defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement.
It has its own outline, but doesn't belong to the main one.
Other Semantic HTML elements used in Sectioning
HTML Body Element (
<body>)defines all the content of a document.
It contains all the content and HTML tags.
HTML Header Element (
<header>)defines a page which typically contains the logo, title, and navigation.
The header can also be used in other semantic elements such as
<article>or<section>— or section header, containing perhaps the section's heading, author name, etc.<article>,<section>,<aside>, and<nav>can have their own<header>.Despite its name, it is not necessarily positioned at the beginning of the page or section.
HTML Footer Element (
<footer>)defines a page footer which typically contains the copyright, legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc.
<article>,<section>,<aside>, and<nav>can have their own<footer>.Despite its name, it is not necessarily positioned at the end of the page or section.
3. HTML elements reference from MDN
Main root
The HTML <html> element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.
Document metadata
Metadata contains information about the page. This includes information about styles, scripts and data to help software (search engines, browsers, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or link to another file that has the information.
<base>
The HTML <base> element specifies the base URL to use for all relative URLs in a document.
<head>
The HTML <head> element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
<link>
The HTML External Resource Link element (<link>) specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
<meta>
The HTML <meta> element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style>, or <title>
<style>
The HTML <style> element contains style information for a document, or part of a document.
<title>
The HTML Title element (<title>) defines the document's title that is shown in a browser's title bar or a page's tab.
4. HTML Table
Precautions When Using HTML Tables
Tables have poor accessibility, so if there is a better way to present something, do not use tables.
Tables should not be used for page layout.
Tables should also be avoided when presenting input forms whenever possible.
Creating HTML Tables
table
element: Represents an HTML table.
tr element: Represents a row of the table.
th element: Represents a table header cell. Used for title cells.
td element: Represents a cell of the table.
Cell Merging
Horizontal cell merging: Use the colspan attribute
Vertical cell merging: Use the rowspan attribute
Table Structure Elements
Structuring tables to enhance accessibility and data analysis
thead element
A collection of rows consisting of table headings
No more than two thead elements should be defined in a table.
tbody element
The body of the table where the content goes
Multiple tbody elements can be set
tfoot element
A collection of rows consisting of the table footer
Appears at the end of the table regardless of its position.
No more than two tfoot elements should be defined in a table
col element: Structurally represents a single column. Set after the caption element and before thead or tbody. Use as many col elements as there are columns in the table.
colgroup element: A group of col elements Can be separated into multiple colgroups according to structure.
scope attribute
Specifies the direction of the header cell's influence
If the scope value is row or col
The header cell is a title for the row or column
If the scope value is rowgroup or colgroup, the header cell is a title for a group of rows (multiple rows below) or a group of columns (multiple columns to the right)
caption element
Represents the caption (title) of the table.
Must be set first as the first child element of the table element.
If the table is the only child element of a figure element, the caption should be displayed with a figcaption element instead of caption.
5. HTML Form
form element
Represents an HTML input form
action attribute: The server file URL where the form is submitted
method attribute: The method by which the form is transmitted, with values of get or post.
input element
An input data field with various types
Last updated