Week 2 Exploration

Introduction to HTML — HTML Tags — Linking HTML Documents — Introduction to CSS & Selectors — CSS Properties and the Box Model

acronym: HTML

HyperText Markup Language

definition: HTML

a language that structures hypertext and is what webpages are written in

element

the basic building block of HTML, there are many types of elements in HTML, they can be nested within each other, and are represented with opening and closing tags.

4 main parts of an HTML document

1 - Document Type Declaration

2 - HTML root element

3 - Head element, nested inside HTML root, sibling of body

4 - Body element, nested inside HTML root, sibling of head

Document Type Declaration

the first line, which tells the browser that the document type is HTML, <!doctype html>

HTML root element

This element typically has a lang attribute that describes the human language used by the majority of content on the page, all other elements are descendants of this one, <html>

Head element

Used to specify meta-data about the document, also called the header of the document, it helps the browser and robots (e.g., search engine crawlers) understand what is on the page. Often contains a title element, <head>

Body element

This is what contains the the content of the website, only this is rendered on the webpage.

HTML Attributes

Provide additional information about a given HTML element, typically use attribute-name="attribute-value" format, some attribute names have no associated value pair.

Input Element

Used to create controls for user input, it is an empty element (no closing tag). Attributes are added to give further detail about the type and behavior of the input, ex <input type="checkbox" checked >

Entities

Strings that begin with & and end with ; and are provided to display reserved characters as well as characters that may be difficult to type on a keyboard.

Entity: &lt;

Displays <

Entity: &gt;

Displays >

Entity: &amp;

Displays &

Entity: &quot;

Displays "

Entity: &copy;

Displays a copyright symbol ©

Viewport

The portion of a browser's window below the tab, address bar, and bookmark bar.  The area changes size depending on the device being used to view web pages.

Page Layout Tags

Structural HTML tags used to organize and define the different sections of a webpage that act as containers that group content together, creating a visual blueprint and hierarchy for the page's design.

Block-level elements

Elements (like page-layout tags, headlines, and paragraphs) that break up the content flow and are typically displayed by browsers with a newline both before and after them.

<header>

An element that denotes the banner or masthead for an app/site; it typically includes the name, publisher, and marketing slogan, and is kept consistent from page to page.

<nav>

An element used for navigation blocks that take users to other pages, typically containing main menus, search, tools, stories, locations, and legal links.

<main>

The primary HTML element that holds the main content of a page, such as stories, galleries, or tutorials.

<section>

A thematic grouping of related content that does not quite stand on its own, usually starting with an <h1> headline that describes its contents.

<article>

An element typically used inside a <section> to denote a single specific topic, often marked with an ID selector for unique styling and internal page anchors.

<footer>

An element residing below the </main> tag that holds legal information, contact details, and critical links, minimally requiring a copyright statement.

<aside>

An element that holds content related to an article (often floating to the left or right with a different style) or used by frontend developers to create sidebars.

<figure> and <figcaption>

Elements used together to wrap around and label media, where the primary tag encloses both the media (like an image or movie) and its caption tag.

<blockquote>

An element designed for extended quotations that are too long for a standard paragraph, visually styled to stand out, and capable of including <q> and <cite> tags.

<div>

A styleless, dimensionless placeholder used to divide content when no other existing element makes sense, or to serve as a container for dynamic content.

Headings (<h1> to <h6>)

Block-level elements used hierarchically to announce new or subsequent content, with <h1> being the highest level and <h6> being the lowest.

Proper use of Headings

Structural tags that should only be used to add organization to a document (like items in a table of contents) and to ensure accessibility for screen readers and search engines.

Incorrect use of Headings

Using heading tags solely to add emphasis, bolding, or size adjustments to text (such as inside a paragraph) instead of using them for hierarchical structure.

Inline elements

Elements that don’t break the flow of surrounding content.

<strong>

Marks text as important; adds bold styling and screen-reader emphasis.

<b>

Makes text stylistically different (bolded) without adding semantic meaning.

<strong> vs <b>

<strong> adds semantic importance; <b> only adds visual styling.

<em>

Adds emphasis to text; usually italic and emphasized by screen readers.

<i>

Used primarily for denoting icons rather than simply making text italic.

