HTML stands for HyperText Markup Language:

• A markup language is a computer language that defines the structure and presentation of raw text.
• In HTML, the computer can interpret raw text that is wrapped in HTML elements.
• HyperText is text displayed on a computer or device that provides access to other text through links, also known as hyperlinks.

HTML element: unit of content in an HTML document formed by HTML tags and the text or media it contains. HTML tag: the element name surrounding by an opening and closing angle bracket < > Opening tag: first HTML tag used to start an element. Tag type is surrounded by <...> Content: the info contained between the opening & closing tag Closing tag: end HTML element. They have a forward slash inside of them </...>

Body: key HTML element. Only content inside the opening & closing body tags can be displayed to the screen. Once the file has a body, many different types of content can be added.

HTML is a collection of family tree relationships. When an element is contained inside another element, it is considered the child of that element. The child element is said to be nested inside of the parent element. The relationship between elements and their ancestor and descendent elements is known as hierarchy.

HTML has 6 different heading elements. Ordered from largest to smallest:

: main headings

t/m

: subheadings.

= division = container that divides the page into sections. Useful for grouping elements in your HTML together. Always use indentation when you nest elements inside of

for better readability.

Attributes are content added to the opening tag of an element. They are made up of:

• The name of the attribute
• The value of the attribute

id = to specify different content, really helpful if you use an element more than once. paragraphs

contain a block of plain text contains short pieces of text or other HTML. Used to separate small pieces of content that are on the same line as other content. When you want to target a specific piece of content that is inline with other text. If you want to divide your content into blocks:

.

emphaizes text (generally italic) highlights important text (generally bold)
line break element. It is only composed of a starting tag!

create a list of items in no particular order. It outlines individual list items with a bullet point. It should not hold raw text, and won't automatically format raw text into an unordered list of items. They need individual list items:

used to describe an item in a list.

ordered lists, where each list item is numbered. List items can be added with

or add an image to a web page. This is a self closing tag, you can or can't add the /, both will render properly. It has a required attribute called src, the location of the image. The value must be the uniform resource locator (URL) of the image.

alt attribute = alternative text = meaning to the images on our sites. E.G. -If an image fails to load on a web page, a user can mouse over the area originally intended for the image and read a brief description of the image. -When you include the alt attribute, the screen reading software can read the image's description out loud to the visually impaired user. -The alt attribute also plays a role in Search Engine Optimization (SEO), because search engines cannot "see" the images on websites as they crawl the internet. Having descriptive alt attributes can improve the ranking of your site.

width&height are set of the video, controls instructs the browser to include basic video controls (pause,play,skip).

HTML files require elements to set up the document properly. You can let your browser know that you are using HTML by starting with a doc type declaration:

: it is an instruction, must be the first line of code in your HTML document. HTML code is always saved in a file with .html extension. After the instruction, we need to create HTML structure & element: : metadata for a web page. It goes above the body element. Metadata is info that isn't displayed directly on the web page. It is info about the page itself. For example, a browser's tab displays the titel specified in the tag. It is always inside of the head element!

This is a link to website : anchor element, add link to a web page, including the text of the link. href = hyperlink reference, used to link to a path, or the address where a file is located. The target attribute specifies how a link should open. To open in a new window/tab: target="_blank"

HTML files are stored in root directory/main faolder where all the files for the project are stored. That's why we can link web pages together using a relative path. Contact link from the current HTML file to the contact.html file in the same folder. A relative path is a filename that shows the path to a local file (a file on the same website, such as ./index.html) versus an absolute path (a full URL, like https://www.codecademy.com/learn/learn-html which is stored in a different folder).

As the code in an HTML file grows, it becomes increasingly difficult to keep track of how elements are related. Programmers use two tools to visualize the relationship between elements: whitespace and indentation. Both tools take advantage of the fact that the position of elements in a browser is independent of the amount of whitespace or indentation in the index.html file. The World Wide Web Consortium, or W3C, is responsible for maintaining the style standards of HTML. At the time of writing, the W3C recommends 2 spaces of indentation when writing HTML code. Indentation is used to easily visualize which elements are nested within other elements. HTML files also allow you to add comments to your code. Comments begin with . Any characters in between will be ignored by your browser. We can turn nearly any element into a link, by wrapping that element with an anchor element. . An image of a prickly pear has been turned into a link by wrapping the outside of the element with an element. So what happens here: you are now directed to the URL if you click the image.

In order to link to a target on the same page, we must give the target an id. This should be descriptive to make it easier to remember the purpose of a link. The target link is a string containing the # character and the target element's id.

This is the top of the page!

and Top