Semantic elements HTML | MTA Web Design Fundamentals | Cardiff Met


Semantic elements in HTML provide
structure to the content of a webpage by defining the meaning or purpose of
different parts of the page. They allow screen reading software, search engines
and other developers to understand the structure and content of a page. Let’s
have a look at our first semantic element – article. The article element
tells other editors that the content within it, is self-contained and makes
sense by itself. For example this part of our Cardiff Docks page on the history of
the docks is self-contained and could, in theory, be distributed independently from
the rest of the page content. We can therefore put this content in an article
tag, making it clearer for other developers
of the page that this is a self-contained article. The second
article on this page could be the section on Cardiff docks today. It is good practice to include a heading
as the first element of an article but this is not essential. This area of the
page is about shipping in Cardiff. The historical context of the Coal Exchange
building is explained, but this paragraph about the Coal Exchange Hotel is not
really related to the rest of the article. We can use the aside semantic
element, which indicates to other people and
screen readers and search engines that this part of the page is not directly
related to the rest of the article. By themselves semantic elements do not
significantly change the appearance of a page. The appearance of this page has not
been changed by wrapping it in semantic elements. Semantic elements are more
about explaining the meaning of content, hence the term semantic elements
semantic literally means meaning. That being said using semantic elements
together with CSS, which we look at later in the course, can make formatting a page
easier and more consistent

Add a Comment

Your email address will not be published. Required fields are marked *