<q>

Marks a short quotation, typically adding quotation marks.

<span>

Targets specific inline content for styling with CSS classes or styles.

Inline elements examples

<strong>, <b>, <em>, <i>, <q>, and <span>.

<ul>

Creates an unordered list with bullet points; its children must be <li> elements.

<ol>

Creates an ordered list with automatically numbered or sequenced items.

<li>

Defines an individual item within an ordered or unordered list.

<dl>

Creates a definition list containing term-and-definition pairs.

<dt>

Defines a term in a definition list.

<dd>

Defines the description or definition of a term in a definition list.

<table>

Parent element that creates a table and contains its nested table elements.

<caption>

Provides the title or description of a table and its purpose or result.

<thead>

Contains the table's header rows and heading cells.

<tbody>

Contains the main rows and data cells of a table.

<tfoot>

Contains the table footer, often used for totals or calculation results.

<tr>

Defines a row in a table and contains <td> or <th> cells.

<td>

Defines a standard data cell in a table.

<th>

Defines a heading or label cell in a table.

colspan

Makes a table cell span across multiple columns. ex—colspan=”3”, the cell will span 3 columns

rowspan

Makes a table cell span across multiple rows. ex—rowspan=”2”, the cell will be two rows high.

Unordered List

A list whose items are displayed without a numbered sequence.

Definition List

A list containing terms and their corresponding definitions or descriptions.

Ordered List

A list whose items are automatically numbered or sequenced.

<a> (anchor element)

Creates a hyperlink from one page or location to another.

href

an attribute to an anchor element that specifies the URL where a hyperlink will take the user.

Link Text

The content between <a> tags that describes the destination of the link.

Path

The location of a file or resource within a directory structure.

index.html

The file in the root directory typically used as a website’s homepage.

Homepage

The main page of a web application, usually served for the root URL /.

Absolute URL

A complete URL that includes the protocol and domain name. Ex—https://module2.cs290.com/index.html

Relative URL

A URL that specifies a resource relative to the current file’s location.

./

Refers to the current directory in a relative path

/

Separates directories and files in a URL path

..

Moves up one directory in a relative path.

Internal Link

A link that navigates to a specific location within the same document

id

An attribute that uniquely identifies an HTML element and can be used as a link destination.

#

Precedes an element’s id value to link directly to that location in a document. Ex—file:///C:/Users/nauman/m2/link_example.html#governance takes the user to the governance section of the web page.

<img>

HTML element that displays an image.

src

An attribute that specifies the URL or path of an image or external resource.

alt

An attribute that provides alternative text for an image’s accessibility

Inline Image

An image displayed within the flow of surrounding content without creating a new line.

<link>

Specifies a relationship between an HTML document and an external resource.

rel

An attribute that specifies the relationship between an HTML document and an external resource. Two commonly used values are “stylesheet” and “icon”.

<script>

Adds JavaScript to an HTML document or references an external JavaScript file.

CSS (Cascading Style Sheets)

A language used to describe the presentation and styling of HTML documents.

Separation of content and style

The practice of using HTML for structure/content and CSS for presentation.

CSS rule

A selector followed by declarations that specify how selected HTML elements should be styled

Stylesheet

A file containing CSS rules, typically using the .css file extension

Selector

Specifies which HTML elements a CSS rule applies to

Declaration

A CSS property-value pair that specifies a style.

Property

The aspect of an element being styled, such as color or font-size.

Value

The setting assigned to a CSS property.

Universal Selector *

Selects all elements

Type Selector

A selector that selects elements based on their HTML tag name (ex all <h1>s).

ID Selector

A selector that selects the element with a specific ID using #id.

Class Selector

A selector that selects all elements with a specific class using .class.

ID vs Class Selectors

An ID identifies one unique element, a class can be reused on multiple elements.

Grouping Selector

Applies the same CSS rule to multiple selectors separated by commas. Ex—p, li {
color: blue;
} applies to all paragraph and list item elements

Combinator

A type of selector that selects elements based on their location or relationship to the document tree.

Parent

The element that directly contains another element.

Child

The element directly contained by another element.

Sibling

Elements that share the same parent.

Descendant

An element contained inside another element at any level.