semantic-markup

How are <article> and <section> tags different from <div>? Do they affect anything? [closed]

由 风格不统一 提交于 2020-01-06 06:32:18
问题 Closed . This question is opinion-based. It is not currently accepting answers. Want to improve this question? Update the question so it can be answered with facts and citations by editing this post. Closed last year . Are the <article> and <section> tags important on a website, as opposed to regular <div> s? What is the their purpose? For example: Are there any additional limitations on them? E.g. is this a correct page structure? <body> <h1>Title</h1> <h6>00/00/0000 - 00:00</h6> <figure>

Heading order in HTML5

由 ▼魔方 西西 提交于 2020-01-06 02:43:31
问题 This is a webpage example of my site: <html> <title> artilce header </title> <body> <header> <h1> nme of website</h1></header> <section> <h2> name of section</h2> <article> <h3>article header</h3> </article> </section> </body> </html> I want to know if this order is correct? Or does it maybe have a bad effect on SEO? header is in all pages, section must have an header because of header/… For example, do I I have to change it to something like this: <html> <title> artilce header </title> <body

Using Microdata's 'itemprop' attribute on non-text elements

由 大兔子大兔子 提交于 2020-01-06 00:39:44
问题 I have a following piece of HTML with some Schema.org Microdata added: <section class="feature" itemprop="description"> <div class="measure"> <p>Lorem ipsum etc...</p> <p>Lorem ipsum etc...</p> <figure class="polaroid product"> <img src="dry-aged-beef-horizontal.jpg", alt="Dry Aged Beef", itemprop="image" /> <figcaption>Dry Aged Beef</figcaption> </figure> </div> </section> Is it all right to use the itemprop attribute on an element that isn't itself a text node (like section above), but

html5 semantic tag for an article summary and highlight

由 风流意气都作罢 提交于 2020-01-03 17:18:10
问题 I am looking for a proper html5 tag which I can use for marking summary of a very lengthy article. The summary itself can span for a paragraph or two. I know there is a <summary> tag in html5 but this tag behaves in conjunction with <details> tag. and secondly, I want to highlight a paragraph or two in the middle of a lengthly article. These highlighted section are important text that needs to be prominently displayed. Is there any html5 tag for this? or should I just use a class for

Which HTML5 tags are semantically correct to represent e-commerce products?

由 南楼画角 提交于 2020-01-02 10:58:13
问题 Should I wrap the products with unordered list <ul><li> ? How can I make products clickable without JavaScript, just using HTML? Can I wrap each product with: <a href="linkToProduct"> <article> <h3>Product 1</h3> <img src="images/product1.png" alt="product 1"> <p><data value="50">50</data>$</p> </article></a> Here is my code : <section id="my-products"> <h1>My Products</h1> <article> <h3>Product 1</h3> <img src="images/product1.png" alt="product 1"> <p><data value="50">50</data>$</p> <

Does the h1 need to be the first semantic element in a header tag?

由 假装没事ソ 提交于 2020-01-02 01:38:06
问题 I am using a Chrome outliner extension to check the semantics of my page. It seems to be a problem to have any structural element before the h1 in the document main header tag. I was thinking the order does not matter, but apparently it does: +Document Body +Header +nav +h1 Main Navigation +h1 MyPage -Section -Footer Does outline like this: Untitled Body Main Navigation MyPage etc... But when the h1 is the first element in my header: +Document Body +Header +h1 MyPage +nav +h1 Main Navigation

Display heading inline with following paragraph

由 烂漫一生 提交于 2020-01-01 02:44:09
问题 Given the following semantic markup: <h3> SCOPE OF WORK. </h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> I would like to display the heading inline with the paragraph, like so: SCOPE OF WORK. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

Style a definitition list as simple key value set

由 二次信任 提交于 2019-12-30 09:39:16
问题 I'd like to use a definition list as simple as: <dl> <dt>name:</dt> <dd>Tomas</dd> <dt>address:</dt> <dd>this is a very long wrapping address</dd> <dt>age:<dt> <dd>29</dd> <dl> to render something like: name: Tomas address: this is a very long wrapping address age: 29 The definition list seems semantically the best option here. Using the new run-in display style will do the trick: <style> dt { display: run-in; } </style> But this isn't widely supported yet. How can I style my definition list

Is it ok to use cellpadding=“2” cellspacing=“2” in <table>?

由 ↘锁芯ラ 提交于 2019-12-30 08:22:30
问题 Is it ok to use cellpadding="2" cellspacing="2" in <table> ? Or are these not recommended by W3C and not right according to web standards? What are alternatives in CSS? Update : and is it also ok to use <td align="right" valign="top"> ? My question is in terms of separation of content and presentation and W3C recommendations. Update : According to this chart in <table> only align and bgcolor are not allowed in Strict version. So is it ok to allow other properties of <table> ? alt text http:/

What tag should be used for a logo element if the logo is text?

由 試著忘記壹切 提交于 2019-12-30 08:01:31
问题 I have read that an <h1> tag is inappropriate for a logo. But if your logo is plain text, what should you use? I feel like <p> and <span> are also unsuitable. Here's a sample: <header> <nav> <a id="logo" href="."> <span>Company Name</span> </a> <a id="linkOne" href="#thingOne"> <img src="…"> </a> <a id="linkTwo" href="#thingTwo"> <img src="…"> </a> <a id="linkThree" href="#thingThree"> <img src="…"> </a> </nav> </header> Thanks! 回答1: Given your markup example, you seem to ask about a link in
订阅 semantic-markup