Basis HTML-tags. Wat zijn HTML-tags en welke soorten tags bestaan ​​er?

Hoe vervang ik de verouderde HTML-tag? In de meeste gevallen zijn CSS Cascading Style Sheets voldoende. Er zijn ook alternatieven voor tags die niet worden gebruikt in de nieuwe specificatie binnen HTML. De onderstaande tabel toont verouderde HTML-tags met opties om deze te vervangen.

In het leven van elke copywriter komt er een fase waarin hij vertrouwd raakt met html-tags. Meestal gebeurt dit spontaan en lijkt het op een verzoek van de klant om ‘de tekst gereed te maken voor publicatie’. Dit betekent dat u in het artikel koppen, paragrafen, belangrijke plaatsen en lijsten moet markeren, maar niet met Word-mogelijkheden, maar met een speciale html-taalcode. Tags voor een copywriter helpen hierbij. De lijst die nodig is voor het werk is meestal klein, maar het is voldoende om tekst op te maken met standaardvereisten. Wat zit er in de html-tags die nodig zijn voor een copywriter? (Als je te lui bent om te lezen, scroll dan naar beneden - er is een eenvoudige en duidelijke thematische infographic over html-tags!)

De copywriter stelt traditionele vragen. En ze beginnen allemaal met de woorden “welke tag wordt gebruikt om te specificeren...”:

• titel;
• paragraaf;
• vetgedrukte tekst;
• cursief;
• lijst met opsommingstekens/ongelabeld/

Dit alles geeft pit aan de technische taak en stimuleert het verwerven van nieuwe kennis. De situatie wordt nog erger als het de taak is om een ​​vetgedrukte teksttag te gebruiken om de aantrekkelijkheid van de sleutel in de PS te vergroten. Maar dit alles kan heel eenvoudig worden opgelost, waar we nu mee zullen omgaan.

Tags voor het maken van kopjes worden weergegeven door de elementen h1-h6. Ze kregen hun brief van de Engelse Header (heading). Gebruik de volgende code om het vereiste type header in te stellen en de betekenis ervan voor de PS te benadrukken:

Koers h1 Koers h2 Koers h3 Koers h4 Koers h5 Koers h6

Op de website zal het er zo uitzien.

De h1-rubriek heeft de meeste betekenis – en zichtbaarheid –. Het wordt gebruikt als de titel van een bericht en wordt slechts één keer gebruikt. Voor ondertitels in de tekst worden h2 en h3 aanbevolen. Ze helpen de betekenis van het beschouwde materiaal te benadrukken en verdelen het artikel in informatieniveaus.

Headers h4-h6 worden praktisch niet gebruikt, maar er is soms vraag naar om logische blokken en belangrijke fragmenten te benadrukken.

Voor grote artikelen kunt u het beste de kopjes h1-h3 gebruiken, voor kleine artikelen h1 en h2.

Gestructureerde goede tekst heeft altijd één of zelfs meerdere lijsten. Volgens hun uiterlijk zijn de lijsten:

Maar niet alle Word-ontwerpen zijn geschikt voor publicaties op de site, dus het is de moeite waard om te leren hoe u lijsten op de juiste manier opmaakt in HTML-tags.
De lijsttag met opsommingstekens ziet er als volgt uit:

Tag een niet-getagde lijst als volgt:

Bovendien heeft elk lijstelement zijn eigen HTML-frame:

Het blijkt dat om een ​​lijst met opsommingstekens in de tekst te markeren met behulp van HTML-code, je beide soorten gebruikte elementen moet combineren. Het zal er als volgt uitzien:

Voor een ongemarkeerde lijst is het vergelijkbaar:

• Lijstitem
• Lijstitem
• Lijstitem
• Lijstitem

We hebben de lijsten gesorteerd. Wij kunnen verder.

Als je uitzoekt met welke tag je de tekst correct kunt opmaken, kom je voor elk geval vrijwel onmiddellijk twee code-opties tegen. Dit zorgt voor verwarring bij niet-programmeurs en de vraag: welke tag heeft de klant precies nodig.

Het is heel eenvoudig! Tags bieden fysieke en logische opmaakopties. De eerste zijn nodig voor gebruikers, de tweede voor zoekmachines. "Zoekmachines", die de html-code voor zichzelf geschikt vinden, houden rekening met het geselecteerde gebied en gebruiken de ontvangen informatie bij het rangschikken, dus het markeren van tekst met behulp van logische opmaak zal geen vergissing zijn.

Het gebruik van HTML-tags maakt het mogelijk om zoekmachines tevreden te stellen en de tekst visueel te markeren voor de gebruiker. Wat heeft meer prioriteit, beslis zelf:

