WEEK 3 Part 1

HTML

backbone of web content

HTML elements

define the structure of a web page

tags

provide semantic meaning to content, such as headings, paragraphs, lists, etc

attributes

can be added to tags to provide additional information or functionality

block level elements and inline elements

in HTML, elements are divided into two main categories. they differ in how they structure and display content on a web page

block-level elements

always start on a new line

occupy the full width available

used for layout and structure

inline elements

do not start on a new line

take up only as much width as needed

used for text formatting and small parts of content

paragraph ( <p>)

the most rudimentary elements of a text document. you indicate this with the ___ element

<br>

this tag is used to insert a line break in text, similar to pressing the “Enter” key in a word processor

line break

its an empty tag, meaning it does not have a closing tag

horizontal rule: <hr>

this is used to create a horizontal line across webpage. commonly used to visually separate content within a page, indicating a thematic break or shift in content

<h1> to <h6>

represent headings of different levels. they define content structure and hierarchy. nested headings create a clear document outline

align

specifies the alignment of the text inside the heading. possible values: left, center, right

title

is a text that appears when the mouse passes over the heading

Lists

very common in web pages. they’re used in online articles, navigation menus, and product features on e-commerce websites

unordered list

ordered list

nested list

there are few different types of list you can use, depending on the content you want to display

unordered list

a simple HTML list that you can use when the order of the items you’re listing isn’t important (rearranging order wont cause confusion)

ordered list

used when the order of the items is important

nested list

a little more complex, because it’s essentially a “list within a list”

hyperlinks (anchor tag): <a>

html links are ____ which allow the user to click and navigate to another page or document

href

specifies the URL of the page or resource the link points to. this can be an absolute or relative URL

target

specifies where to open the linked document

rel

specifies the relationship between the current document and the linked document

type

specifies the media type of the linked document

download

specifies that the target will be downloaded when the link is clicked

media

specifies what media/device the linked document is optimized for

absolute links

provides the full URL of the target resource

relative links

specifies a path relative to the current document’s location

local link

a link to a page within the same website

mailto

use ____ inside the href attribute to create a link that opens the user’s email program (to let them send a new email)

<img>

this contains attributes only and does not have a closing tag

src

this attribute specifies the location of the image

alt attribute

this attribute provides alternative text for an image

border

default value is 0, set the width of the border that surrounds the image

italic: <i>

to denote text

emphasized <em>

usually used as image captions

marked text <mark>

highlight the background of the text

striked out text <strike>

place a horizontal line across the text

underlined text <u>

used for links or text highlights

subscript text <sub>

typographical stylistic choice

superscript text <sup>

another typographical presentation style

<blockquote>

defines a section that is quoted from another source

<q>

short inline quotation

<dfn>

used to indicate defining instance of a term, often displayed in italic

<abbr>

used for abbreviation or acronyms

nesting tags

combine the effects of one type of tags

<!-- -->

comment in html

class Attribute

specifies one or more class names for an HTML element

id attribute

specifies a unique identifier for an HTML element

element

in html, these are often categorized into semantic and non-semantic tags

semantic elements

clearly describe their meaning in a human- and machine-readable way

<header>

represents the header of a document or section

<nav>

defines a set of navigation links

<main>

represents the main content of the document

<article>

represents a self-contained piece of content

<section>

defines a section in a document

<aside>

represents content related to the main content but separate from it, like a sidebar or pull quote

<footer>

represents the footer of a document or section, typically containing copyright informtion

non semantic elements

do not provide information about their content, making them less descriptive

<div>

block-level element used to group content or apply styles without implying any meaning

<span>

an inline element used to group small pieces of content for styling or scripting without implying any meaning. used as a generic container for inline elements, allowing you to group and style parts of your HTML content