登录查看更多内容

Last updated on 2024年6月14日

How can you ensure your HTML is semantically structured?

由人工智能和领英社区提供技术支持

Creating a website involves more than just making it look good; it's crucial to structure your HTML in a way that makes sense semantically. Semantic HTML refers to using HTML elements correctly so that they represent the type of content they enclose. This not only helps with search engine optimization (SEO) but also improves accessibility for users with disabilities. You can ensure your HTML is semantically structured by following best practices and understanding the purpose of different elements.

此文章中的业界达人

由社区从 53 条内容中精选。了解更多

Aathithyabalan J

Full-Stack Engineer Intern @ Sifocom | LinkedIn Top Voice ?? Content Creator | Sharing Tech Stories & Learning…
Kimaya Jadhav(きまや)

Software Developer ( MEAN & MERN Stack ) Angular | Node | Javascript | Java | Bootstrap
Prince Kumar

Accessibility Lead Engineer at HCL(Google) | DHS Trusted Tester | WCAG 2.1 & 2.0 | Accessibility Testing | Ex-IBMER |…

1 HTML Basics

To start, you need to grasp the basics of HTML. Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It consists of elements represented by tags. Semantic structure in HTML means using these tags to convey the meaning of the content they enclose, rather than just presentation. For example, use <article> for a self-contained composition, <section> for a thematic grouping, and <header> for introductory content.

添加您的观点

Aathithyabalan J

Full-Stack Engineer Intern @ Sifocom | LinkedIn Top Voice ?? Content Creator | Sharing Tech Stories & Learning Adventures | Web, C, Java, Python
举报内容
Essential Strategies for Semantic HTML Structure Use Semantic HTML Elements: Utilize elements like <header>, <nav>, <main>, and <footer> to accurately represent different sections of your page's content. Properly Nest Elements: Ensure elements are nested logically and hierarchically, maintaining a clear structure throughout your HTML document. Avoid Presentational Elements: Refrain from using presentational elements like <font> or attributes like align. Instead, use CSS for styling, keeping HTML focused on content and structure. Follow Accessibility Guidelines: Ensure your HTML is accessible by using landmarks like <main> and providing descriptive text alternatives for non-text content.

已翻译

赞
Prince Kumar

Accessibility Lead Engineer at HCL(Google) | DHS Trusted Tester | WCAG 2.1 & 2.0 | Accessibility Testing | Ex-IBMER | LMS | LOS | BANKING DOMAIN | Automation Testing | Manual Testing | PLSQL
举报内容
1. Use Appropriate HTML5 Semantic Elements HTML5 introduced several elements that provide more meaningful structure to your document: <header>: Defines introductory content or a set of navigational links. <nav>: Contains the navigation links. <main>: Represents the dominant content of the <body>. <section>: Defines sections in a document 2. Use Headings Properly Headings (<h1> to <h6>) should be used to indicate the hierarchy of content: 3. Use Lists for Lists of Items <ul>: Unordered list, used for lists where the order doesn’t matter. <ol>: Ordered list, used for lists where the order matters. 4. Use Tables for Tabular Data <td>: Table data cell. 5. Use Forms for User Input 6. Use Inline Elements for Text-Level Semantics

已翻译

赞
Divyanshu Singh

Software Developer| Java | Springboot | HTML5 | CSS | Javascript | ReactJs | Angular | MySQL | SQL
举报内容
To ensure semantic HTML: Use semantic tags (like <header>, <footer>). Organize content with proper hierarchy. Choose tags accurately (e.g., <ul>, <figure>). Minimize unnecessary <div> usage. Include descriptive alt text for images. Maintain logical structure. Validate HTML regularly.

已翻译

赞
Mohammad Ali Ghorbani Delijani

Full-Stack Engineer & DevOps Specialist | Embracing PHP, GoLang, and AI | 10+ Years of Web Development | Remote Work Enthusiast
举报内容
Use appropriate HTML5 elements (<!DOCTYPE html>, <html>, <head>, <title>, <body>). Avoid deprecated elements like <center> or <font> tags. Use lowercase for HTML tags and attributes.

已翻译

赞
Haroon Jamil

2.5k+ | WordPress Developer @Devcause | Transforming Ideas Into Digital Masterpieces, I specialize in PHP, JavaScript, Frontend React, Gutenberg Blocks, Themes Customization, SEO, and Elementor Pro, WIX Builder.
举报内容
To ensure semantically structured HTML, use appropriate elements like <header>, <nav>, <main>, <section>, <article>, and <footer>. Avoid overusing generic elements like <div>. Include meaningful attributes like alt text for images and maintain a clear hierarchical structure using heading elements (<h1> to <h6>). This enhances accessibility, SEO, and code readability.

