Html reference

      20

One of HTML"s main jobs is to give sầu text structure và meaning (also known as semantics) so that a browser can display it correctly. This article explains the way HTML can be used khổng lồ structure a page of text by adding headings & paragraphs, emphasizing words, creating lists, và more.

Bạn đang xem: Html reference

Prerequisites: Objective:
Basic HTML familiarity, as covered in Getting started with HTML.
Learn how to lớn mark up a basic page of text khổng lồ give sầu it structure và meaning—including paragraphs, headings, lists, emphasis, and quotations.

The basics: headings và paragraphs


Most structured text consists of headings và paragraphs, whether you are reading a story, a newspaper, a college textbook, a magazine, etc.

*

Structured content makes the reading experience easier and more enjoyable.

In HTML, each paragraph has to be wrapped in a element, lượt thích so:

p>I am a paragraph, oh yes I am.p>Each heading has to be wrapped in a heading element:

h1>I am the title of the story.h1>There are six heading elements: ,

,

, , , and . Each element represents a different cấp độ of nội dung in the document; represents the main heading, represents subheadings, represents sub-subheadings, & so on.


Implementing structural hierarchy


For example, in this story, theelement represents the title of the story, theelements represent the title of each chapter, và the

elements represent sub-sections of each chapter:

h1>The Crushing Boreh1>p>By Chris Millsp>h2>Chapter 1: The dark nighth2>p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...p>h2>Chapter 2: The eternal silenceh2>p>Our protagonist could not so much as a whisper out of the shadowy figure ...p>h3>The specter speaksh3>p>Several more hours had passed, when all of a sudden the specter sat bolt upright và exclaimed, "Please have sầu mercy on my soul!"p>It"s really up to you what the elements involved represent, as long as the hierarchy makes sense. You just need lớn bear in mind a few best practices as you create such structures:

Preferably, you should use a single per page—this is the top level heading, and all others sit below this in the hierarchy. Make sure you use the headings in the correct order in the hierarchy. Don"t use elements to represent subheadings, followed by elements to represent sub-subheadings—that doesn"t make sense and will lead khổng lồ weird results. Of the six heading levels available, you should aim to lớn use no more than three per page, unless you feel it is necessary. Documents with many levels (i.e., a deep heading hierarchy) become unwieldy và difficult to navigate. On such occasions, it is advisable to spread the content over multiple pages if possible.
Why vị we need structure?


To answer this question, let"s take a look at text-start.html—the starting point of our running example for this article (a nice hummus recipe). You should save a copy of this tệp tin on your local machine, as you"ll need it for the exercises later on. This document"s toàn thân currently contains multiple pieces of content. They aren"t marked up in any way, but they are separated with linebreaks (Enter/Return pressed to lớn go onkhổng lồ the next line).

However, when you open the document in your browser, you"ll see that the text appears as a big chunk!

This is because there are no elements khổng lồ give sầu the nội dung structure, so the browser does not know what is a heading và what is a paragraph. Furthermore:

Therefore, we need lớn give our nội dung structural markup.


Active sầu learning: Giving our nội dung structure


Let"s jump straight in with a live sầu example. In the example below, add elements khổng lồ the raw text in the Input field so that it appears as a heading & two paragraphs in the Output field.

If you make a mistake, you can always remix it using the Reset button. If you get stuông xã, press the Show solution button to lớn see the answer.


Why bởi vì we need semantics?


Semantics are relied on everywhere around us—we rely on previous experience to tell us what the function of an everyday object is;when we see something, we know what its function will be. So, for example, we expect a red traffic light khổng lồ mean "stop,"và a green traffic light to mean "go."Things can get tricky very quickly if the wrong semantics are applied. (Do any countries use red to mean "go"? We hope not.)

In a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context, the element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."

