Overview of Semantic HTML5

Tram Ho

Web design activities so far have not only been aimed at serving the purpose of providing full and accurate content, but also need to ensure aesthetics, as well as the ability to optimize when used. Grasping that trend, aiming to standardize Web pages, helping it to operate more effectively as well as providing the best user experience, Semantic elements in HTML 5 were born. To understand what is Semantic HTML 5, the breakthrough improvements as well as the Semantic types of HTML 5 in detail, we will give you the most basic information needed for an overview of Semantic in the article. write this.

What is Semantic HTML5?

  • HTML5 : this is an improvement of HTML (HyperText Markup Language) to improve the user experience on the World Wide Web.
  • Semantic ( semantic element in HTML5): is the definition, accurate description, condensing a content in a web page, thereby helping to determine the role of the content itself compared to the whole article.
  • Semantic HTML5 : new semantic elements of HTML5. Most modern browsers use the new semantic elements of HTML5.

Advantages of Semantic HTML5:

The advent of HTML5 is like a leap forward in HTML history. Compared to previous HTML versions such as HTML 2.0, HTML 3.2, HTML 4.01, XHTML 1.0, it is clear that HTML5 is leading the way in superior features:

  • Determine the role of the content contained in the site : make your Web site more optimal and professional. Defining this helps users prioritize important content in the Web. Of course, thanks to that, the process of approaching and monitoring users’ websites is also easier and smoother. Imagine this activity is like you graduate thesis, instead of researching yourself, the support from the instructor will help you shorten the study time as well as ensure accuracy. correct, complete the thesis very much.
  • Minimalist interface, easy to observe : The use of such a minimal layout of semantic elements makes it easy for programmers to observe a huge amount of code.
  • Greater outreach : In addition to providing a great utility for programmers, the use of semantic elements is also effective in helping the site increase its ability to communicate with search engines. and support tools. From there create “pleasure” in the user experience

Some of the new Semantic tags in HTML5:

The <header> and <footer> tags in HTML 5:

<header> tag : The tag specifies the title or preamble of the webpage or paragraph This is like the opening of a paper, containing key words and general information introducing the content that the article is about to deploy.

<footer> tag : The tag identifies the end of a web page or paragraph. This is considered a summary of the entire previous content.

For example:

<footer>

Contact us: Mona.Media

Address: Số 319 c16 Lý Thường Kiệt, p15, q11HCM

Hotline: 1900 636 648

Email: <a href=”mailto: [email protected] “title=”” target=”_blank”> </footer>

=> Display results:

<nav> tag: This is seen as a link to the core content of the Web page, usually the <nav> tag is found in the <header> or <fooder> tags.

For example:

<nav>
<a href=”/website/”> Website </a>
<a href=”/HTML/”> HTML </a>
<a href=”/trinh-duyet-web/”> Web browser </a>
<a href=”/ung-dung/”> Apps </a>
</nav>

=> Display results:

<section> tag: In web pages where separate sections usually exist, the <section> tag is used to contain and distinguish those specific sections. Note, the <section> tag distinguishes the content contained in it, not the content itself.

<article> tag: Identifies the independent information in the website.

Specifically, Web pages are a combination of lots of information, information that is linked together to solve a common problem. Among those information, there is information that can exist independently if separated. Such information is contained in the <article> tag.

For example:

=> Display results:

<aside> tag: Identifies information that has an additional relationship with the content in the website. This information is called supporting content, supporting the core content, whether or not it reduces the quality of the main content.

For example, in the Website about the use of herbal cosmetics, we can insert supplementary content such as how to distinguish the types of cosmetics originating from such herbs to create depth for the topic.

Conclusion: Hopefully the above share will help people have an overview and more scientific about semantic elements in HTML5 as well as the advantages that these elements bring in website design. You can refer to related articles and topics at http://webmini.vn/ .

Share the news now

Source : Viblo