Gå til innhold

Er denne HTML layouten godt bygd opp?

Defo

Av Defo
i Programmering og webutvikling

Anbefalte innlegg

Defo

Defo

Skrevet
Skrevet (endret)

Hei!

 

Å bli klok på hva som kan regnes som god HTML kode/layout er noe jeg finner lite/flertydig informasjon om. Spør derfor om litt tilbakemelding på følgende layout.

 

Er det et godt utgangspunkt for å gå videre til CSS styling?

Hva burde eventuelt endres/gjøres annerledes?

Noen generelle tips?

 

Cheers :)

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
	<title>Lorem ipsum</title>
	<link title="Standard" type="text/css" rel="stylesheet" href="MyStyle1.css">
</head>

<body>

<header>
	<h1>Velkommen</h1>
</header>

<nav>
	<ul>
		<li><a href=#1>Est laborum?</a></li>
		<li><a href=#2>Mollit anim</a></li>
		<li><a href=#3>Officia deserunt </a></li>
		<li><a href=#4>Nulla pariatur</a></li>
	</ul>
</nav>

<section>

	<h2>Est laborum?</h2>
	
<article>	
	<figure>
		<img src="Lilleaker.jpeg" alt="Bilde av Lilleaker">
		<figcaption>Lilleaker området</figcaption>
	</figure>

	<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, seddo eiusmod tempor in cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpaqui officia deserunt mollit animid est laborum. Tempor dolore pariatur. fugiatnostrud id occaecat ea dolore ullamco cillum eiusmod laborum. ex exercitation eu undefined Excepteur dolore Lorem exercitation et sit idaliqua. ex reprehenderit mollit nulla inminim ut ex amet, indeserunt est incididunt
	</p>
</article>

<h2>Mollit anim</h2>

<article>
	<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor in cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tempor dolore pariatur. fugiat nostrud id occaecat ea dolore ullamco cillum eiusmod laborum. ex exercitation eu undefined Excepteur dolore Lorem exercitation et sit id aliqua. ex reprehenderit mollit nulla inminim ut ex amet, in deserunt est incididunt velit voluptate voluptate nostrud Utanim ut dolore non ad.
	</p>
</article>


<h2>Officia deserunt</h2>

	<article>
		<table>
			<thead>
			<tr>
				<th>Arbeidsplass</th>
				<th>Stilling</th>
				<th>Periode</th>
			</tr>
			</thead>

			<tbody>
			<tr>
				<td>Excepteur</td>
				<td>Occaecat</td>
				<td>August 2011 til dags dato</td>
			</tr>
			<tr>
				<td>Cupidatat</td>
				<td>Voluptate</td>
				<td>Mars 2009 til August 2011</td>
			</tr>
			<tr>
				<td>Lorem</td>
				<td>Adipisicing</td>
				<td>Mai 2007 til Mai 2009</td>
			</tr>
			</tbody>
		</table>
	</article>

<h2>Nulla pariatur</h2>

<article>
	<audio controls id="lilith">
		<source src="lilith.mp3" type="audio/mp3">
		Your browser does not support the audio tag
	</audio>

	<audio controls id="shadowsedge">
		<source src="shadowsedge.mp3" type="audio/mp3">
		Your browser does not support the audio tag
	</audio>
</article>

</section>

<footer>
	<div class="footerlinker">
	<a href="https://soundcloud.com/xxxxxxxx">Mut enim ad minim</a>
	<a href="https://www.facebook.com/xxxxxxx">Duis aute irure </a>
	<a href="https://dl.dropboxusercontent.com/xxxxxxxx">Lorem</a>
	</div>
</footer>

</body>
</html>
Endret av Defo
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Defo

Defo

Skrevet
  • Forfatter
Skrevet (endret)

Jeg ser ikke en eneste <div> her, så lurer litt på hvordan du har tenkt å strukturere siden din? Taggene header, article og footer er så vidt jeg vet bare semantiske.

 

Såvidt jeg har forstått, så skal <div> kun brukes der det ikke finnes andre vanlige html tagger (semantiske?) som kan beskrive innholdet bedre, eller?

Endret av Defo
Lenke til kommentar
sunsunsun

sunsunsun

