HTML BASICS #1
Tags: 100daysofcode, html, webdev
Published: 2021-02-01 23:25:35

[Day 1 / #100daysofcode]

What is HTML? HTML provides structure to the content appearing on a website, such as images, text, or videos.
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 is composed of elements:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nnbmwzhag0xw2l0jdo71.png)

HTML is organized as 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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/msdasjtdltbxftvgb2uq.png)

###Headings: 
HTML follows a similar pattern. In HTML, there are six different headings, or heading elements. Headings can be used for a variety of purposes, like titling sections, articles, or other forms of content.
* 		"<h1>" — used for main headings. All other smaller headings are used for subheadings.
* 		"<h2>"
* 		"<h3>"
* 		"<h4>"
* 		"<h5>"
* 		"<h6>"

###Divs:
One of the most popular elements in HTML is the <div> element. <div> is short for “division” or a container that divides the page into sections. These sections are very useful for grouping elements in your HTML together.
<div> </div> allow us to group HTML elements to apply the same styles for all HTML elements inside. We can also style the <div> element as a whole.


###Attributes:
Attributes are content added to the opening tag of an element and can be used in several different ways, from providing information to changing styling. Attributes are made up of the following two parts:
* 		The name of the attribute
* 		The value of the attribute

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dgiqxkq6rtdfwn73eqaf.png)

###Displaying Text:
If you want to display text in HTML, you can use a paragraph or span:
* 		Paragraphs (<p>) contain a block of plain text.
* 		<span> contains short pieces of text or other HTML. They are used to separate small pieces of content that are on the same line as other content.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pi1lz051e6dawwyrcdrk.png)

###Styling Text:
You can also style text using HTML tags.
* 		The <em> tag will generally render as italic emphasis.
* 		The <strong> will generally render as bold emphasis.

###Line Breaks:
The spacing between code in an HTML file doesn’t affect the positioning of elements in the browser. If you are interested in modifying the spacing in the browser, you can use HTML’s line break element: <br>.
The line break element is unique because it is only composed of a starting tag. You can use it anywhere within your HTML code and a line break will be shown in the browser.

###Unordered Lists:
In addition to organizing text in paragraph form, you can also display content in an easy-to-read list.
In HTML, you can use an unordered list tag (<ul>) to create a list of items in no particular order. An unordered list outlines individual list items with a bullet point.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zc0wd9h8l0680ll9ored.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kl43vp1ctswhjsn0y09c.png)

###Ordered Lists:
Ordered lists (<ol>) are like unordered lists, except that each list item is numbered. You can create the ordered list with the <ol> tag and then add individual list items to the list using <li> tags.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v7gl3sk5xyrdm96lnhxv.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oddhy2y7jlrzb436r0dh.png)

###Images:
The <img> tag allows you to add an image to a web page. Most elements require both opening and closing tags, but the <img> tag is a self-closing tag. Note that the end of the <img> tag has a forward slash /. Self-closing tags may include or omit the final slash — both will render properly.

The <img> tag has a required attribute called src. The src attribute must be set to the image’s source, or the location of the image. In this case, the value of src must be the uniform resource locator (URL) of the image. A URL is the web address or local address where a file is stored.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/snkzlde55e6k6aw36eft.png)

###Image Alts:
The alt attribute, which means alternative text, brings meaning to the images on our sites. The alt attribute can be added to the image tag just like the src attribute. The value of alt should be a description of the image.

The alt attribute also serves the following purposes:
* 		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. This is made possible by the description you provide in the alt attribute.
* 		Visually impaired users often browse the web with the aid of screen reading software. 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.
If the image on the web page is not one that conveys any meaningful information to a user (visually impaired or otherwise), the alt attribute should be left empty.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lu7iml68vidff3rujicg.png)

###Videos:
In addition to images, HTML also supports displaying videos. Like the <img> tag, the <video> tag requires a src attribute with a link to the video source. Unlike the <img> tag however, the <video> element requires an opening and a closing tag.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/48mzltnksbqto6fmp50m.png)