已翻译

赞

加载更多内容

2 Use of Headers

Headers are crucial for semantic structure. They define the hierarchy of your content, making it easier for users and search engines to understand the importance and relevance of different sections. Always start with <h1> for the main title and proceed with <h2> , <h3> , and so on, for subheadings in a descending order of significance. Avoid skipping levels as it can confuse the content structure.

添加您的观点

Utkarsh K.

Ex-IT Ops Intern@Aditya Birla FRL | Web Ops Engineer@PARA | Technical Consultant@UpGrad | Google CSJ Facilitator | Ex-Google DSC Technical Lead | MERN Stack Developer | Content Writer |
举报内容
Ensuring semantically structured HTML involves proper use of headers. Start by using <header> for introductory content, such as logos or navigation menus, and <footer> for concluding content, like copyright information. Utilize <h1> through <h6> tags for headings, with <h1> representing the most important heading and <h6> the least. Within the body content, employ <section> for grouping related content and <article> for standalone content pieces. Finally, use <nav> for navigation menus and <aside> for supplementary content. By adhering to these header guidelines, you create a clear and meaningful structure, enhancing both SEO and accessibility.

已翻译

赞
Krutika Patel

Technology and Marketing Sr. Manager at Cognixia | IT & Marketing Strategist | Driving Growth through Tech and Creativity
举报内容
To ensure semantically structured HTML with headers: 1. Utilize <header> for top-of-page content or navigation. 2. Use <nav> for navigation menus. 3. Prioritize headings (<h1> to <h6>) for content hierarchy. 4. Outline document structure with clear headings for each section. 5. Avoid skipping heading levels for logical organization. 6. Enhance SEO by emphasizing keywords in headings. 7. Validate HTML regularly for standards compliance.

已翻译

赞
Mohammad Ali Ghorbani Delijani

Full-Stack Engineer & DevOps Specialist | Embracing PHP, GoLang, and AI | 10+ Years of Web Development | Remote Work Enthusiast
举报内容
Utilize <h1> to <h6> tags for headers based on their hierarchical importance. Ensure headers are used to outline the structure and hierarchy of your content.

已翻译

赞
Ritu Sharma

I Promise Small businesses to book 50+ appointments/month for High-Value Services with a 100% guarantee through Website Development, Mobile App Development and Digital Marketing.
举报内容
how you can ensure your HTML is semantically structured by effectively using headers: Start with a single <h1> tag, which represents the main heading of your document and should provide a concise summary of its content. Use <h2> tags for major sections or topics within your document, providing clear subdivisions under the main heading. Progressively use <h3>, <h4>, <h5>, and <h6> tags for further subheadings, maintaining a hierarchical structure that reflects the organization of your content. Avoid skipping heading levels and maintain a logical sequence of headings to enhance readability

已翻译

赞
Giles Bennett

