Verschil tussen DIV en SPAN

en zijn HTML-tags die elementen in HTML-code definiëren.

HTML (Hypertext Markup Language) is gestructureerde code die wordt gebruikt voor het samenstellen en weergeven van de webpagina's die we online bezoeken, elke dag, op elk apparaat.

Andere technologieën en programmeertalen kunnen worden geïntegreerd met HTML om dynamische en geavanceerde functies op een website te bieden.

HTML begrijpen

Hypertext Markup Language (HTML) is een veel gebruikte opmaaktaal en verwijst naar de structuur en code 'achter' een webpagina, weergegeven in een webbrowser.

HTML is een tekstbestand met specifieke code (syntaxis) om de stijl, inhoud, opmaak en indeling van een pagina te definiëren. De markup term geeft aan dat de tekst / code wordt voorbereid voor verwerking en presentatie, d.w.z. op een webpagina, in een webbrowser.

Het World Wide Web Consortium (W3C) [i] herkent HTML als een formele opmaaktaal in de ontwikkeling van webpagina's en daarom wordt HTML door de meeste browsers ondersteund. Webpagina's kunnen dus worden ontwikkeld in een erkende taal, gemakkelijk te interpreteren door verschillende browsers om de pagina weer te geven zoals bedoeld door de ontwerper.

De huidige versie die nog steeds wordt gebruikt, is HTML4, maar wordt langzaam uitgefaseerd, omdat HTML5 meer ondersteuning en acceptatie krijgt voor dynamische en responsieve webpagina's.

Responsiviteit wordt een fundamenteel onderdeel van webontwikkeling om een ​​eenvoudigere, meer dynamische gebruikerservaring te bieden, die moet worden ondergebracht op meerdere apparaten zoals smartphones, tablets en laptops..

Cascading Style Sheets (CSS) wordt een integraal onderdeel van het bouwen van dynamische en responsieve pagina's. Het is een apart bestand dat attributen definieert voor elk element zoals lettertype, kleur, uitlijning - dus de ontwikkelaar hoeft niet de stijl van het element aan te duiden elke keer dat het in de HTML-code wordt gebruikt.

Basisstructuur van HTML

Om het meeste uit elke ontwikkeltaal te halen, zijn het vasthouden aan de standaard bestandsstructuur en het overwegen van het beste syntaxisgebruik essentieel bij het leveren van stabiele, doelgerichte en visueel aantrekkelijke webinhoud..

Een HTML-pagina heeft een structuur die wordt gedefinieerd door elementen (ook wel tags genoemd). Bij het schrijven van de HTML-code worden deze elementen in paren weergegeven - dit betekent dat elke tag een opening en een sluiting nodig heeft. Een begin en een einde.

Een element wordt geopend met de syntaxis: en afgesloten met.  De / schuine lijn geeft het einde van de definitie van dat element aan.

De elementattributen en -inhoud worden tussen deze twee punten gedefinieerd.

De minimale elementen vereist voor een HTML-bestand zijn de definities, (alleen HTML4) en tags.

• DOCTYPE-definitie

De definitie (DTD) moet eerst worden gedeclareerd als de eerste tag in een HTML-bestand, dus wanneer de pagina wordt verwerkt, weet de webbrowser welk type bestand hij is en kan hij daarom de pagina correct interpreteren en weergeven.

In HTML4 zijn er variaties op de DTD (afhankelijk van de paginakenmerken en -elementen), maar de meer typische uitspraken zouden als volgt zijn opgenomen:

of

De DTD in HTML5 is veel eenvoudiger:

· HTML, HEAD en BODY

• De tag geeft aan dat het een HTML-bestand is en dit is de hoofdmap van het HTML-element dat alle andere daaropvolgende elementen bevat die daarin zijn gedefinieerd; en een taalkenmerk wordt aanbevolen als beste werkwijze; bijvoorbeeld:

