This is the cool and awesome study guide for all of your needs

What are the basics of HTML?

To answer this question, we must first ask; What is HTML?

HTML or Hypertext Markup Language is a coding language which is used to create the content of a webpage. Being a markup language, all HTML code are inside of tags. A tag is placed before and after line of code. They are demarcated by angile brackets. It is usually paried up with another coding language called CSS. If HTML builds the structrure of the web page, CSS beautifies it.

How do you get started with HTML?

The first thing to do is to open up a new HTML file. Then, type HTML:5 and click enter. This is a plug in called VCode. This creates:

The Head Tag

- Contains the metadata of the webpage.

Metadata

- Discribes what settings the webpage will be using, i.e. the language and the scale of the webpage.

The Title

- The title that shows up in your tab at the top of the screne.

The Body Tag

- This contains all information you want in your webpage. This includes blogs, photos, and everything else you see on a webpage.

Here are some more useful tags:

• p - paragraphs. Semantic
• a - anchor, links to another website. Semantic
• main - the main part of your body. Semantic
• header - this goes on to of your webpage. Semantic
• link - links to another file in your folder, usually a CSS file. Semantic
• nav - navigation, orginization for all links. Semantic
• div - divider, divides the page into block. Non-semantic
• section - similar to a div but semantic and more rigid. Semantic
• article - self contained piece of content in your body. Semantic
• span - used to apply stylization to certain words. Non-semantic
• ul - unorganized lists, dotted point. Semantic
• ol - organized list, number points. Semantic
• li - list, used in ul and ol lists. Semantic
• dl - description lists, puts a title then gives a description. Semantic
• dt - description term. Semantic
• dd - description list. Semantic
• h1 to h6 - these are all titles, lower the number the bigger the text. Semantic
• footer - similar to a header but is goes at the bottom of your page. Semantic
• html - sets up your page. Non-semantic
• img - puts an image in your webpage. Semantic
• table - puts a table. Semantic
• tr - table row. Semantic
• not a tag, class and id - these make it easy to specify in CSS which tag you want to change

Anatomy of a tag

In every tag in HTML there are multiple components that comprises a line of code. The "a" tag, also known as an anchor, creates a link to another website which the user can click. The a is written like arrow"a href="this is where the URL would go"arrow text arrow/aarrow", it is comprised of 4 elements. First is the starting tag, this is what tells the compiler what the tag is. Next is the content, this is the text that is shown to the user. Then, the attribute is after the href and it is the URL of the other website you want to go to. Lastly, is the end tag. This tells the computer that this is where you want the tag to end.

Semantic vs Non-semantic tags

Semantic tags are any tags that have a specific meaning to them. For example, the header tag is semantic because it explains to the compiler that this is specifically a header tag. While a non-semantic tag are more general in their design. For example, a div tag is non-semantic because it is generic in nature. If you were to tell me what is in a header, footer, or nav, I could asnwer you quickly. But if you ask what is in a div, then it is less obvious; it could be anything. Semantic tags also helps with readability, search engine optimization, and accessibility.

CSS

CSS also known as Cascading Style Sheets, is a coding language used to describe the visuals inputed in HTML. It is the bedrock for good UI design and brings life HTML code. CSS is written differently than HTML, CSS requires you to write each element selector with a {} brakets, e.g. h1 {}. Other name: ruleset.

What happens when you to go to a website? HTTP sends a request to the server. Then, the server sends back HTML.

Absolute path comes from the original folder. They all start with a "/". Relative starts in the index HTML file. They start with a "../".

Block level take up the entire width i.e. a div, inline only takes as much space as needed i.e. a span.

Use an asterix in CSS to apply to everything.

What is metadata?

Metadata is information that goes into the head of the HTML program, which