I write code that solves business problems. Co-founder and lead developer at Status 218, likewise at Cloud Ready Skills. Project Boo is my baby.
举报内容
At their most simple, heading tags run from H1 (the most important) to H6 (the least important). Ideally each semantic section of the page should have its own H1 to indicate to search engines what that section is about. Ignore anyone who says that you should only have one H1 tag per page. Use H2 and H3 tags to cover subtopics within one or more topics on your page. Try not to skip levels (ie. don't jump from H1 to H3) as this may be confusing to accessibility tools. Whilst they exist, H4 - H6 are little-used. If you never use them, that's absolutely fine. Remember, though, that with CSS styling, just because an H1 heading is an H1 heading, it doesn't have to look bigger, or more important, to the reader than an H2 or an H3.

已翻译

赞

加载更多内容

3 Navigation Elements

Proper navigation is essential for a user-friendly website. Use the <nav> element to wrap navigation links. This tells browsers and assistive technologies that the contained links are a major navigation block. For unordered lists of links, such as menus or site maps, use the <ul> tag with nested <li> elements for each item to maintain a clear and accessible structure.

添加您的观点

Mohammad Ali Ghorbani Delijani

Full-Stack Engineer & DevOps Specialist | Embracing PHP, GoLang, and AI | 10+ Years of Web Development | Remote Work Enthusiast
举报内容
Wrap navigation links within <nav> tags. Use <ul> and <li> for unordered lists of navigation items. Consider using semantic elements like <header> and <footer> to delineate navigation sections.

已翻译

赞
Ritu Sharma

I Promise Small businesses to book 50+ appointments/month for High-Value Services with a 100% guarantee through Website Development, Mobile App Development and Digital Marketing.
举报内容
To ensure your HTML is semantically structured with navigation elements: Use the <nav> element to encapsulate navigation links, representing a section of navigation within the document. Employ semantic elements such as <ul> and <li> to create lists of navigation items, ensuring clear organization and accessibility. Utilize anchor (<a>) tags within list items to link to different sections or pages of the website. Consider using additional semantic elements like <header> and <footer> within the <nav> element for supplementary navigation elements, such as logos or copyright information. Ensure navigation is intuitive and accessible

已翻译

赞
Madhawa Umanga Kariyawasam

Senior Front-End Engineer (UX) | Building Scalable SaaS Architectures | Data-Driven Future
举报内容
Instead of generic <div> tags, use dedicated navigation elements like <header>, <nav>, and <footer>. This clearly defines the purpose of these sections for browsers, assistive technologies, and even future developers working on your codebase. For example, if you're building a blog website, using a <nav> element for the main navigation bar communicates its purpose to screen readers, allowing users with visual impairments to easily locate and navigate through your blog categories.

已翻译

赞
Jeril Joy Joseph

Software Engineer
举报内容
Let's imagine you're designing a website for a small bakery. You'd want to create clear navigation for customers to easily find what they're looking for. So, you'd use the <nav> element to wrap the main navigation links like "Home," "Menu," "About Us," and "Contact." Within the <nav>, you'd use <ul> for each item, like this: <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/menu">Menu</a></li> <li><a href="/about">About Us</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav> This structure helps both browsers and assistive technologies understand the website's navigation, enhancing accessibility and user experience.

已翻译

赞

4 Structuring Content

When structuring the main content, choose HTML elements that match the type of content you are displaying. Use <article> for syndicated content, blog posts, or news articles. The <section> tag is perfect for grouping themed content within an article or page, and <aside> works well for tangentially related content, like sidebars. This semantic use of tags helps in outlining your content clearly.

添加您的观点

Sachin M Mane

Experienced in HTML, CSS, JavaScript, TypeScript, Angular, React, Next.js, Node.js, and Python. Successfully led multiple products and collaborated with cross-functional teams.
(已编辑)
举报内容
I emphasize the importance of semantic HTML for accessibility & SEO. ?? Use <header>, <footer>, <article>, and <section> to define page structure. ?? Use <nav> for navigation links and <main> for primary content. ?? For text, <h1>-<h6> establish hierarchy, while <em> and <strong> provide emphasis. Remember, correct tags improve user experience and help search engines understand your content!

已翻译

赞
Muhammad Moiz Aslam

?? Webflow | WordPress | Shopify | Wix | E-commerce Ninja ?? | Optimization Wizard ??? | Database & Server Maestro ??
举报内容
Think of your HTML like a blueprint for your webpage. Each tag has a unique job, helping organize your content in a way that's easy to understand. For instance, use <article> for main pieces of content, like blog posts or news stories. By using these tags correctly, you're essentially creating signposts for both search engines and users, making it simpler for them to navigate and comprehend your website's content.

已翻译

赞
Mohammad Ali Ghorbani Delijani

Full-Stack Engineer & DevOps Specialist | Embracing PHP, GoLang, and AI | 10+ Years of Web Development | Remote Work Enthusiast
举报内容
Use semantic elements such as <section>, <article>, <aside>, <main>, and <footer> to structure your content logically. Avoid using generic container elements like <div> when a more specific semantic element is applicable.

已翻译

赞
Jeril Joy Joseph

Software Engineer
举报内容
The homepage could have sections for different types of recipes like "Appetizers," "Main Courses," and "Desserts," each wrapped in a <section> tag. Within the "Main Courses" section, individual recipes would be wrapped in <article> tags. If there's a sidebar with cooking tips or related articles, that content would go in an <aside> tag. This way, the HTML structure mirrors the logical organization of the content.

已翻译

赞
Aneeqa Khan

Frontend Engineer | React, React Native, JavaScript, TypeScript, Next.js | Technical Writer | I Help Companies Build Scalable Software Solutions
举报内容
Select HTML elements based on their intended purpose and meaning. For example, use <nav> for navigation menus, <article> for standalone content, <section> for thematic grouping, and so on.

已翻译

赞

加载更多内容

5 Forms and Tables

Forms and tables need to be semantically correct to be accessible. For forms, use the <fieldset> element to group related entries and <legend> to title these groups. Always label your inputs with <label> for better accessibility. With tables, use <th> for header cells and <caption> to provide context, aiding both users and search engines in understanding tabulated data.

添加您的观点

Madhawa Umanga Kariyawasam

Senior Front-End Engineer (UX) | Building Scalable SaaS Architectures | Data-Driven Future
举报内容
You can use semantic elements like <form>, <input>, and <label> for forms. This not only improves accessibility but also allows browsers to perform functionalities like automatic form validation. For tables, you can use <table>, <tr>, <th>, and <td> elements to define rows, columns, headers, and data cells. This structure makes your tables not only visually organized but also machine-readable, allowing search engines to better understand your content. For example, if you are building an e-commerce website, you can use semantic elements for your product listing table (e.g., <th> for product name, <td> for price) helps search engines understand the data you're presenting, potentially improving your search ranking.

已翻译

赞
Mohammad Ali Ghorbani Delijani

Full-Stack Engineer & DevOps Specialist | Embracing PHP, GoLang, and AI | 10+ Years of Web Development | Remote Work Enthusiast
举报内容
Structure forms using <form> tags and include appropriate input types and labels. Utilize <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td> for tabular data. Ensure form inputs have associated labels for accessibility.

已翻译

赞
Jeril Joy Joseph

Software Engineer
举报内容
Imagine you're creating a registration form for a conference website. Use <fieldset> to group related inputs like personal info, contact details, and dietary preferences. For each input, wrap it in a <label> to associate the text with the input field. For tables, if you're displaying session schedules, use <th> for column headers and <caption> to summarize the table's purpose, like "Conference Schedule". These practices ensure your forms and tables are accessible to everyone.

已翻译

赞
Krutika Patel

Technology and Marketing Sr. Manager at Cognixia | IT & Marketing Strategist | Driving Growth through Tech and Creativity
举报内容
To ensure semantically structured HTML with forms and tables: 1. Use <form> to encapsulate form elements, facilitating data submission. 2. Employ semantic form elements like <input>, <textarea>, and <button> for user input. 3. Utilize <label> to associate labels with form controls for accessibility. 4. Prioritize <table> for tabular data, structuring rows with <tr>, headers with <th>, and data cells with <td>. 5. Avoid using tables for layout purposes to maintain semantic clarity. 6. Ensure table headers are marked up using <th> for screen reader compatibility. 7. Validate HTML to confirm correct usage of form and table elements according to standards.

已翻译

赞
Ritu Sharma

I Promise Small businesses to book 50+ appointments/month for High-Value Services with a 100% guarantee through Website Development, Mobile App Development and Digital Marketing.
举报内容
To ensure semantic structure with forms and tables: Use <form> element to encapsulate form controls, providing a semantic container for user input fields. Employ appropriate input types (<input>, <select>, <textarea>, etc.) with descriptive labels and placeholders for clarity. Utilize <label> elements to associate text labels with form controls, enhancing accessibility and usability. Maintain a logical tab order and utilize proper HTML attributes like "required" and "autocomplete" to improve form usability and accessibility. For tables, use <table> element with <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td> to create structured and accessible data tables, ensuring headers and data cells are appropriately labeled and organized.

已翻译

赞

6 Media and Embeds

Lastly, when embedding media such as images or videos, make sure to describe them using the <alt> attribute for images and proper titles or descriptions for videos. This ensures that users who rely on screen readers or have slow internet connections can still understand the content being presented. For other embeds like iframes or objects, provide a meaningful title and ensure that any interactive elements are fully accessible.

添加您的观点

Mohammad Ali Ghorbani Delijani

Full-Stack Engineer & DevOps Specialist | Embracing PHP, GoLang, and AI | 10+ Years of Web Development | Remote Work Enthusiast
举报内容
Use <img> for images and provide appropriate alt attributes for accessibility. Embed multimedia content using <audio>, <video>, or <iframe> tags where necessary. Include descriptive captions or labels for embedded media.

已翻译

赞
Krutika Patel

Technology and Marketing Sr. Manager at Cognixia | IT & Marketing Strategist | Driving Growth through Tech and Creativity
举报内容
To ensure semantically structured HTML with media and embeds: 1. Use <img> for images, providing alt attributes for accessibility. 2. Utilize <audio> and <video> for embedding audio and video content, with fallback content for unsupported browsers. 3. Employ <iframe> for embedding external content like maps or social media posts. 4. Prioritize semantic elements like <figure> and <figcaption> for grouping media and providing captions. 5. Avoid using deprecated tags like <embed> and <object> for media embedding. 6. Ensure responsive design by specifying appropriate dimensions and aspect ratios. 7. Regularly validate HTML to confirm correct usage of media and embed elements for standards compliance.

已翻译

赞
Ritu Sharma

I Promise Small businesses to book 50+ appointments/month for High-Value Services with a 100% guarantee through Website Development, Mobile App Development and Digital Marketing.
举报内容
To ensure semantic structure with media and embeds: Use appropriate semantic elements like <figure> and <figcaption> to encapsulate media content such as images, videos, and audio. Provide descriptive alt attributes for images to ensure accessibility and convey meaningful information to users. Utilize <video> and <audio> elements for embedding multimedia content, specifying supported formats and fallback content for compatibility. Employ <iframe> element for embedding external content like maps, ensuring proper attribution and compliance with usage policies. Maintain a balance between rich media and textual content, ensuring a seamless and accessible user experience across devices and platforms.

已翻译

赞
Madhawa Umanga Kariyawasam

Senior Front-End Engineer (UX) | Building Scalable SaaS Architectures | Data-Driven Future
举报内容
You can use elements like <figure> and <figcaption> for images and figures. This provides context for the image content and improves accessibility for screen reader users. For videos, you can use <video> element with appropriate attributes to specify the video source and control options. This ensures proper rendering and accessibility for video content across different browsers and devices. For example, if you have a news article with an embedded infographic, you can use <figure> and <figcaption> clarifies the infographic's role within the article, enhancing the overall user experience for all visitors, including those with visual impairments.

已翻译

赞

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Kimaya Jadhav(きまや)

Software Developer ( MEAN & MERN Stack ) Angular | Node | Javascript | Java | Bootstrap
举报内容
1) Validate HTML : Use online HTML validators to check for syntax errors and ensure your HTML markup follows the standards. 2) Test for accessibility: By using accessibility tools you can ensure that your HTML is accessible to users with disabilities.This includes screen readers, keyboard navigation,ensuring proper contrast and font sizes.

