ob-vaults/Phoenix/Web dev/html-css/html.md

status: #doc Tags: #html links: html-css Date: 2023-07-28

---

HTML

general knowledge

tag types

html describe content of the page with tags we have 2 type of tags 1- normal tag : have opening and closing tag that we must use

<opening> content </closing>

2- self closing tag this tags are self closing and don not need closing tag can be used in 2 way

<input> or <input />

tag nesting

you can nest tags like this

<div>
	<h1> the title of my grand site </h1>
</div>

Tags

h tags

show titles of web page and order of them as number go up its importance go down or its in lower position in hierarchy there is h1 to h6

<h1>This is title of my doc</h1>

p tag

use for paragraph of text for grouping some text like in novels

<p>lorm ipson kill the piston </p>

a tag

for linking to another page or to somewhere else in our page we use anchor a tag it show test that is inside and when clicked it go to its address

<a href="google.com">google</a> 

a tag attributes

• href : for pointing to where we want to go

<a href="google.com"></a> 

• target : where open this link use "_blank" for opening in new tab

<a target="_blank"></a> 

div tag

short for division . it is generic container tag for grouping "like" things together don't do any thing by it self

<div></div>

lists

list items

<li>first</li>
<li>second</li>

result:

first

second

#### ordered list ```html

1. first
2. second

``` result:

1. first
2. second

#### unordered list

<ul>

<li>first</li>
<li>second</li>

</ul>

result:

• first
• second

Web dev/html-css/button

img

image tag src attribute and optional alt tag for accessibility and google indexing

<img
     src="http://pets-images.dev-apis.com/pets/dog25.jpg"
     alt="an adorable puppy"
     />

result: !Pasted image 20231227110841.jpg

input

Browser inputs. Sometimes you need to gather input from the user

<input type="text" />
<input type="color" />
<input type="file" />
<input type="number" />
<input type="datetime-local" />
<input type="radio" />
<input type="checkbox" />

result:

textarea

Similar to an input but for a lot more text. You'd type long-form responses in here that could linebreaks in it

<textarea></textarea>

result:

select and option

Sometimes you want to limit a user to a certain group of options to select from. What country you're from, what month you were born in, etc.

<select>
  <option value="seattle">Seattle</option>
  <option value="portland">Portland</option>
  <option value="san-francisco">San Francisco</option>
</select>

Seattle Portland San Francisco

tables

Like making a table in Word or Excel. If you have a table of data, this is the best way to display it

Comments

We, as coders, forget what things do. We write things that are really complicated or we know will be difficult to figure out later. Something to keep in mind is that you are mostly writing code for yourself to read later, not for the computer. Be careful of going overboard because comments like <h1>Title of the Article</h1><!-- the title --> aren't useful because it's pretty obvious that's the title

<!-- your comments go here -->

HTML Attribute

attribute modify how elements in html work we also need space between tag name and attribute and for giving attribute value we do it like this

<tagname attribute_name = "value" ></tagname>`

quacks in html

• spaces between elements and extra space inside tag string are ignored

example : this two are same

<p>test test 1234<p>

<p>

test       test     
1234
</p>

---

References