• Dit is vereist in HTML4, maar niet verplicht in HTML5. Het is een element dat andere elementen bevat die relevant zijn voor dit documentonderdeel, zoals de titel, referentiescripts, het definiëren van stijlen en metadata. De gesloten tag moet worden gebruikt voordat u de 
• Het element bevat de hoofdinhoud voor de pagina, inclusief tabellen, afbeeldingen, lijsten, enz. Nadat de tag is gesloten, kan het element nu worden beëindigd. Het gebruik van het nieuwe HTML5-element is optioneel voor de pagina of in een ander deel van de inhoud.

HTML-elementen

HTML5 heeft nieuwe elementen geproduceerd voor het gemak van ontwikkeling en ontwerp, en het heeft ook elementen verwijderd die in HTML4 worden gebruikt. De lijst met verschillen tussen HTML4 en HTML5 wordt gepubliceerd door het World Wide Web Consortium (W3C) [ii].

HTML DIV TAG

Samen met de verbeteringen en nieuwe elementen, in combinatie met de CSS-voordelen, kunnen bepaalde elementen op verschillende, betere manieren dan voorheen worden gebruikt, en webpagina's worden sneller, meer functies rijk en mooi om naar te kijken! met CSS, gebruikt met HTML5 kan bepaalde elementen die overmatig werden gebruikt vervangen, zoals .

De tag is populair bij het scheiden van inhoud op een pagina. Bij het maken van dit element voegt het automatisch een pauze in
om de tekst of inhoud bij elkaar te houden, in plaats van tekst over de pagina te laten gaan.

Met toegankelijkheid van de website en zoekmachine-optimalisatie worden technieken steeds meer een wetenschap en aanbevolen door de WC3 om niet altijd terug te gaan naar gebruik in HTML5.

Als voorbeeld voor een net gestructureerd, maar eenvoudig blogformaat, overweeg de nieuwe HTML5-elementen met CSS in plaats van het element te gebruiken; gebruik het element voor hoofdinhoud, het element om inhoud op de pagina, koptekst of voettekst (overal!) te markeren of te scheiden en het element kan worden gebruikt om een ​​menu vast te houden of koppelingen te groeperen om vanaf de pagina te bladeren.

Deze nieuwe elementen identificeren het type inhoud gemakkelijk met HTML5. De tag wordt echter ook met CSS gebruikt om responsieve websites te maken.

Door elk element te maken (met zijn 'eigen id of klasse), kan het CSS-bestand worden gedefinieerd om elk element te manipuleren.

Het HTML-voorbeeld hieronder toont een voorbeeld van het gebruik van meerdere elementen:

Mijn voorbeelden

De elementen kunnen verschillende attributen hebben, met name verschillende groottes voor responsieve interactie, afhankelijk van de schermgrootte van het apparaat dat wordt gebruikt.

Hier is een voorbeeld van hoe elk element kan worden gestileerd in het bijbehorende CSS-bestand van de HTML - door naar elke tag te verwijzen.

#Header

Breedte: 800 pixels;

height: auto

margin-left: auto;

margin-left: auto;

#Aanbevolen

Hoogte: 150px;

Background-color: #CCC;

HTML SPAN TAG

Het element is een inline element en breekt niet in lijnen, tenzij de pauze
tag wordt gebruikt en de gedefinieerde tekst (inhoud) tussen de tags openen en sluiten wordt weergegeven als een regel (standaard zonder andere elementen te gebruiken).

Inline-elementen zijn tekstelementen in het HTML-bestand en kunnen worden gedefinieerd binnen de lijn van een ander element.

Zoals, het element heeft nee betekenis voor optimale referenties. Het toont in feite de element-inhoud zoals deze is, maar alle exemplaren kunnen in CSS worden gedefinieerd voor styling als ze correct zijn getagd en verrijkt met andere attributen, of gemanipuleerd met JavaScript.

In het onderstaande voorbeeld markeert de blauwe tekst hoe het bereikelement kan worden genest als een inline-element met verschillende kenmerken dan het bovenliggende element - de alinea p>:

Om het voorbeeld te openen, klikt u op het pictogram onderaan de pagina.

Wanneer bekeken in een webbrowser, wordt de tekst in het bovenstaande element weergegeven in een ander lettertype dan de alinea om te benadrukken waar de gebruiker moet klikken om toegang te krijgen tot het voorbeeld.

Merk op dat er geen verschillen zijn tussen HTML4 en HTML5.