Page Title

HTML Notebook

The main purpose of this page is to create a summarized and easy to understand notebook mostly based on the HTML course of sololearn

course another objective is my personal practice. I am taking this as an exercise to brush up everything that I learn while studyng programming

Theory

Types of tags
1. Container Tags
2. Empty Tags
Attributes

Theory

Types of tags

Container tags

These kind of tags require opening and closing tags. Below you will find a list of them with a short explanation but only the opening tag will be displayed, just remember that the closing tag is the same but with a slash "/" at the beggining

<html> - wraps head and body
Used along and after <!DOCTYPE html>

<head> - we write metadata in it and also the title of the page (do not confuse with headings)

<title> - we enter here the title of the webpage, it will be displayed on the search engines search and on the browser tab:
<button> - creates a button

<p> - we type normal texts in it, used to write paragraphs

<h1, h2, h3...> - headings, used to type the title in it
there are 6 levels for this, from h1 until h6; h1 being the biggest and boldest and h6 being the smallest and less bold

- this is used to add comments to your code.
The web browser won't display this, it will only be shown in the source code.
The idea of this is to help you or others that use that same code to understand the order of your code.

<body> - this encloses all of the other tags that will be displayed on the web browser

--------------------------------Semantic Tags-----------------------------

These are inclusive as the not only personalize the text but also are readable by screen readers

<strong> - text go bold and it is readable by screen readers

<em> - text go italic and it is readable by screen readers

These seem not to be in use anymore as the ones above do the same thing and are more inclusive

<b> - makes text go bold

<i> - makes text go italic

-------------------------------------------------------------------------------------

<a href="url"> - to add a connection to another webpage or to a place inside the same html document, that's why we need the link

If we want to add a connection to a place inside the html document we use this "#" plus the id of that element instead of an url

--------------------------------Listing Tags---------------------------------

<li> - list items with bullet points - this can be nested inside <ol> or <ul>

Eg:
<ol>
<il>item 1</il>
<il>item 2</il>
</ol>

<ol> - to display numbers in the list

<ul> - to display a list without an specific order, just with bullet points

----------------------------------Input Tags----------------------------------

<form> - used to enclose input elements

<label> - used to label, to put a text before, an input item

<select> - creates a drop-down list item
we need to use it inside <form>

<option> - it adds options to the drop-down list
this element needs to be nested inside <select>
Each option needs a value attribute

-------------------------------------------------------------------------------------

<nav> - defines a list of links to navigate in the website. Inside this tags generally we have the anchor tag as well <a>

----------------------------------Video Tags---------------------------------

<video> - Adds a video in the webpage

We will need to use<source> inside it

Use the attribute 'controls' inside to add buttons for pause, play and volume

Empty tags

These ones don't require closing tags, just the "<>"> initial and only tag. Also called Self closing tag

<br> - Used for line breaks

<img src="www.image-url.com"> - Used to add images along with the attribute "src"

<input> - to enter the attribute "type"

<source> - Used to add videos.

Used inside the <video> container tag.

We use the attribute "src" to add the url.

We use the attribute "type" to identify the type of video, the type of file.

Attributes

Modify elements in HTML. They can be optional or required

In container tags the attribute is always located in the opening tag.

Each attribute has a name and a value

alt (optional) alternative text for <img>. It is used when the image does not load so a text appears.

It is also readable by screen readers.

It is a best practice mostly.
width (optional) - for changing the width of the <img> tag
height (optional) - for changing the height of the <img> tag
id (optional) - it helps to identify a unique element inside the HTML code.
It is mostly used for "heading tags", " input tags".
When you have an element with identity then you can also create a anchor tag <a> to jump to that section. To do that:
1. Go to the "href" attribute inside the tag
2. write "#" along with the identifiable name
e.g:

Notebook - HTML