Lezione 18 - Corso Avanzato Html

Main Elemento Semantico in Html

Main

Main (pricipale). E' un elemento semantico poco usato.

Con main si dovrebbero racchiudere le informazini principali. Quelle informazioni o testi che reputiamo siano importanti in una pagina web.
Il suo contenuto può essere usato una sola volta e non ripetuto in altre pagine del sito, e non può contenere al suo interno elementi tipo: article, aside, header, nav, footer.

Non altera la struttura del documento perché non introduce sezioni o sottosezioni.

Con questa lezione chiudo l'argomento sugli Elementi Semantici ed approfitto di questa lezione per collegare un foglio di stile css (cosa che voi, lezione dopo lezione, dovreste aver già fatto) per abbellire ed avere la struttura di una piccola pagina web.

Vi metto il codice e di seguito un foglio di stile css:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Aside</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="percorso_al_file.css">
 </head>
 <body>
   <header>
      <h1>Mio Sito.it</h1>
   </header>
   <nav>		
     <a href="">Link 1</a>
     <a href="">Link 2</a>
     <a href="">Link 3</a>
     <a href="">Link 4</a>
   </nav>
   <article>
     <header>
       <h2>Titolo e intestazione dell'articolo interno alla pagina</h2>
     </header>
     <main>
       <p> Testo importante racchiuso in main. Testo importante racchiuso in main. Testo importante racchiuso in main. Testo importante racchiuso in main. Testo importante racchiuso in main.</p>
       <p> Altro testo importante racchiuso in main. Altro testo importante racchiuso in main. Altro testo importante racchiuso in main. Altro testo importante racchiuso in main. Altro testo importante racchiuso in main. Altro testo importante racchiuso in main.</p>
     </main>
	<p>Testo dell'articolo. Testo dell'articolo. Testo dell'articolo. Testo dell'articolo. Testo dell'articolo.</p>
     <footer>
       <p>Pubblicato il 18 Marzo 2018 da <strong>Antonio Fiordaliso</strong> </p>
     </footer>
   </article>
   <aside>
     <h2>Titolo di aside</h2>
     <p>Testo che è contenuto nel tag aside. Testo che è contenuto nel tag aside. Testo che è contenuto nel tag aside. </p>
   </aside>
   <footer>
       <strong>mail.....@......</strong>
   </footer>
 </body>                
</html>                    
Foglio di stile css che potete chiamare come volete, l'importante che lo abbiate salvato con estensione .css e che lo abbiate richiamato con lo stesso identico nome in <link rel="stylesheet" type="text/css" href="percorso_al_file.css">


		header {
			background-color: #CCCCFF;
			padding: 20px;
			color: red;		
		}
		header h1 {
			font-size: 3em;
			font-style: italic;
			font-family: georgia;
		}
		header h2 {
			background-color: #D0F0C0;
			margin-left: 0px;
			margin-top: 0px;				
		}
		article header {
			background-color: #D0F0C0;
			margin-left: -20px;
			height: 20px;
			border-bottom: 3px solid black;

		}
		nav {
			background-color: #FFC0CB;
			padding: 8px;
		}
		main {
			font-size: 110%;
			font-style: italic;
			font-family: georgia;
		}
		article {
			background-color: #D0F0C0;
			height: 380px;
			width: 70%;
			float: left;
			margin-top: 0px;
			padding-left: 20px;
			padding-top: 10px;
			text-decoration: justify;
		}
		a {
			margin-right:20px;
			margin-left: 12px;
		}

		article	footer  {
			height: 30px;
			padding: 10px;
			background-color: #D0F0C0;
			margin-left: -20px;
			margin-top: 30px;
			text-align: left;
			font-style: italic;
			border-top: 3px solid black;
		}
		aside {
			background-color: orange;
			padding: 6px;
			margin-left: 1px;
			width: 25%;
			float: right;

		}
		footer {
			background-color: #CCCCFF;
			padding: 8px;
			margin-top: 417px;
			text-align: right;
			font-style: italic;
		}