My HTML Notes

Markup

Markup helps stylize the text on a webpage
It indicates how the text should be formatted

Elements

emphasis or "em" adds emphasis to text

Breaks or "br" creates a line
break between text
Line breaks may often be used inside a paragraph

Paragraphs or p is most often used for text in a webpage instead of line brakes
Used a lot for articles and blog posts

This is an example of a paragraph

This is an example of a line break
inside a paragraph

and

mark marks or highlights the text

_sub creates a subscript
Subscript text appears half a character below the normal line
Example: H₂0

^sup creates a superscript
Superscript text appears half a character aboce the normal line
Example: 5²

Elements Reivew (Part 1)

Elements seen so far:

and - Emphasis
By default, text inside is displayed as italic, and text in is displayed as boldface.
- Paragraph
Text in a paragraph is separated visually from other paragraphs by a small margin.
- Line break (empty)
A line break does not create a new paragraph; it only marks the end of a line.
and - Subscript and superscript
Useful for math and chemistry: I have x³+2x² molecules of H₂O.
- Highlighting/marking text
Not very often used, but it's kind of cool.

Of these elements, the   element is the only one that is an empty (or void) element.

Ordered and Unordered Lists

Ordered Lists

Ordered lists list items with numbers
Use <ol></ol> to create an ordered list
<li></li> identifies each list item

Unordered Lists

Unordered lists list items with bullets
Use <ul></ul> to create an unordered list
<li></li> identifies each list item

Nested List

a nested list is a list inside a list
- This is a nested list item inside a nother list
Nesting lists isn't too hard.

Anchor links

to add a link to a page, use <a href="http://example.net">Link text</a>

a is the element tag, "anchor".
href="http://example.net is the attripute of the anchor element
href is the name of the attribute
"http://example.net" is the value of the attribute
Link text is the content of the element. In this link text of the link

The "anchors" the link to the text

Here is a link to Udacity learning:
Udacity Learning

Adding images

to add an image to a page, use <img src="./file/path" alt="example image">

img is the element tag for images
src="./file/path is the URL location or file path location of the image
alt="example image" is a text description of the image. This is useful for when an image may fail to load.

Below is an example of using an image from a website

Elements Review (Part 2)

Block elements

Block elements are used for large sections of text, such as paragraphs, headlines, or lists; and also for some other features such as video players and tables.

A block element creates a (usually invisible) box in the browser display. By default, this box takes up the full width of the display. The beginning of a block always starts on a new line in the display.

Most block elements have a particular way they are displayed by default: paragraphs have margins around them; lists have bullet-points or numbered items; headlines are printed in large text. There is also a generic block element, div, which has no special defaults.

- Paragraph
Paragraph. Text in a paragraph is separated visually from other paragraphs by a small margin.
<ul> and <ol> - Undorder and ordered lists
By default ul lists are displayed with bullet points, and ol lists with numbered items
<li> - List items
li must be nested inside a ul or ol; It cannot occur on its own.
Headers <h1> through <h6>
Used for headlines, section titles, etc...
<div> - division of a page or document
Used to organize a page by nesting other block elements in a div.
div's are often used with custom styling with CSS

Inline elements

Inline elements do not create a full-width box on the display. They modify the display of text, or insert other things into the text — such as line breaks, images, or hyperlinks.

and - Emphasis
By default, text inside an em is italic and text inside a strong is boldface.
- Line break
A line break does not create a new paragraph; it only marks the end of a line and continues the text on a new line.
and - Subscript and superscript
Most often used for math and chemistry:
- : H₂O
- : x⁴+3x³
- Mark/highlight text
Not often used by may be helpful (like taking notes)

Some inline elements require attributes, besides the name of the element itself. Attributes are written inside the opening tag of the element

<img> - Images
Images always need a src="" attribute with URL or (absolute or relative) filepath. It is also best practice to include an alt="" attribute to describe the text. The alt text may be helpful if an image fails to load or when using a screen reader.
syntax example: <img src="https://example.net/example_image.png" alt="example image">
<a> - Anchor (hyperlinks)
Anchros for hyperlinks always need to be identified with an href="" attribute containing a fully qualified URL.
syntax example: <a href="https://example.net/" target="_blank"> example webpage </a>

HTML structure

HTML Boilerplate

<!DOCTYPE html>
<htm lang="en">
    <head>
        <meta charset = "utf-8">
        <title>TITLE</title>
    </head>
                
    <body>
        <h1>
        HEADING
        </h1>
        <p>
            Paragraph
        </p>
    </body>
</html>

The <body> of the html contains everything displayed on the webpage

the <head> of the html contains:

title for the name of the webpage - The title is the only required part of the head, but it is best practice to include more data than that
Stylsheet in CSS
Script in javascript
metadata for search engines