7 tagów HTML, które musisz znać jako pisarz lub bloger online
Kluczowe wnioski
HTML odgrywa kluczową rolę w rozpowszechnianiu treści pisanych w Internecie, ponieważ strony internetowe polegają na jego możliwościach renderowania informacji w atrakcyjny sposób i organizowania ich w celu optymalnego indeksowania przez wyszukiwarki.
Aby mieć pełną kontrolę nad prezentacją i estetyką swojej pracy pisemnej, autorzy muszą znać podstawowe elementy HTML, takie jak znaczniki nagłówków, znaczniki pogrubienia i kursywy oraz znaczniki akapitów.
Listy, wypunktowania i znaczniki obrazów mogą być wykorzystane do poprawy organizacji i estetyki artykułów, podczas gdy hiperłącza zapewniają dodatkowy kontekst i poprawiają rankingi wyszukiwarek.
Wśród niektórych autorów, w tym tych specjalizujących się w relacjach technologicznych, panuje powszechne błędne przekonanie, że znajomość języka HTML nie jest konieczna. Jednak w przypadku treści przeznaczonych do publikacji w Internecie zrozumienie HTML staje się coraz bardziej istotne i niezbędne niż początkowo sądzono.
Witryny wykorzystują HTML jako sposób wyświetlania treści. Chociaż kilka edytorów znaczników, twórców witryn i platform zarządzania treścią umożliwia wizualną edycję artykułów, ważne jest, aby pamiętać, że kod HTML pozostaje zasadniczo zaangażowany w ten proces.
Aby uzyskać pełną kontrolę nad wyglądem treści i precyzyjnie dostosować jej prezentację, niezbędna jest znajomość podstawowych elementów HTML. Elementy te zapewniają znaczny wpływ na wygląd strony internetowej lub witryny pod względem układu, stylu i organizacji. Znajomość ich zastosowania umożliwia użytkownikom skuteczne kształtowanie treści cyfrowych zgodnie z określonymi preferencjami i wymaganiami.
Tagi nagłówków
Tagi nagłówków umożliwiają podsumowanie określonego segmentu lub podsegmentu w artykule. Zazwyczaj przeglądarki internetowe wyświetlają znaczniki nagłówków większą i pogrubioną czcionką, dzięki czemu są one bardziej widoczne niż otaczający je tekst.
Oprócz przekazywania informacji wizualnych za pomocą nagłówków, nadają one treści poczucie organizacji i rankingu, ułatwiając w ten sposób algorytmom indeksującym zrozumienie układu strony internetowej.
Wykorzystywanych jest sześć numerowanych znaczników nagłówków, przy czym bardziej znaczące cyfry odpowiadają nagłówkom o niższej randze. Zaleca się stosowanie znacznika dla głównego tytułu strony internetowej, podczas gdy znaczniki powinny być używane dla sekcji, a znaczniki dla podrozdziałów.
Biorąc pod uwagę charakter treści i odbiorców docelowych, rozsądne jest zastosowanie odpowiedniej struktury organizacyjnej. Podczas gdy znaczniki i mogą być odpowiednie dla skomplikowanych lub prawnie zorientowanych materiałów, ich czytelność może stanowić wyzwanie dla ogółu odbiorców.
Nagłówki odgrywają istotną rolę w dzieleniu długich artykułów na łatwiejsze do zarządzania segmenty, ułatwiając ich konsumpcję czytelnikom, którzy mogą uznać ściany tekstu za onieśmielające. W przeciwieństwie do biernych czytelników, którzy mogą przeglądać nieatrakcyjne treści, nagłówki zapewniają poczucie struktury, która zachęca do aktywnego zaangażowania się w materiał. Dzięki krótkim przerwom między tematami pozwalają one zarówno autorom, jak i czytelnikom złapać oddech i przegrupować się przed ponownym zagłębieniem się w dyskusję.
Upewnij się, że każdy element nagłówka jest zakończony odpowiednim znacznikiem zamykającym, takim jak .
Pogrubienie, kursywa i inne formatowanie tekstu
Znaczniki nagłówków odgrywają istotną rolę w kształtowaniu ogólnej architektury strony internetowej, podczas gdy bardziej szczegółowe znaczniki formatowania mają na celu uwzględnienie drobnych szczegółów w tekście. Na przykład, gdy chcemy zaakcentować określony segment zdania, znaczniki te oferują środki do zmiany wyglądu tekstu bez wpływu na jego hierarchiczne znaczenie.
⭐ dla pogrubionego tekstu .
⭐ dla tekstu pisanego kursywą.
⭐ dla tekstu przekreślonego.
Markdown i narzędzia do zarządzania treścią często powielają formatowanie podczas przesyłania tekstu z innych aplikacji. Aby udoskonalić te informacje, usuń te kody z oryginalnego źródła lub usuń formatowanie podczas wstawiania danych, aby uniknąć takich problemów podczas początkowego procesu.
Akapity i odstępy
Oprócz stosowania nagłówków do organizowania treści w odrębne segmenty, możliwe jest wykorzystanie zarówno elementów , jak i do wyznaczania akapitów lub tworzenia przerw między wierszami.
Kilka narzędzi do edycji wizualnej automatycznie włącza te znaczniki podczas pisania, na przykład po naciśnięciu klawisza Enter. Niemniej jednak możliwe jest, aby użytkownicy komponujący swoje treści w edytorze tekstowym dołączali te atrybuty bezpośrednio do swojego kodu HTML.
Podczas tworzenia tekstu, który wymaga wizualnego oddzielenia wierszy bez konieczności rozpoczynania nowego akapitu, użycie znacznika samozamykającego HTML jest właściwym wyborem. Jest to szczególnie istotne w przypadku tworzenia poezji lub innych dzieł literackich, w których pomysły płynnie przechodzą z jednej linii do drugiej i nie uzasadniają tworzenia oddzielnych akapitów. W takich przypadkach użycie znacznika pozwala na płynne przejście przy jednoczesnym zachowaniu pożądanego podziału przestrzennego.
Znacznik `
` jest elementem HTML, który nie posiada odpowiednika zamykającego i dlatego powinien być używany niezależnie. Atrybut ten można przypisać faktowi, że nie zawiera on ani nie wpływa na żadną treść ani opis.
Wykorzystanie tych znaczników umożliwia zgodność z ustalonymi wytycznymi dotyczącymi jakości estetycznej zarówno treści pisanych, jak i cyfrowych, zwiększając w ten sposób wiarygodność stron internetowych postrzeganych zarówno przez ludzi, jak i algorytmy wyszukiwarek.
Liczby i punktory
Listy służą jako skuteczny sposób porządkowania informacji podczas prezentowania wielu elementów po kolei. Podczas określania zbioru poszczególnych elementów, takich jak składniki przepisu lub sekwencyjne instrukcje, korzystanie z list zapewnia spójną organizację.
Element służy do tworzenia uporządkowanej lub numerowanej listy, podczas gdy znacznik reprezentuje nieuporządkowaną listę zawierającą wypunktowane elementy. Znacznik jest używany do definiowania poszczególnych elementów w ramach jednego z typów list.
Oto przykład tego, jak może wyglądać uporządkowana lista składająca się z pięciu elementów w formacie HTML:css Pierwszy element Drugi element Trzeci element Czwarty element Piąty element
<ol>
<li>alpha</li>
<li>bravo</li>
<li>charlie</li>
<li>delta</li>
<li>echo</li>
</ol>
Powyższy znacznik, po wyrenderowaniu przez przeglądarkę internetową, pojawia się w formacie przypominającym następującą strukturę:
Jeśli wolisz użyć listy wyliczeniowej, zastąp przez , aby uzyskać listę wypunktowaną.
Podany kod HTML demonstruje, jak organizować zawartość za pomocą list zagnieżdżonych. Najbardziej zewnętrzna lista jest zdefiniowana przez znacznik z identyfikatorem “my-list”.Wewnątrz zewnętrznej listy znajdują się dwie listy wewnętrzne utworzone przy użyciu znaczników i zagnieżdżone w nich kolejne pozycje listy reprezentowane przez elementy , po których następuje odpowiadający im opis tekstowy zawinięty w znaczniki . Struktura ta pozwala na zorganizowaną prezentację wielopoziomowych danych w łatwo przyswajalnym formacie.
Zadanie wymaga przedstawienia bardziej wyrafinowanej i elokwentnej wersji danego tekstu przy użyciu odpowiedniego języka i tonu, który przekazuje to samo znaczenie przy zachowaniu formalnego stylu.
<ol>
<li>alpha</li>
<li>
bravo
<ol>
<li>Hip</li>
<li>Hip</li>
<li>Hooray</li>
</ol>
</li>
<li>charlie</li>
<li>
delta
<ul>
<li>Difference</li>
<li>River mouth</li>
</ul>
</li>
<li>echo</li>
</ol>
Możesz wykorzystać zagnieżdżone struktury list, obejmujące różne formaty list, w celu zilustrowania bardziej skomplikowanych hierarchii i zwiększenia zrozumienia dla czytelnika w odniesieniu do danego tematu.
Tworzenie tabeli
Gdy mamy do czynienia z większymi ilościami powiązanych ze sobą danych, wykorzystanie tabel może być skutecznym sposobem organizacji.
Aby utworzyć tabelę HTML, zacznij od elementu . Powinien on zawierać wszystkie informacje, które zamierzasz wyświetlić w tabeli. Użyj elementu , aby zdefiniować każdy wiersz tabeli i użyj elementu , aby oznaczyć poszczególne komórki w każdym wierszu. Jeśli chcesz wskazać nagłówek tabeli, możesz zastąpić element elementem , który oznacza “nagłówek tabeli”. Pamiętaj, aby zapewnić odpowiednie elementy zamykające dla tabeli, wierszy i komórek.
<table>
<tr>
<th>Group 1</th>
<th>Group 2</th>
</tr>
<tr>
<td>Mark</td>
<td>Belle</td>
</tr>
<tr>
<td>Ralph</td>
<td>Shane</td>
</tr>
<tr>
<td>John</td>
<td>Josie</td>
</tr>
</table>
W wyrenderowanej formie w środowisku przeglądania stron internetowych tabela powinna wyglądać następująco:
Wykorzystując HTML do tworzenia tabeli, należy pamiętać, że proces ten odbywa się wiersz po wierszu, a nie kolumna po kolumnie. Można jednak zastosować współczesne techniki CSS, aby nadać swojej tabeli różne elementy stylistyczne, takie jak obramowania, iteracje wierszy w odcieniach i dodatkowe ozdoby.
Dodawanie obrazów
Włączanie elementów wizualnych do strony internetowej stanowi wyjątkowe wyzwanie w porównaniu do formatowania treści tekstowych. Zazwyczaj obrazy nie są przekazywane językowo, co wymaga ich przechowywania w pojedynczych plikach. W związku z tym należy ustalić metodę identyfikacji lokalizacji tych plików w połączeniu z odpowiednim znacznikiem HTML.
Wykorzystanie elementu pozwala na włączenie obrazów wizualnych do dokumentu; konieczne jest jednak zastosowanie funkcji HTML znanej jako “atrybuty” w celu wyznaczenia lokalizacji towarzyszącego pliku obrazu. Atrybuty te są dołączane do identyfikatora znacznika i poprzedzają kończący nawias klamrowy. Każdy atrybut posiada moniker i odpowiadającą mu wartość, które są połączone za pomocą znaku równości. Zaleca się umieszczanie wartości atrybutów w podwójnych cudzysłowach.
Oto przykład:
<img alt="tree leaves and branches"
src="https://images.unsplash.com/photo-1532365673558-f9bb768644e7">
Atrybut “src”, oznaczający źródło, określa adres URL obrazu do włączenia. Może to być relacyjny lub bezwzględny adres URL, w zależności od tego, czy jest to obraz zewnętrzny, czy znajduje się na tym samym serwerze.
Atrybut “alt” oznacza “tekst alternatywny”, który służy do opisu treści przedstawionej na obrazie. Ogólnie zaleca się włączenie tego atrybutu, ponieważ ma on wartość zarówno dla użytkowników czytników ekranu, jak i algorytmów wyszukiwarek. Niezależnie od tego, czy widz jest człowiekiem, czy zautomatyzowany, ci, którzy nie są w stanie dostrzec oryginalnego obrazu z jakiegokolwiek powodu, mogą uzyskać wgląd w jego zawartość poprzez dostarczenie tekstu alternatywnego.
Przeglądarki włączą obraz określony przez źródłowy adres URL podany w atrybucie “src”, integrując go płynnie ze stroną internetową w następujący sposób:
W przypadkach, gdy podany źródłowy adres URL nie stanowi legalnego obrazu lub całkowicie się nie materializuje, nowoczesne przeglądarki internetowe zazwyczaj wyświetlają wizualnie zerową reprezentację wraz z alternatywnym opisem zawartym w odpowiednim atrybucie alt.
Dodawanie linków za pomocą HTML
Rzeczywiście, istotną cechą HTML jest hiperłącze, które umożliwia użytkownikom nawigację między różnymi stronami internetowymi w obrębie własnej witryny lub nawet źródeł zewnętrznych. Linki te nie tylko ułatwiają dostęp, ale także zapewniają dodatkowe znaczenie i autorytet prezentowanej treści, zwiększając w ten sposób jej widoczność i ranking w wynikach wyszukiwania.
Aby dołączyć hiperłącze, należy wykorzystać element HTML wraz z atrybutem “href”, który obejmuje adres URL przeznaczony dla miejsca docelowego linku. Zamknięty w znacznikach i odpowiadającym im , zamknięty tekst lub dodatkowa zawartość staje się klikalna, umożliwiając w ten sposób czytelnikom przejście do innej strony internetowej poprzez kliknięcie na nią.
Oto demonstracja, jak utworzyć hiperłącze za pomocą HTML:php Link Text Ten kod wygeneruje klikalny link na stronie internetowej, który przekieruje użytkowników do https://www.example.com . Tekst “Link Text” będzie wyświetlany jako widoczne hiperłącze, z którym użytkownicy będą mogli wchodzić w interakcje.
<a href="https://www.makeuseof.com/author/jowi-morales">
Jowi Morales All Things N Page
</a>
Znajomość HTML ułatwi ci życie
Chociaż wiele edytorów Markdown i systemów zarządzania treścią oferuje wizualny interfejs edycji, podstawowa znajomość HTML pozostaje cenna.
Zdobycie kompleksowej wiedzy na temat wewnętrznego działania HTML pozwala zdiagnozować i naprawić wszelkie rozbieżności w wyglądzie treści internetowych, które mogą nie być odpowiednio uwzględnione przez narzędzia do edycji wizualnej. Chociaż narzędzia te są przydatne w wielu aspektach HTML, często nie uwzględniają wszystkich możliwych scenariuszy, co sprawia, że bezpośrednia manipulacja znacznikami dokumentu jest niezbędną umiejętnością zapewniającą zarówno estetyczny wygląd, jak i dokładność treści online.