已翻译

赞
Mohammad Ali Ghorbani Delijani

Full-Stack Engineer & DevOps Specialist | Embracing PHP, GoLang, and AI | 10+ Years of Web Development | Remote Work Enthusiast
举报内容
Validate your HTML using tools like the W3C Markup Validation Service to ensure compliance with HTML standards. Use ARIA roles and landmarks to enhance accessibility, especially for dynamic content or single-page applications. Regularly review and refactor your HTML structure to maintain semantic integrity and improve code maintainability.

已翻译

赞
Isham Iqbal

Apps Modernisation | Systems Architecture | DevSecOps | ISO 27001
举报内容
Developers can utilise HTML5 features such as microdata, RDFa, or JSON-LD to add semantic annotations to the HTML markup, providing machine-readable metadata that further enhances the understanding and interpretation of the content by search engines and other automated systems. This can improve the visibility and discoverability of the content in search engine results and enable richer integrations with external platforms and services.

已翻译

赞
Giles Bennett

I write code that solves business problems. Co-founder and lead developer at Status 218, likewise at Cloud Ready Skills. Project Boo is my baby.
举报内容
If you're just getting started, be sure to get an understanding of the following (in no particular order) : 1. The difference between block-level and inline-level content (ie. which elements will automatically seek to create a new block, and which will seek to continue the flow of the existing block). 2. The main (and not so important) HTML elements - you don't have to go into depth on every single one (<marquee> anyone?) but you should at least be aware of what is out there, if nothing else because it may save you from trying to re-invent the wheel. 3. The basics of CSS, in particular the difference between IDs and Classes, and the priority with which conflicting rules will be applied. This can be very !important.

