Skillnad mellan DIV och SPAN

och HTML-taggar som definierar element i HTML-kod.

html (Hypertext Markup Language) är strukturerad kod som används för att bygga och visa webbsidor som vi besöker online, varje dag, på vilken enhet som helst.

Annan teknik och programmeringsspråk kan integreras med HTML för att ge dynamiska och avancerade funktioner på en webbplats.

Förstå HTML

Hypertext Markup Language (HTML) är ett allmänt använt markeringsspråk och refererar till strukturen och koden "bakom" en webbsida, som visas i en webbläsare.

HTML är en textfil med specifik kod (syntax) för att definiera en sidas stil, innehåll, layout och format. De Markup termen indikerar att texten / koden förbereds för bearbetning och presentation, dvs på en webbsida, i en webbläsare.

World Wide Web Consortium (W3C) [i] erkänner HTML som ett formellt språket i webbutveckling, och därför stöds HTML av de flesta webbläsare. Så, webbsidor kan utvecklas på ett erkänt språk, tolkas enkelt av olika webbläsare för att göra sidan som avsedd av designern.

Den nuvarande versionen som fortfarande används är HTML4, men den sakta fasas ut eftersom HTML5 får mer stöd och antagande för dynamiska och mottagliga webbsidor.

Responsiveness blir en grundläggande komponent i webbutveckling för att ge en enklare och mer dynamisk användarupplevelse, som måste tillgodoses på flera enheter som smartphones, tabletter och bärbara datorer.

Cascading Style Sheets (CSS) blir en integrerad del för att bygga dynamiska och responsiva sidor. Det är en separat fil som definierar attribut för varje element som typsnitt, färg, anpassning - så utvecklaren har inte angett elementets stil varje gång den används i HTML-koden.

Grundläggande struktur av HTML

För att få ut det mesta av vilket utvecklingsspråk som helst som följer den vanliga filstrukturen och överväger bästa syntaxanvändning är det viktigt att leverera stabilt, målmedvetet och visuellt tilltalande webbinnehåll.

En HTML-sida har en struktur som definieras av element (även kallad taggar). När du skriver HTML-koden visas dessa element i par - det betyder att varje tagg behöver en öppning och en stängning. En start och ett slut.

Ett element öppnas med syntaxen: och stängt med.  De / skrå linje indikerar slutet på elementets definition.

Elementattributen och innehållet definieras mellan de två punkterna.

De minsta element krävs för en HTML-fil är definitionen,, (endast HTML4) och taggar.

• DOCTYPE Definition

Definitionen (DTD) måste först deklareras som den första taggen i en HTML-fil, så när sidan behandlas vet webbläsaren vilken typ av fil det är och kan därför tolka och visa sidan korrekt.

I HTML4 finns det variationer av DTD (beroende på sidattribut och element) men de mer typiska uttalandena skulle inkluderas som:

eller

DTD i HTML5 är mycket enklare:

· HTML, HEAD och BODY

• Etiketten indikerar att det är en HTML-fil och det här är roten till HTML-elementet som innehåller alla andra efterföljande element definierade inom det; och med ett språkattribut rekommenderas som bästa praxis; till exempel:

• Det krävs i HTML4, men inte obligatoriskt i HTML5. Det är ett element som innehåller andra element som är relevanta för den här dokumentdelen, till exempel titeln, referensskript, definition av format och metadata. Den slutna taggen måste användas innan du definierar 
• Elementet innehåller huvudinnehållet för sidan, inklusive tabeller, bildtext, listor etc. När taggen är stängd kan elementet nu sluta. Användning av det nya HTML5-elementet är valfritt för sidan eller i en annan del av innehållet.

HTML-element

HTML5 har skapat nya element för att underlätta utveckling och design, och det har också tagit bort element som används i HTML4. Listan över skillnader mellan HTML4 och HTML5 publiceras av World Wide Web Consortium (W3C) [ii].

HTML DIV TAG

Tillsammans med förbättringar och nya element, i kombination med CSS framsteg, kan vissa element användas på olika, bättre sätt än tidigare, och webbsidor blir snabbare, mer funktionrika och vackra att titta på! med CSS, som används med HTML5, kan ersätta vissa element som användes överdrivet, till exempel .

Taggen är populär när segregering av innehåll på en sida. När du skapar det här elementet infogar det automatiskt en paus
för att hålla texten eller innehållet ihop, istället för att gå på text över hela sidan.

Med tillgänglighet på webbplatsen och sökmotoroptimering blir tekniker ganska vetenskapliga och rekommenderas av WC3 att inte alltid återgå till att använda i HTML5.

Som ett exempel på ett snyggt strukturerat, men enkelt bloggformat, överväga de nya HTML5-elementen med CSS istället för att använda elementet; använd elementet för huvudinnehåll, elementet för att markera eller separera innehåll på sidan, rubriken eller sidfoten (var som helst!) och elementet kan användas för att hålla en meny eller grupplänkar för att bläddra från sidan.

Dessa nya element identifierar enkelt innehållstypen med hjälp av HTML5. Taggen används också med CSS för att skapa responsiva webbplatser.

Skapa varje element (med eget ID eller klass) kan CSS-filen definieras för att manipulera varje element.

HTML-exemplet nedan visar ett exempel på att använda flera element:

Mina exempel

Elementen kan ha olika attribut, specifikt olika storlekar för responsiv interaktion beroende på skärmens storlek på den enhet som används.

Här är ett exempel på hur varje element kan stylas i HTML: s motsvarande CSS-fil - genom att referera till varje tagg.

#Header

bredd: 800px;

höjd: auto

margin-left: auto;

margin-left: auto;

#Featured

höjd: 150px;

Bakgrundsfärg: #CCC;

HTML SPAN TAG

Elementet är ett inlineelement och bryter inte in i raderna om inte pausen
tagg används och den definierade texten (innehåll) mellan de öppna och stänga taggarna visas som en linje (som standard utan att använda andra element).

Inline-element är textelement i HTML-filen och kan definieras i raden av ett annat element.

Liksom, elementet har nej menande för optimal referens. Det visar i grunden elementets innehåll som det är men alla instanser kan definieras i CSS för styling om de taggats korrekt och berikat med andra attribut eller manipuleras med JavaScript.

I exemplet nedan framhäver den blå texten hur spänningselementet kan näts som ett inlineelement med olika attribut än dess grundelement - stycket p>:

För att öppna exemplet, klicka på ikonen längst ner på sidan.

När du tittar i en webbläsare visas texten i elementet ovan i ett annat teckensnitt till stycket för att betona där användaren måste klicka för att komma åt exemplet.

Observera att det inte finns några skillnader mellan HTML4 och HTML5.