HTML Text and Phrasing Content
HTML provides elements for organizing and describing text within a webpage. Headings and paragraphs help organize larger sections of content, while phrasing elements are used within text to give specific content meaning or emphasis.
Examples of text and phrasing elements include
<h1>,
<h2>,
<p>,
<strong>,
<em>,
<mark>,
<code>, and
<a>.
Headings and Paragraphs
Headings organize content into a hierarchy. The
<h1> element is normally used for the
main heading of a page, while elements from
<h2> to <h6> can be
used for headings at lower levels.
Example of a Heading
This is an example of a paragraph placed below a heading.
Paragraphs are created using the
<p> element.
Inline and Phrasing Elements
Phrasing elements are used within text to give particular words or phrases additional meaning.
The strong element indicates that text has strong importance. The em element indicates emphasis. The mark element can highlight text for a particular purpose.
HTML code can be displayed using the
<code> element. For example,
<p>Hello World</p> represents a
paragraph element.
Nested Phrasing Elements
HTML elements can be nested inside one another. This means one element can be placed inside another element while maintaining the correct document structure.
For example, a sentence can contain strong text with emphasized text inside it.
The opening and closing tags must be placed correctly so that the browser can understand which content belongs to each element.
Links and Navigation
The <a> element, also called the anchor
element, is used to create hyperlinks. The
href attribute specifies the destination of
the link.
For example:
<a href="semantic.html">Semantic HTML</a>
creates a link to another page in this website.
Internal Links
Internal links connect webpages within the same website.
Because this page is inside the
pages folder, the following links use relative
file paths.
External Link
External links can take users to websites outside of the current website. For example:
Same-Page Links
A link can also take a user to a specific section of the
same webpage. This can be done by giving an element an
id and using the same value after a
# in the link.
For example, the section above has
id="links". The following link takes the user
directly back to that section:
Elements, Attributes, and Values
This page demonstrates the difference between elements,
attributes, and attribute values. For example,
<a href="semantic.html"> uses the
href attribute, and
"semantic.html" is the value of that
attribute.
The id attribute is also used on this page.
The value "links" identifies a specific
section so that another link can navigate directly to it.
What I Learned
Through this topic, I learned how headings and paragraphs organize written content and how phrasing elements can provide additional meaning within text. I also learned that HTML elements can be nested to create relationships between different pieces of content.
I also learned how hyperlinks work using the
<a> element and the
href attribute. Creating internal, external,
and same-page links helped me understand how users can
navigate through a website.
Reference
The purposes and syntax of HTML text, phrasing elements, and hyperlinks were researched using HTML documentation. See the References page for the complete IEEE reference list.