Een zin vetgedrukt markeren voor PS en gebruikers Een zin vetgedrukt markeren voor gebruikers Cursieve zinnen voor PS en gebruikers Cursief een zin voor gebruikers

Ik heb een groot en zeer controversieel artikel over het onderwerp vetgedrukte tags, genaamd.

Als een van de programmeurs zich plotseling over het onderwerp buigt, haast ik me om nogmaals op te merken dat de recensie voor copywriters is: hoe tags te plaatsen, wat ze zijn en wat belangrijk is om te overwegen bij het kiezen. En ten slotte was er nog een populaire html-code nodig om alinea's te markeren. Dit

De openingstag wordt vóór het begin van de alinea geplaatst en de slottag aan het einde. Als een paragraaf eindigt met een lijst, dan
wordt geplaatst na alle tags die voor de lijst worden gebruikt.

Welnu, enkele eenvoudige thematische infographics aan het eind:

Toen de discussie over het onderwerp in de commentaren begon, gaf de Club van Succesvolle Copywriters interessante feedback op de infographics en het artikel. Hier is een screenshot van de mening van een gezaghebbende deelnemer aan de discussie.

Lees: 3.365

In HTML wordt alles wat u in een HTML-document schrijft, op het browserscherm weergegeven als vaste tekst, dat wil zeggen dat de browser regeleinden negeert en verschillende spaties die u achter elkaar typt, worden vervangen door één.

Tags zijn besturingsopdrachten die zijn uitgevonden om tekst op te maken, d.w.z. tags vertellen de browser precies hoe het gedeelte van de tekst in de tags moet worden weergegeven. Om een ​​tag te maken, typt u HTML-code tussen de punthaken. Deze is alleen bedoeld voor browsers. Bezoekers van de site zien geen tags.

Zoals hierboven vermeld, beginnen alle tags met een hoekbeugel< и заканчиваются угловой скобкой >. Het openingshoekhaakje wordt gevolgd door de naam van de tag (opdracht).

Een tag is bijvoorbeeld bedoeld om tekst te benadrukken; browsers geven dergelijke tekst cursief weer. Wanneer de browser deze tag tegenkomt, schakelt hij over naar het cursief opmaken van de tekst na de tag.

Laten we eens kijken naar een voorbeeld:

Deze tekst is normaal. Deze tekst is cursief gedrukt.

De tag wordt de start- of openingstag genoemd, wat betekent dat de browser een specifiek commando heeft toegevoegd (in dit geval cursief geschreven). De meeste tags hebben een paar in de vorm van een afsluitende tag die de opdracht uitschakelt.

De afsluitende tag ziet er hetzelfde uit als de starttag, maar begint met een schuine streep. De eindtag voor cursief is dus .

Laten we eens kijken naar een voorbeeld:

Deze tekst is normaal. Aandacht! Cursief. Dit is opnieuw een normaal lettertype.

Zoals u wellicht heeft gemerkt, analyseert de browser het HTML-document opeenvolgend op zoek naar opdrachten (tags) en past verschillende opties voor tekstopmaak toe of schakelt deze uit. De browser geeft opgemaakte tekst (alles wat geen tag is) in zijn venster weer.

Hieronder vindt u voorbeelden van eenvoudige HTML-tags, met uitleg over het gebruik ervan, evenals voorbeelden van hoe ze in een HTML-document kunnen worden gebruikt.

Er is een speciale tag voor het specificeren van koppen in HTML. Er zijn zes niveaus van kopjes in HTML, variërend van die voor de belangrijkste aankondigingen tot die voor de minst belangrijke.

De HTML-taal is gebaseerd op het concept van een tag. label- label, etiket). Tags staan ​​tussen punthaken (< >) en vormparen - containers (openingstag en sluitingstag). De container van een HTML-document bestaat bijvoorbeeld uit een paar tags en . De webpagina bevat containers die verantwoordelijk zijn voor de documenttitel (head) en die aanvullende informatie bevatten, evenals containers die verantwoordelijk zijn voor de documentinhoud zelf (body). Ze worden weergegeven in de figuur.

Het HTML-document bevindt zich dus in een container, de koptekst bevindt zich in een container en de inhoud van het document bevindt zich in een container. De container, gelegen in de header (container), bevat de tekst die op de bovenste regel van het browservenster verschijnt. Tags die codering, trefwoorden voor webpagina's bevatten, evenals code voor het verbinden van CSS-cascading stylesheet-bestanden, javascript, VBScript, enz. kunnen ook aan de headercontainer worden toegevoegd.

Een voorbeeld van een eenvoudige HTML-pagina die alleen basistags bevat:

Paginatitel Inhoud van een eenvoudige pagina

Het resultaat van deze code wordt weergegeven in de afbeelding.