h1>This is a top màn chơi headingh1>By mặc định, the browser will give it a large phông kích cỡ khổng lồ make it look like a heading (although you could style it lớn look lượt thích anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines & screen readers (as mentioned above).

On the other hvà, you could make any element look like a top level heading. Consider the following:

span style="font-size: 32px; margin: 21px 0; display: block;">Is this a top level heading?span>This is a element. It has no semantics. You use it khổng lồ wrap nội dung when you want to apply CSS khổng lồ it (or vì chưng something lớn it with JavaScript) without giving it any extra meaning. (You"ll find out more about these later on in the course.)We"ve sầu applied some CSS lớn it to make it look lượt thích a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea khổng lồ use the relevant HTML element for the job.


Lists

Now let"s turn our attention to lớn lists. Lists are everywhere in life—from your shopping menu lớn the danh sách of directions you subconsciously follow lớn get to lớn your house every day, khổng lồ the lists of instructions you are following in these tutorials! Lists are everywhere on the website, too, và we"ve sầu got three different types lớn worry about.


Unordered


Unordered lists are used lớn mark up lists of items for which the order of the items doesn"t matter. Let"s take a shopping các mục as an example:

milkeggsbreadhummusEvery unordered các mục starts off with a element—this wraps around all the danh sách items:

ul>milkeggsbreadhummusul>The last step is khổng lồ wrap each danh sách vật phẩm in a (các mục item) element:

ul> li>milkli> li>eggsli> li>breadli> li>hummusli>ul>Active learning: Marking up an unordered listTry editing the live sầu sample below to lớn create your very own HTML unordered list.


Ordered


Ordered lists are lists in which the order of the items does matter. Let"s take a phối of directions as an example:

Drive sầu lớn the end of the roadTurn rightGo straight across the first two roundaboutsTurn left at the third roundaboutThe school is on your right, 300 meters up the roadThe markup structure is the same as for unordered lists, except that you have sầu lớn wrap the menu items in an element, rather than :

ol> li>Drive sầu khổng lồ the over of the roadli> li>Turn rightli> li>Go straight across the first two roundaboutsli> li>Turn left at the third roundaboutli> li>The school is on your right, 300 meters up the roadli>ol>Active sầu learning: Marking up an ordered listTry editing the live sầu sample below lớn create your very own HTML ordered danh sách.


Active sầu learning: Marking up our recipe page


So at this point in the article, you have sầu all the information you need to mark up our recipe page example. You can choose khổng lồ either save a local copy of our text-start.html starting file & bởi the work there or bởi it in the editable example below. Doing it locally will probably be better, as then you"ll get to save the work you are doing, whereas if you fill it in khổng lồ the editable example, it will be lost the next time you open the page. Both have sầu pros & cons.

If you get stuchồng, you can always press the Show solution button, or check out our text-complete.html example on our github repo.

Xem thêm: Mẫu Logo Ăn Vặt - In Logo Decal Ăn Vặt


Nesting lists


It is perfectly ok khổng lồ nest one menu inside another one. You might want to have some sub-bullets sitting below a top-cấp độ bullet. Let"s take the second list from our recipe example:

ol> li>Remove sầu the skin from the garlic, và chop coarsely.li> li>Remove all the seeds và stalk from the pepper, & chop coarsely.li> li>Add all the ingredients inlớn a food processor.li> li>Process all the ingredients into a paste.li> li>If you want a coarse "chunky" hummus, process it for a short time.li> li>If you want a smooth hummus, process it for a longer time.li>ol>Since the last two bullets are very closely related to lớn the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered danh mục và put that danh sách inside the current fourth bullet. This would look lượt thích so:

ol> li>Remove the skin from the garlic, & chop coarsely.li> li>Remove all the seeds và stalk from the pepper, và chop coarsely.li> li>Add all the ingredients into lớn a food processor.li> li>Process all the ingredients into a paste. ul> li>If you want a coarse "chunky" hummus, process it for a short time.li> li>If you want a smooth hummus, process it for a longer time.li> ul> li>ol>Try going baông chồng lớn the previous active learning example và updating the second danh sách lượt thích this.


Emphasis và importance


In human language, we often emphakích thước certain words to lớn alter the meaning of a sentence, và we often want khổng lồ mark certain words as important or different in some way. HTML provides various semantic elements to lớn allow us to lớn mark up textual content with such effects, & in this section, we"ll look at a few of the most common ones.


Emphasis


When we want khổng lồ add emphasis in spoken language, we stress certain words, subtly altering the meaning of what we are saying. Similarly, in written languagewe tend lớn stress words by putting them in italics. For example, the following two sentences have different meanings.

I am glad you weren"t late.

I am glad you weren"t late.

The first sentence sounds genuinely relieved that the person wasn"t late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.

In HTML we use the (emphasis) element khổng lồ mark up such instances. As well as making the document more interesting to lớn read, these are recognized by screen readers & spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn"t use this tag purely khổng lồ get italic styling. To bởi that, you"d use a element & some CSS, or perhaps an element (see below).

p>I am em>gladem> you weren"t em>lateem>.p>

Strong importance


To emphakích cỡ important words, we tend lớn bức xúc them in spoken language and bold them in written language. For example:

This liquid is highly toxic.

I am counting on you. Do not be late!

In HTML we use the (svào importance) element lớn mark up such instances. As well as making the document more useful, again these are recognized by screen readers và spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn"t use this tag purely khổng lồ get bold styling. To vị that, you"d use a element & some CSS, or perhaps a element (see below).

p>This liquid is strong>highly toxicstrong>.p>p>I am counting on you. strong>Do notstrong> be late!p>You can nest strong và emphasis inside one another if desired:

p>This liquid is strong>highly toxicstrong> —if you drink it, strong>you may em>dieem>strong>.p>

Active learning: Let"s be important!


In this active learning section, we"ve sầu provided an editable example. Inside it, we"d like you khổng lồ try adding emphasis & strong importance to the words you think need them, just khổng lồ have some practice.


Italic, bold, underline...


The elements we"ve sầu discussed so far have clearcut associated semantics. The situation with , , & is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as presentational elements và should no longer be used because, as we"ve seen before, semantics is so important khổng lồ accessibility, SEO, etc.

HTML5 redefined , , & with new, somewhat confusing, semantic roles.

Here"s the best rule of thumb: It"s likely appropriate lớn use , , or to lớn convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindmix. The concept of italics isn"t very helpful to people using screen readers, or to lớn people using a writing system other than the Latin alphabet.


A kind warning about underline: People strongly associate underlining with hyperlinks. Therefore, on the website,it"s best to underline only liên kết. Use the element when it"s semantically appropriate, but consider using CSS lớn change the mặc định underline to lớn something more appropriate on the website. The example below illustrates how it can be done.


p> The Ruby-throated Hummingbird (i>Archilochus colubrisi>) is the most common hummingbird in Eastern North America.p>p> The thực đơn was a sea of exotic words like i lang="uk-latn">vatrushkai>, i lang="id">nasay mê gorengi> và i lang="fr">soupe à l"oignoni>.p>p> Someday I"ll learn how khổng lồ u style="text-decoration-line: underline; text-decoration-style: wavy;">spelu> better.p>ol> li> b>Sliceb> two pieces of bread off the loaf. li> li> b>Insertb> a tomato slice và a leaf of lettuce between the slices of bread. li>ol>

Test your skills!


You"ve sầu reached the kết thúc of this article, but can you remember the most important information? You can find some further tests to lớn verify that you"ve retained this information before you move sầu on—see Test your skills: HTML text basics.

Xem thêm: Tết Trung Thu 2019 Ngày Nào ? Thứ Mấy? Trung Thu 2019 Vào Ngày Nào


Summary


That"s it for now! This article should have sầu given you a good idea of how to start marking up text in HTML and introduced you khổng lồ some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we"ll look at a lot more in our Advanced text formatting article later on in the course. In the next article, we"ll be looking in detail at how to lớn create hyperliên kết, possibly the most important element on the web.


In this module


Getting started with the Web Introduction khổng lồ HTML Multitruyền thông và embedding HTML tables CSS first steps CSS building blocks Styling text CSS layout JavaScript first steps JavaScript building blocks Introducing JavaScript objects Asynchronous JavaScript Client-side website APIs Vi xử lý Core forms learning pathway Advanced forms articles Accessibility guides Accessibility assessment Client-side web development tools Introduction to client-side frameworks React Ember Vue Svelte Angular Git & GitHub Cross browser testing First steps Django website framework (Python) Express Web Framework (node.js/JavaScript) Common questions

Chuyên mục: SEO
dịch vụ entity