【My Study Note】Semantic Elements
Semantic Elements
This is conducted to describe the content. This allows search engines and accessibility software such as screen readers to understand the contents of a page.
Some Examples
- h1
- ul
- nav
- article
- section
Navigation tends to be used inside the header with “ul”
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>Article Element (Sectioning tags)
The HTML specification states that according to the World Wide Web Consortium’s website, the article element indicates content that represents a complete self-contained composition in a document page application or site that is independently distributable.
It may help to think of a page in a newspaper. There are many articles on the page and you can cut out the individual articles with scissors if you want to. The articles you can remove are the article element.
Examples of this include a forum post, a magazine or a newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Also, it’s good practice to contain the blog post content inside of the article element because it’s a complete self-contained composition on a web page. You should place the article element within your main element.
<main>
<article>
<h2>My Summer Holiday</h2>
<p>This summer, I visited my granma.</p>
</article>
</main>The reason for doing it this way is that the main element semantically represents the main content of the page. And inside of it there can be multiple article elements for something like a blog post list.
Aside Tags (Sectioning tags)
<aside></aside>A secondary set of content that is not required to understand the main content.
Section Tags (Sectioning tags)
<section></section>A standalone section of the document that is often used within the body and article elements.
Details Tags (Sectioning tags)
<details></details>A collapsed section of content that can be expanded if the user wishes to view it.
Summary Tags (Sectioning tags)
<summary></summary>Specifies the summary or caption of a <details> element.
Blockquate Tags (Content tags tags)
<blockquote></blockquote>Used to describe a quotation.
Dd Tags (Content tags tags)
<dd></dd>Used to define a description for the preceding <dt> element.
Dl Tags (Content tags tags)
<dl></dl>Used to define a description list.
Dt Tags (Content tags tags)
<dt></dt>Used to describe terms inside <dl> elements.
Figcaption Tags (Content tags tags)
<figcaption></figcaption>Defines a caption for a photo image.
Figure Tags (Content tags tags)
<figure></figure>Applies markup to a photo image.
Hr Tags (Content tags tags)
<hr>Adds a horizontal line to the parent element.
Menu Tags (Content tags tags)
<menu></menu>A semantic alternative to <ul> tag.
Pre Tags (Content tags tags)
<pre></pre>The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.
Inline tags
Abbr Tags
<abbr></abbr>Specifies that the containing text is an abbreviation or acronym.
Cite Tags
<cite></cite>Defines the title of creative work (for example a book, poem, song, movie, painting or sculpture). The text in the <cite> element is usually rendered in italics.
Code Tags
<code></code>Indicates that the containing text is a block of computer code.
Data Tags
<data></data>Indicates machine-readable data.
Em Tags
<em></em>Emphasizes the containing text.
I Tags
<i></i>The containing text is displayed in italics. Used to indicate idiomatic text or technical terms.
Mark Tags
<mark></mark>The containing text should be marked or highlighted.
Q Tags
<q></q>The containing text is a short quotation.
S Tags
<s></s>Displays the containing text with a strikethrough or line through it.
Samp Tags
<samp></samp>The containing text represents a sample.
Small Tags
<small></small>Used to represent small text, such as copyright and legal text.
Span Tags
<span></span>A generic element for grouping content for CSS styling.
Sub Tags
<sub></sub>The containing text is subscript text, displayed with a lowered baseline.
Sup Tags
<sup></sup>The containing text is superscript text, displayed with a raised baseline.
Time Tags
<time></time>A semantic tag used to display both dates and times.
Var Tags
<var></var>The containing text is a variable in a mathematical expression.
Embedded content and media tags
Audio Tags
<audio></audio>Used to embed audio in web pages.
Canvas Tags
<canvas></canvas>Used to render 2D and 3D graphics on web pages.
Embed Tags
<embed></embed>The <embed> tag defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.
Iframe Tags
<iframe></iframe>Used to embed a nested web page.
Object Tags
<object></object>The <object> tag defines a container for an external resource.
Picture Tags
<picture></picture>The <picture> tag gives web developers more flexibility in specifying image resources.
The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.
Video Tags
<video></video>Embeds a video on a web page.
Source Tags
<source>Specifies media resources for <picture>, <audio> and<video> elements.
Svg Tags
<svg></svg>The <svg> tag defines a container for SVG graphics.
Table tags
Thead Tags
<thead></thead>Represents the header content of a table. Typically contains one <tr> element.
Tbody Tags
<tbody></tbody>Represents the header content of a table. Typically contains one <tr> element.
Tfoot Tags
<tfoot></tfoot>Represents the footer content of a table. Typically contains one <tr> element.
Tr Tags
<tr></tr>Represents a row in a table. Contains one or more <td> elements when used within <tbody> or <tfoot>. When used within <thead>, contains one or more <th> elements.
Td Tags
<td></td>Represents a cell in a table. Contains the text content of the cell.
Th Tags
<th></th>Defines a header cell of a table. Contains the text content of the header.
Caption Tags
<caption></caption>Defines the caption of a table element.
Colgroup Tags
<colgroup></colgroup>Defines a semantic group of one or more columns in a table for formatting.
Col Tags
<col></col>Defines a semantic column in a table. Used with colgroup.