Explore

Web Development: Foundations - D276

HTML

Last edited 464 days ago by Makiel [Muh-Keel].

HTML (HyperText Markup Language) is a textual language for creating webpages. The HTML acronym highlights the three main characteristics of webpages.

HyperText

Text that contains connections to other documents.

Markup

Part of a document that explains how to interpret or structure other parts of the document.

Language

A set of rules describing how to write HTML.

HTML defines over 130 elements. An element is a single HTML structure. Elements are represented with HTML tags.

An element includes the opening and closing tags, and the content between the tags.

Void Element has no closing tag, so a void element cannot surround any content.

An HTML tag is a markup instruction identified by <, the tag name, and >.

An opening tag indicates the element's starting point in the document. <p>

A closing tag indicates the element's ending point in the document. </p>

⁠

Basic HTML Elements

Paragraphs

The <p> element creates a paragraph in an HTML document. A paragraph is enclosed in HTML by the <p> opening and </p> closing tags. Browsers visually separate paragraphs from other text with spacing above and below.

Whitespace and line breaks

A whitespace character is an unprinted character such as the spaces between words and lines of text. Browsers treat all sequences of whitespace as a single space between non-whitespace characters. Ex: The three spaces in the HTML "hello there" will be displayed with a single space "hello there". Whitespace characters include spaces, tabs, and newlines. So, a browser treats multiple lines of text as a single space.

The <br> element creates a line break in a paragraph, such that the content after the line break appears on a new line. The <br> element is a void element, so only the opening tag is needed.

Sections and headings

A section is a collection of related content created with a <section> element. Many documents can be organized into sections, with each section being wrapped in a <section> element. Ex: A scholarly article's abstract, introduction, main content, and references can each be wrapped in a <section> element.

Emphasized

The <em> element indicates emphasized text, such as text having an emphasized pronunciation when spoken, and is italicized by default.

Strong

The <strong> element indicates text that has strong importance, and is bolded by default.

Cite

The <cite> element denotes a title, such as a book or song title, and is italicized by default. Ex: <cite>Spaceballs</cite> is a parody of the <cite>Star Wars</cite> trilogy. yields: Spaceballs is a parody of the Star Wars trilogy.

Mark

The <mark> element denotes important content that should be semantically highlighted and is rendered with a yellow background by default. Ex: <mark>Highlight</mark> what is important. yields: Highlight what is important.

Bold

Italics

The <i> element indicates text in an alternative voice, such as a word or phrase in a foreign language, and is rendered using italics. Ex: Dashi is a stock used in Japanese cooking.

The <u> element denotes text that should appear differently from normal text, such as misspelled words, and is underlined by default. Ex: Misspelled is often misspelled as mispelled.

⁠

Unordered lists

An unordered list is a collection of items, usually indented and shown using bullets, created with the <ul> element. Each list item is created with the <li> element.

The CSS property list-style-type provides the ability to change the bullet used in an unordered list and offers more numbering options in an ordered list.

⁠

Ordered lists

An ordered list is a sequenced collection of items, usually indented and shown using numbers or letters, created with the <ol> element. As with an unordered list, each list item is created with an <li> element. The <ol> element's numbering scheme is specified with the type attribute.

⁠

Nested lists

A nested list is a list within a list item of another list. A nested list displays indented inside the outer list. A nested unordered list uses a different bullet style, and a nested ordered list restarts at 1.

⁠

Creating a table

A table is an HTML structure created with the <table> element that organizes data into rows and columns. A cell is a location in the table at a specific row and column.

The <tr> element creates a table row, which contains all the row's cells.

The <th> element creates a table cell containing table header information about the data. Usually, the browser displays table headers centered with a bold font.

The <td> element creates a table cell containing table data.

A table caption defines a short descriptive text for a table and is created with the <caption> element. The caption element must immediately follow the opening <table> tag. A web browser typically renders the table caption centered above the table.

⁠

Spanning multiple columns and rows

A single table cell occupies a single row and column by default, but a cell may span multiple columns or multiple rows using the colspan attribute and rowspan attribute to specify how many columns or rows to span. The colspan and rowspan attributes apply to <td> and <th> elements.

⁠

Table Header, body, and footer

Three optional table tags specify each part of a table:

The <thead> element specifies the table header.

The <tbody> element specifies the table body.

The <tfoot> element specifies the table footer.

⁠

Images

The <img> element is a void element that displays an image in a webpage. The <img> element has two required attributes:

The src attribute specifies the URL of the image file to display.

The alt attribute provides a text description to use as an alternative to displaying the image.

Ex: <img src="https://example.com/family.jpg" alt="Smith family reunion"> displays the image family.jpg, but the text "Smith family reunion" displays if the image cannot be displayed.

⁠

Image size

The width attribute and height attribute are optional <img> attributes that tell the browser how many pixels the image should occupy. Ex: <img src="logo.png" alt="Logo" width="200" height="100"> makes the logo.png image display in a rectangle that is 200 × 100 pixels.

If the specified width and height are different from the image's actual size, the browser will resize the image for display.

An image's aspect ratio is the ratio of the image width to the image height. The aspect ratio is written as width:height. Ex: An image 500 pixels wide and 250 pixels high has an aspect ratio of 500:250, which simplifies to 2:1.

Section links

A URL can point to a section, or fragment, of a document by adding a hash tag (#) and a fragment identifier at the end of the URL. Ex: https://en.wikipedia.org/wiki/Computer_science#History refers to the "History" section of the "Computer_science" page on Wikipedia.

Adding the id attribute to any element creates a fragment identifier, permitting URLs to link directly to the id's location in the document.

Entities

An entity is a mechanism for writing special characters or symbols in HTML, such as mathematical symbols, characters in most languages, and many other symbols. Many HTML entities can be specified by name.

⁠

Non-breaking characters

A non-breaking character is an inter-word character that permits treating the words on both sides to be one word. A non-breaking hyphen, ‑, looks like a regular hyphen but acts like a normal character in the middle of a word. Ex: off‑campus displays "off‑campus" on the same line

Initial design

The fictional rock band Reach Out needs a webpage that promotes the band and shares upcoming concerts. When creating a new webpage, good practice is to create a wireframe for the webpage first. A wireframe is a blueprint, showing where the future content will be arranged.

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.