Guess the source code

Round #1

Do not forget to buy milk today.
Do not forget to buy <mark>milk</mark> today.

Round #2

progress:  60%
progress:  25%
							
progress:  60%

								
progress:  25%

Round #3

color:   
							color: <input list="colors" name="colors">
								<datalist id="colors">
							   	<option value="red">
							   	<option value="green">
							   	<option value="blue">
								</datalist>

Round #4

Click here for more details
More details it is!
<details>
							  <summary>Click here for more details</summary>
							  <p>More details it is!</p>
							</details>

Round #5

0100 +  = 

						   0100
						   + 
						   =

Round #6


							
								
								
								
							
							
colorfruit #1fruit #2

							
yellowbanannalemmon

							
greenappleavocado
							

						
<table>
							 	<colgroup>
							   	<col style="background: #999"  />
							   	<col />
							   	<col style="background: #900"  />
							 	</colgroup>

							  <tr><th>color</th><th>fruit #1</th><th>fruit #2</th></tr>
							  <tr><td>yellow</td><td>bananna</td><td>lemmon</td></tr>
							  <tr><td>green</td><td>apple</td><td>avocado</td></tr>
						</table>

What's the point?

Know your html

What's the purpose of html?

HTML purpose is to give meaning for content.
Or for short: semantics.

Not style

Ok, but how about <b> and <i>?

Hello to <strong> and <em>!

  • <strong> represents a span of text with strong importance
  • <em> represents a span of text with emphatic stress

Other fun tags

  • time - defines a date/time
  • wbr - possible line break
  • del/ins - defines deletion/insertion
  • figure + figcaption - figure titles for images, tables, etc.
  • picture + source - multiple sources of same image
  • button + formaction/form - submit outside form

kthxbai