`
In this instance, the image source (src) and the alt text (alt) are attributes of the `
The tag above me is a horizontal line that doesn't need a closing tag
HTML tags have two main types: **block-level** and **inline tags**. 1. Block-level elements take up the full available space and always start a new line in the document. Headings and paragraphs are a great example of block tags. 2. Inline elements only take up as much space as they need and don’t start a new line on the page. They usually serve to format the inner contents of block-level elements. Links and emphasized strings are good examples of inline tags. ### Block-Level Tags The three block level tags every HTML document needs to contain are **<html>**, **<head>**, and **<body>**. 1. The **<html></html>** tag is the highest level element that encloses every HTML page. 2. The **<head></head>** tag holds meta information such as the page’s title and charset. 3. Finally, the **<body></body>** tag encloses all the content that appears on the page. - Paragraphs are enclosed by ***<p></p>***, while blockquotes use the ***<blockquote></blockquote>*** tag. - Divisions are bigger content sections that typically contain several paragraphs, images, sometimes blockquotes, and other smaller elements. We can mark them up using the ***<div></div>*** tag. A div element can contain another div tag inside it as well. - You may also use ***<ol></ol>*** tags for ordered lists and ***<ul></ul>*** for unordered ones. Individual list items must be enclosed by the ***<li></li>*** tag. For example, this is how a basic unordered list looks like in HTML: 1. **<ul>** 2. **<li>**List item 1**</li>** 3. **<li>**List item 2**</li>** 4. **<li>**List item 3**</li>** 5. **</ul>** ### **Structure of an HTML Document** An HTML Document is mainly divided into two parts: - **HEAD**: This contains the information about the HTML document. For Example, Title of the page, version of HTML, Meta-Data etc. HTML TAG Specifies an html document. The HTML element (or HTML root element) represents the root of an HTML document. All other elements must be descendants of this element. Since the element is the first in a document, it is called the root element. Although this tag can be implied, or not required, with HTML, it is required to be opened and closed in XHTML. - Divisions are bigger content sections that typically contain several paragraphs, images, sometimes blockquotes, and other smaller elements. We can mark them up using the ***<div></div>*** tag. A div element can contain another div tag inside it as well. - You may also use ***<ol></ol>*** tags for ordered lists and ***<ul></ul>*** for unordered ones. Individual list items must be enclosed by the ***<li></li>*** tag. For example, this is how a basic unordered list looks like in HTML: 1. **<ul>** 2. **<li>**List item 1**</li>** 3. **<li>**List item 2**</li>** 4. **<li>**List item 3**</li>** 5. **</ul>** ### Inline Tags Many inline tags are used to format text. For example, a **<strong></strong>** tag would render an element in **bold**, whereas *<em></em>* tags would show it in *italics*. Hyperlinks are also inline elements that require ***<a></a>*** tags and **href** attributes to indicate the link’s destination: 1. **<a** **href=**”https://example.com/"**>**Click me!**</a>** Images are inline elements too. You can add one using ***<img>*** without any closing tag. But you will also need to use the ***src*** attribute to specify the image path, for example: 1. **<img** **src=**”/images/example.jpg” **alt=**”Example image”**>** #### **BODY**: This contains everything you want to display on the Web Page. Let us now have a look on the basic structure of HTML. That is the code which is must for every webpage to have: ***<!DOCTYPE html>*** #### Here is some boilerplate html you can use as a starting point:!!Every Webpage must contain this code.!! ------------------------------------------------------------------------ ### **<!DOCTYPE html>** ------------------------------------------------------------------------ Below is the complete explanation of each of the tags used in the above piece of HTML code: **<!DOCTYPE html>:** This tag is used to tells the HTML version. This currently tells that the version is HTML 5. > ***<html>*:** This is called HTML root element and used to wrap all the code. > **<head>:** Head tag contains metadata, title, page CSS etc. All the HTML elements that can be used inside the <head> element are: > **<body>:** Body tag is used to enclosed all the data which a web page has from texts to links. All of the content that you see rendered in the browser is contained within this element. ### Bold Text: <b> **this is bold** </b> <strong> ⇐ this is for strong, emergency emotions. \_\_\_\_\_\_\_\_\_\_\_ **HEADING/S:** *6 types from largest(h1) to smallest (h6)* <h1> <h2> <h3> <h4> <h5> <h6> \_\_\_\_\_\_\_\_\_\_\_ **ITALICS:** There are two ways to use it, the first one is the <i> tag and the second one is the <em> tag. They both italicize the text🤷 <i> *this is fancy text that’s too good to for us*</i> \_\_\_\_\_\_\_\_\_\_\_ **PARAGRAPHS:** In order to make Paragraphs, just add <p>. <p> Hi there my name is Jason. </p> \_\_\_\_\_\_\_\_\_\_\_ **TITLES: not the same thing as a heading (which renders on the html page) but instead the title element represents the title of the page as shown in the tab of the browser.** <head> As such <title>This is the title</title> it is always found between <head> tags and not in the body of the page where all the content that gets rendered on the page is contained.