Zoals u in het voorbeeld kunt zien, wordt de tekst “Inhoud van een eenvoudige pagina” weergegeven in gewone tekst. Om deze tekst op te maken, moet u speciale tags gebruiken. Een voorbeeld van het gebruik van opmaaktags wordt weergegeven in de afbeelding.

Om het lettertype, de kleur en de grootte te wijzigen, gebruikt u een tag met de parameters “face”, “color” en “size”. Om bijvoorbeeld het lettertype "arial" in rode kleur en maat 14 in te stellen, moet u de volgende code schrijven:

Maak de tekst op

Gebruik een tag om een ​​alinea in de tekst te markeren

Elke tekstparagraaf wordt meestal in een container geplaatst. Om een ​​titel te maken, worden de tags , , , , , gebruikt.

Containers en worden gebruikt om lijsten in de hoofdtekst van het document te vormen. Bovendien vormt de tag een genummerde lijst, de tag

- Lijst met opsommingstekens en in tags
• lijstelementen worden geplaatst. Een voorbeeld van code voor het weergeven van lijsten, gepresenteerd in de vorm van genummerde lijsten en lijsten met opsommingstekens, wordt weergegeven in de afbeelding.

  

  Om twee of meer webpagina's met elkaar te verbinden, worden hyperlinks gebruikt, waarvan de creatie de tag gebruikt . Bovendien gebruiken hyperlinktags extra attributen waarmee u naar een andere webpagina kunt gaan of binnen een bepaalde pagina kunt bewegen. Het is raadzaam om de tweede methode te gebruiken in een groot document dat uit meerdere semantische secties bestaat.

  Een voorbeeld van het gebruik van hyperlinks wordt weergegeven in de afbeelding.

  

  Wanneer u de URL van een andere pagina opgeeft, moet u het volledige absolute pad naar de pagina “volledig pad/map/pagina” of het relatieve pad (ten opzichte van deze pagina) “map/pagina” opgeven. Met de parameter ‘target’ kunt u een webpagina openen in een nieuw of bestaand browservenster.

  Gebruik de tag om een ​​afbeelding in een webpagina in te voegen met parameters src (pad naar de afbeelding), breedte (afbeeldingsbreedte), hoogte (afbeeldingshoogte), rand (frame rond de afbeelding). Voorbeeldcode voor het invoegen van een afbeelding:

  

  Vaak is het bij het maken van webpagina's nodig om een ​​achtergrondkleur of achtergrondafbeelding in te stellen. Gebruik hiervoor de attributen van de tag “bgcolor” of “background-image”. Voorbeeld van het invoegen van een achtergrondkleur:

  Voorbeeld van het invoegen van een achtergrondafbeelding:

  De opgegeven attributen kunnen niet alleen voor de tag worden gebruikt, maar ook voor tabel-, gebieds- en andere tags, die in de volgende onderwerpen worden besproken.

  Een tag is een speciaal gereserveerd woord tussen punthaken (bijvoorbeeld ). Een tag is het hoofdbestanddeel van HTML: de code begint ermee, eindigt ermee en de informatie die op de webpagina wordt weergegeven, bevindt zich in de tags. Het wordt aanbevolen om ze in kleine letters te schrijven, dat wil zeggen in gewone kleine letters: niet, maar.

  Wat zijn de soorten tags?

  De meeste HTML-tags zijn gepaard: er is een openingstag (bijvoorbeeld ) en een sluitingstag, die zich van de openingstag onderscheidt door een schuine streep (/) na de eerste punthaken (bijvoorbeeld ). Alles wat zich binnen een paar tags bevindt, wordt hun inhoud genoemd.

  Inhoud Tekst die binnen deze tags wordt geplaatst, wordt vetgedrukt

  Er zijn ook ongepaarde (enkele) tags, deze worden tags genoemd. In tegenstelling tot gekoppelde tags hoeven ze niet te worden gesloten, omdat ze niet met de inhoud werken, maar op zichzelf een bepaalde functie vervullen. Voorbeeld van één tag -
  . Het zorgt ervoor dat de tekst doorloopt naar de volgende regel.

  Als we parallellen trekken met de Russische taal, kunnen we zeggen dat gepaarde tags aanhalingstekens of haakjes zijn die de eigenschappen van de tekst die ze bevatten beïnvloeden (probeer de aanhalingstekens niet op tijd te sluiten), en afzonderlijke tags (tekens) zijn leestekens ( uitroepteken, vraag of punt).

  Elke tag bestaat uit:

  • Open hoekbeugel (< ).
  • Een speciaal woord (tagnaam). Bijvoorbeeld hr , iframe , b .
  • Sluithoekbeugel (> ).
  Basis HTML-tags

  Omdat tags de basis vormen van de opmaaktaal, is het niet verrassend dat er nogal wat van zijn. Laten we eens kijken naar de belangrijkste, belangrijkste tags.

  • - een enkele tag met een opmerking. Een commentaar is tekst die niet door de browser wordt verwerkt. Je kunt in de tag schrijven wat je wilt, zelfs andere tags - ze zullen niet werken, ze zullen niet op het scherm verschijnen. Ontwikkelaars geven commentaar op de code om het voor andere webmasters gemakkelijker te maken deze te begrijpen, of zodat ze deze na lange tijd zelf snel kunnen begrijpen.
  • , , , , zijn tags die aanwezig zouden moeten zijn in elk fatsoenlijk HTML-document (zie voor meer details "Een website maken in Kladblok").
  • - de tag bevat aanvullende informatie voor browsers en zoekmachines. Daarin kunt u trefwoorden, paginabeschrijving, documentcodering, auteursnaam, enz. schrijven.
  • bevat een link naar het scriptbestand of de code zelf.
  • - een tag die de stijl van het document en/of de elementen ervan bepaalt met behulp van CSS. Een HTML-document kan veel tags bevatten die verschillende stijlen voor verschillende delen van de pagina definiëren.
  • - het tegenovergestelde, een aanvulling daarop. De tag specificeert de “header” (titel) van een sectie of de hele pagina.
  • slaat de “benen” van een site of sectie op. Daarin kunt u ondersteunende informatie, copyright, contactgegevens, enz. plaatsen.
  • bevat de hoofdinhoud van de pagina. Noch de header, noch het menublok, noch de ‘poten’ van de site, maar waarvoor de pagina is gemaakt. Op de pagina die u nu leest, zou dit artikel bijvoorbeeld binnenin moeten staan.
  • ontworpen voor het maken van koppelingen. Links vormen de basis van hypertekst en daarom is dit artikel aan hen gewijd.
  • nodig om afbeeldingen aan een webpagina toe te voegen (tot uw dienst is gewijd aan deze actie).
  • ,
    , - , , ,

    , , , en andere tekstopmaaktags vormen een grote groep HTML-tags; deze worden besproken in het artikel “Tekst opmaken in HTML”.

  • - blokelement. De tekst binnenin is opgemaakt met behulp van CSS (cascading style sheets, het onderwerp van het tweede deel van de tutorial).
  • . Je hebt een paragraaf

    of blokkeren De tekst daarin is in dezelfde stijl vormgegeven, maar je wilt er, zonder de structuur te verstoren, voor zorgen dat meerdere woorden een verschillende lettergrootte of kleur hebben. Voor dergelijke situaties is de tag bedoeld.

  • ,
    ,
    • - lijsttags. Gemerkt, genummerd - het werk van deze tags. Er zijn ook lijsten met definities waarvoor de tags verantwoordelijk zijn, maar u zult in detail over alle zes hiervan leren in het artikel “Lijsten maken”.
    • , , , worden gebruikt bij het maken van tabellen en worden in detail besproken in een apart artikel.
      - een tag die interactiviteit aan een pagina toevoegt, dat wil zeggen de gebruiker in staat stelt om met de website te communiceren. Natuurlijk heeft het formulier een handler nodig, maar met behulp van tags erin kun je een interface maken. Selectievakjes, knoppen, keuzerondjes, invoervelden en andere objecten die actieve acties van u vereisen, zijn allemaal formulierelementen waarvan de code in een container is geplaatst.
      - een tag die een interactieve knop creëert. Om ervoor te zorgen dat er iets gebeurt als je erop klikt, moet de knop in het formulier staan ​​(tussen de tags).
      creëert formulierelementen: schakelaars, selectievakjes, knoppen, allerlei invoervelden. In een container geplaatst. Maar waarom hebben we afzonderlijke nodig als er een universele bestaat?
      Hiermee kunt u een knop maken met geavanceerde parameters. U kunt bijvoorbeeld een afbeelding op een knop plaatsen. Dit kan niet worden gedaan op een element dat is gemaakt via .
      en - tags voor het maken van menu's in HTML 5. - dit is een container waarin elementen worden geplaatst, waarvan de toevoeging leidt tot het maken van menu-items. Een heel interessant koppel. Met zijn hulp kunt u bijvoorbeeld uw eigen contextmenu maken voor een pagina of het afzonderlijke element ervan.
      
      
      
      - nog een formuliertag die er een groot veld in creëert, waarin u niet slechts één regel tekst, maar hele alinea's kunt invoeren.

      • Gerelateerde publicaties:
      • Systeemvereisten voor GTA San Andreas Systeemvereisten voor GTA San Andreas
      • 1s 8 gemarkeerde objecten verwijderen
      • Nieuwe cursors installeren in Windows Een nieuwe cursor installeren op Windows 7
      
      Categorieën
      
      
      

      , En