Learning HTML Elements

#html

July 6, 2024 | 10:15 pm

Today I worked on Codeacademy's Learn HTML Fundamentals and learned quite a bit of the components of a web page. HTML, also known as Hypertext Markup Language, is the skeleton of a web page; we use elements, such as body elements, paragraphs, divisions, and headings to populate, organize, and style the page.

We'll create these elements by 'tagging' them using this symbol: <>. To add content like pictures, text, etc. you add an _opening tag with the name of the type of element inside the <> symbol, place the content after this tag, and use a closing tag preceded by a forward slash to create the element that will be presented on the page.

While all of this information is important for the understanding of markup language, I think the most important portion of the lesson is the mention of 'hierarchy' with tags. Nesting tags inside the content of other tags forms a relationship between the elements. The child is the element nested inside another element. This element becomes the parent element, and its child inherits the parent's functionality. Thus, nesting/organization should be considered while adding content to the web page.

Summary of things I learned today:

Organize a web page using elements : paragraphs, lists, divisions, body, headings, etc.
Headings come in different sizes, from the largest size of 1 to smallest size of 6, to allow for subheadings.
Divs, or divisions, are one of the most important components of a web page. They organize elements into separate blocks of content so they are more easily styled and manipulated. This allows this block of code to be manipulated differently and separately from other elements.
Attributes allow for the identification of elements. At times, an element will be used more than once, so we'll customize the element so the developer can easily identify how certain elements are organized.
Use em and strong tags to italicize and highlight text (inline markup).
Use br to create line breaks and space text.
Use ul to bulletpoint an unordered list, where the list items are not organized in a particular order. You'll need to use a li tag for each list item.
Use ol to bulletpoint an ordered list, where the list items are organized in a particular order. Similar to unordered lists, you'll need to use a li tag for each list item.
Use img to add an image to a web page. This tag is self closing, so you wont need a closing tag. Instead, set the source (src) attribute inside the img tag equal to the link to the image and finish by adding a forward slash before the > symbol. To add a description/caption for the image, use the alt attribute inside the image tag and set it equal to the text that will be displayed as a caption.
Use video to add a video to the web page. Set the source equal to the link to the video. Use the appropriate closing tag. To customize the size and functionality of the video define the width, height, and controls attributes.