Skrevet
Skrevet (endret)

Jeg ser ikke en eneste <div> her, så lurer litt på hvordan du har tenkt å strukturere siden din? Taggene header, article og footer er så vidt jeg vet bare semantiske.

Man kan style semantiske elementer fint uten problemer. CSS bryr seg ikke hva slags elementer du bruker, så det er ikke noen grunn til å legge en usemantisk tag rundt en semantisk tag.

Endret av elos
Lenke til kommentar
tommyb

tommyb

Skrevet
Skrevet

Jeg ser du bruker tabeller, men det kan også virke som om du bruker tabeller riktig; til å liste ut rader og kolonner i en tabell som skal se ut som en tabell. Tabeller skal ikke bruke til å posisjonere/grafisk layout. Det bruker man altså css til, og da er foretrukket praksis bruke den omtalte <div>-tagen, eller tilsvarende elementer. Men jeg antar altså at det er meningen at dette skal være nettopp en tabell.

 

Jeg antar videre at musikken er essensiell for siden, at dette er en side man kommer til for å høre musikken, siden påtvunget musikk på nettsider ødelegger ethvert positivt inntrykk, i enhver sammenheng, uten unntak, nå og i all oversiktlig framtid.

 

Nøstingen ser rett ut, koden validerer. Innrykkene er gode og leselige bortsett fra der tekstblokken kommer inn, og jeg skjønner godt at du ønsker å ignorere innrykksstrukturen for de to store tekstblokkene. Men husk på at du ikke gjør det samme for resten av tekstinnholdet, så det kan virke litt inkonsekvent. Du kan gjerne bruke kommentarer men på så korte sider er behovet redusert.

 

Siden dette er HTML og ikke en publiseringsløsning, så har du begrensede muligheter for å skille HTML fra innhold, ellers ville det vært et mål i seg selv.

 

Så jeg har ingen endringsforslag, kun disse generelle bemerkingene.

Lenke til kommentar
Defo

Defo

Skrevet
  • Forfatter
Skrevet

Jeg ser du bruker tabeller, men det kan også virke som om du bruker tabeller riktig; til å liste ut rader og kolonner i en tabell som skal se ut som en tabell. Tabeller skal ikke bruke til å posisjonere/grafisk layout. Det bruker man altså css til, og da er foretrukket praksis bruke den omtalte <div>-tagen, eller tilsvarende elementer. Men jeg antar altså at det er meningen at dette skal være nettopp en tabell.

 

Jeg antar videre at musikken er essensiell for siden, at dette er en side man kommer til for å høre musikken, siden påtvunget musikk på nettsider ødelegger ethvert positivt inntrykk, i enhver sammenheng, uten unntak, nå og i all oversiktlig framtid.

 

Nøstingen ser rett ut, koden validerer. Innrykkene er gode og leselige bortsett fra der tekstblokken kommer inn, og jeg skjønner godt at du ønsker å ignorere innrykksstrukturen for de to store tekstblokkene. Men husk på at du ikke gjør det samme for resten av tekstinnholdet, så det kan virke litt inkonsekvent. Du kan gjerne bruke kommentarer men på så korte sider er behovet redusert.

 

Siden dette er HTML og ikke en publiseringsløsning, så har du begrensede muligheter for å skille HTML fra innhold, ellers ville det vært et mål i seg selv.

 

Så jeg har ingen endringsforslag, kun disse generelle bemerkingene.

 

Takk for god tilbakemelding :)

Lenke til kommentar
Yawa

Yawa

Skrevet
Skrevet

Ved første øyekast ser det jo helt kurrant ut.

<table> og <audio> mener jeg kan omsluttes av div-tags da article-taggen er beregnet for nettopp artikler. Disse elementene kan naturligvis forekomme inni en artikkel, men det jeg prøver å si - skriver - er at sånn som det er akkurat nå, så er det kun tabellinnhold og lyd - hvilket gjør en div-tag mer naturlig i mine øyne. Just a personal opinion. Forøvrig er det ikke noe behov for å plassere tabellen inni noen annen tag heller - med mindre du ikke trenger å style området rundt tabellen naturligvis...

 

Ut over det, som sagt, så syns jeg det hele ser ryddig å greit ut.

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...