已翻译

赞
Kiran Gowda S

Senior Software Engineer at Intelliroot
举报内容
Use semantic HTML5 tags like <article>, <section>, <aside>, and <footer> to provide more meaningful structure to your content, improving both accessibility and search engine optimization. Paying attention to the hierarchy and nesting of HTML elements can help convey the relationships between different parts of your webpage more clearly to both users and search engines. Utilizing ARIA roles and attributes can enhance the accessibility of your HTML by providing additional context and instructions for assistive technologies. Regularly validating your HTML code using tools like the W3C Markup Validation Service can help ensure adherence to best practices and standards for semantic markup.

已翻译

赞

加载更多内容

Web Development

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

How can you ensure your HTML is semantically structured?

1

2

3

4

5

6

7

1 HTML Basics

2 Use of Headers

3 Navigation Elements

4 Structuring Content

5 Forms and Tables

6 Media and Embeds

7 Here’s what else to consider

Web Development

给文章评分

感谢您的反馈

更多Web Development相关文章

更多相关阅读内容

How can you ensure your HTML is semantically structured?

1

2

3

4

5

6

7

1 HTML Basics

2 Use of Headers

3 Navigation Elements

4 Structuring Content

5 Forms and Tables

6 Media and Embeds

7 Here’s what else to consider

Web Development

给文章评分

感谢您的反馈

查看其他技能